SVG 패턴 생성기
반복 가능한 SVG 타일 패턴을 생성합니다. 패턴 유형, 색상, 크기를 커스터마이즈하고 코드를 내보냅니다.
#6366f1
#ffffff
미리보기
SVG 코드
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="custom-pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
<rect width="40" height="40" fill="#ffffff" />
<circle cx="20" cy="20" r="7" fill="#6366f1" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#custom-pattern)" />
</svg>이 도구 공유
📖
사용 방법
Step 1
패턴 선택
기하학, 전통, 모던 등 패턴 카테고리를 선택합니다
→
Step 2
커스터마이즈
색상, 크기, 간격, 회전 등을 조정합니다
→
Step 3
SVG 복사
SVG 코드를 복사하거나 이미지로 다운로드합니다
✨
기능
실시간 미리보기
매개변수를 조정하면서 실시간으로 패턴을 미리봅니다
풍부한 템플릿
기하학, 점, 선, 전통 문양 등 다양한 템플릿
심리스 타일링
생성된 패턴이 이음새 없이 매끄럽게 타일링됩니다
❓
FAQ
SVG <pattern> 요소를 사용한 반복 가능한 벡터 패턴입니다. 배경이나 채우기로 사용할 수 있습니다.
🔗관련 도구
🎨
디자인 도구색상 코드 변환기
HEX, RGB, HSL 색상 코드 간 변환을 합니다. 색상 선택기와 실시간 미리보기로 직관적인 색상 선택이 가능합니다.
🎨
디자인 도구색상 선택기
색상 휠과 슬라이더로 직관적으로 색상을 선택하세요. HEX, RGB, HSL 형식의 색상 코드를 확인하고 복사할 수 있습니다.
🎨
디자인 도구이미지 색상 추출기
이미지에서 대표 색상을 자동으로 감지하고 색상 팔레트를 생성합니다. 이미지의 아무 곳이나 클릭하여 개별 색상을 추출할 수도 있습니다.
🎯
디자인 도구이미지 평균 색상 추출기
이미지 전체 또는 선택 영역의 평균 색상을 계산합니다. 색상 배합이나 썸네일 배경색 선택에 유용합니다.
🌈
디자인 도구CSS 그라데이션 생성기
드래그 조작으로 CSS 그라데이션을 시각적으로 만듭니다. 선형, 원형, 원추형 그라데이션 유형과 프리셋을 지원합니다.
🔲
디자인 도구CSS 박스 그림자 생성기
슬라이더로 CSS box-shadow를 시각적으로 만듭니다. 다중 그림자와 내부 그림자를 지원합니다.