Generador de Patrones SVG
Crea patrones geométricos personalizados en SVG. Ajusta colores, tamaño, rotación y exporta como SVG o CSS.
Configuración del Patrón
Vista Previa
Código SVG
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
<rect width="20" height="20" fill="#ffffff"/>
<circle cx="10" cy="10" r="3.3333333333333335" fill="#3b82f6" />
</pattern>
</defs>
<rect width="400" height="400" fill="url(#pattern)" opacity="1"/>
</svg>Código CSS (Data URI)
background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22400%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cpattern%20id%3D%22pattern%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%2220%22%20patternUnits%3D%22userSpaceOnUse%22%20patternTransform%3D%22rotate(0)%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%223.3333333333333335%22%20fill%3D%22%233b82f6%22%20%2F%3E%0A%20%20%20%20%0A%20%20%20%20%3C%2Fpattern%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22400%22%20height%3D%22400%22%20fill%3D%22url(%23pattern)%22%20opacity%3D%221%22%2F%3E%0A%3C%2Fsvg%3E');