[해피CGI][cgimall] SVG와 CSS-Doodle을 활용해 만들수 있는 클래식 기하학 패턴

CSS-Doodle과 SVG를 이용해 정적인 기하학 패턴을 구현한 코드입니다.
SVG로 정의된 원형 도형을 패턴으로 등록하고, 이를 반복 배치하여 고전적인 타일 느낌을 만듭니다.
HTML과 CSS만으로 패턴 배경을 제작할 수 있다는 점을 보여주는 실습용 예제입니다.
웹 배경, 디자인 레퍼런스, 패턴 실험 등 다양한 용도로 활용할 수 있습니다.
 

HTML 구조

<script type="module" src="https://esm.sh/css-doodle">

 

<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>

CSS 소스

html, body {

  margin: 0;

}

 

css-doodle:not(:defined) {

  display: none;

}