SVG 패턴 생성기

SVG 패턴 생성기는 단일 반복 도형으로 채워진 SVG <pattern> 요소를 정의하여 반복되는 타일 배경을 만듭니다. 6가지 도형 유형(원, 사각형, 삼각형, 선, 십자, 마름모)을 윤곽선 기본 요소로 그린 다음 200x200 미리보기에 타일로 배치하고, 웹 페이지, CSS 배경 또는 디자인 파일에 사용할 수 있는 완전한 SVG 마크업을 내보냅니다.

1. 여섯 개의 버튼 선택지에서 패턴 유형을 선택합니다. 2. 크기 슬라이더(10~60px)를 조정하여 타일 치수와 도형 크기를 모두 설정합니다. 3. 선 너비 슬라이더(0.5~6.0)를 조정합니다. 4. 회전(0~360도, 5도 단위)을 사용하여 patternTransform으로 타일을 회전합니다. 5. 두 개의 색상 견본을 사용하여 도형 색상과 배경 색상을 설정합니다. 6. 복사를 클릭하여 생성된 SVG를 클립보드에 복사합니다.

내보낸 SVG는 200x200이며 patternUnits="userSpaceOnUse"를 사용하는 <defs><pattern> 블록을 포함합니다. 패턴의 너비와 높이는 크기 값과 같으므로 각 타일은 해당 크기의 그리드에서 반복됩니다. 먼저 배경 색상으로 채워진 배경 <rect>가 그려지고, 그 다음 url(#pat)으로 채워진 두 번째 <rect>가 타일 위에 겹쳐집니다. 회전이 0이 아닌 경우, 회전은 패턴의 patternTransform으로도, 도형 자체의 rotate() 변환으로도 적용됩니다.