Generador de Patrones SVG
Combina tipo de patrón, tamaño, espaciado, rotación, inclinación, colores y opacidad para construir texturas SVG listas para producción directamente en tu navegador.
Rayas
Tamaño del SVG:0.53 KB
Código SVG
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480" role="img">
<defs>
<pattern id="_R_2npfiv9flb_" patternUnits="userSpaceOnUse" width="28" height="28" patternTransform="rotate(45)">
<rect width="28" height="28" fill="#c3d4ff" />
<rect width="6" height="28" fill="#667eea" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="#f7f8fc" />
<rect width="100%" height="100%" fill="url(#_R_2npfiv9flb_)" opacity="0.9" />
</svg>Controles del patrón
Herramientas Herramientas de Imagen similares
Ver todas
Guía del Generador de Patrones SVG
Introducción de la Herramienta
Crea texturas vectoriales sin costuras directamente en el navegador combinando rayas, rejillas, ondas, puntos o triángulos. Ajusta espaciado, colores, opacidad y ángulos para obtener código SVG listo para producción al instante.
Pasos de Uso
- Selecciona un tipo de patrón y visualiza el resultado en tiempo real
- Ajusta ancho, alto, espaciado y grosor/diámetro para adaptarlo a tu diseño
- Sincroniza colores y opacidad con la paleta de tu marca
- En el modo de rayas usa el control de ángulo para cambiar la inclinación
- Copia el código SVG o descarga el archivo para usarlo inmediatamente
Consejos
Los fondos discretos funcionan mejor con espaciado reducido y baja opacidad; para héroes y encabezados apuesta por colores contrastantes y espacios amplios.
Preguntas Frecuentes
Notas Importantes
- Valores extremos de espaciado o lienzos muy grandes pueden afectar el rendimiento del navegador
- Los degradados no se añaden automáticamente; aplícalos después si los necesitas
- Cuida el contraste cuando coloques patrones detrás de texto
- La exportación conserva el ancho y alto actuales; ajústalos antes de descargar