CSS-Doodle과 SVG를 이용해 정적인 기하학 패턴을 구현한 코드입니다.
SVG로 정의된 원형 도형을 패턴으로 등록하고, 이를 반복 배치하여 고전적인 타일 느낌을 만듭니다.
HTML과 CSS만으로 패턴 배경을 제작할 수 있다는 점을 보여주는 실습용 예제입니다.
웹 배경, 디자인 레퍼런스, 패턴 실험 등 다양한 용도로 활용할 수 있습니다.
<script type="module" src="https://esm.sh/css-doodle"></script>
<css-doodle><style>
@grid: 1 / 100vw 100vh;
@content: @svg(
viewBox: 0 0 10 10;
preserveAspectRatio: xMidYMid slice;
--bc: #f9df90;
--fc: #1f2e36;
--size: 10%;
defs symbol#circle {
viewBox: 0 0 10 10;
g {
stroke-width: 1;
stroke: @p(--fc);
fill: @p(--bc);
circle*10-1 {
cx, cy: @match(n<6, 0 10, 10 0);
r: $(1 + @n.match(n<6, -1, -6) * 2);
}
}
}
defs pattern#pattern {
viewBox: 0 0 10 10;
width, height: @p(--size);
rect {
width, height: 100%;
fill: @p(--bc);
}
use*4 {
href: #circle;
width, height: 50%;
transform:
translate(@pn(0, 10 0, 0 10, 10 10))
rotate(@pn(0, 90, -90, 180));
}
}
rect {
width, height: 100%;
fill: url(#pattern);
}
)
</style></css-doodle>
