CSS로 하운드투스 패턴 그리기

Source: Dev.to

Introduction

저는 하운드투스 패턴을 어린 시절과 연관시킵니다—어렸을 때 어디서든 이 패턴을 보았지만 나중에 사라지는 것을 기억합니다. CSS 관점에서 이 패턴은 실제로 꽤 간단하며 두 개의 그라디언트만으로 만들 수 있습니다:

• 원뿔형 그라디언트(conic gradient) – 흰색과 검은색 박스 패턴을 생성합니다.
• 반복 선형 그라디언트(repeating linear gradient)(또는 일반 선형 그라디언트) – 대각선 라인을 만듭니다.

편의를 위해 크기를 위한 커스텀 속성을 정의하면 단일 값만 바꿔서 패턴 크기를 조절할 수 있습니다.

CSS Implementation

body {
  --size: 100px;                     /* Adjust this value to change the pattern size */
  background-size: var(--size) var(--size);
  background-image:
    conic-gradient(#fff 25%, #0000 0 50%, #000 0 75%, #0000 0),
    repeating-linear-gradient(
      135deg,
      #fff 0 12.5%,
      #000 0 25%,
      #fff 0 37.5%,
      #000 0 62.5%
    );
}

How it works

• --size는 패턴 각 반복의 너비와 높이를 제어합니다.
• conic-gradient는 하운드투스의 고전적인 체스보드 사각형을 만듭니다.
• repeating-linear-gradient는 135° 각도로 대각선 “치아” 라인을 추가합니다.

Demo

CSS로 실시간 패턴을 생성하는 비디오.

(Insert video embed or link here.)

그리고 이렇게 CSS로 하운드투스 패턴을 그릴 수 있습니다. :)