SVG 패턴 생성기
배경용 SVG 패턴을 만들고 CSS/SVG 코드를 복사하세요
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cpattern%20id%3D%22pattern%22%20width%3D%2222%22%20height%3D%2222%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%223%22%20fill%3D%22%236366f1%22%20opacity%3D%220.6%22%2F%3E%0A%20%20%20%20%3C%2Fpattern%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23pattern)%22%2F%3E%0A%3C%2Fsvg%3E");
background-repeat: repeat;<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<defs>
<pattern id="pattern" width="22" height="22" patternUnits="userSpaceOnUse">
<circle cx="11" cy="11" r="3" fill="#6366f1" opacity="0.6"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff"/>
<rect width="100%" height="100%" fill="url(#pattern)"/>
</svg>SVG 패턴 생성기 사용 가이드
웹사이트 배경, 카드, 히어로 섹션 등에 사용할 SVG 패턴을 만드세요. 10종 패턴과 다양한 커스터마이징 옵션으로 독특한 디자인을 완성하세요.
SVG 패턴의 장점
SVG 패턴은 벡터 기반이라 어떤 해상도에서도 선명합니다. 이미지 파일 없이 CSS data URI로 적용할 수 있어 HTTP 요청을 줄이고 페이지 로딩 속도를 개선합니다.
활용 사례
랜딩 페이지 히어로 배경, 카드 오버레이, 프레젠테이션 배경, 소셜 미디어 그래픽, 뉴스레터 디자인 등 다양한 곳에서 SVG 패턴을 활용할 수 있습니다.
FAQ
Related Tools
🎨Color Picker
HEX, RGB, HSL converter🌈CSS Gradient
Visual gradient builder🎨Color Palette
Color harmony generator✏️SVG Editor
Edit & optimize SVG