Generador de patrones SVG

El generador de patrones SVG crea fondos en mosaico repetidos definiendo un elemento SVG <pattern> relleno con una única forma repetida. Ofrece seis tipos de formas (círculos, cuadrados, triángulos, líneas, cruces, rombos) dibujadas como primitivas de contorno, luego los coloca en mosaico en una vista previa de 200x200 y exporta el marcado SVG completo para usarlo en páginas web, fondos CSS o archivos de diseño.

1. Elige un Tipo de patrón entre las seis opciones de botón. 2. Ajusta el control deslizante de Tamaño (de 10 a 60px) para establecer tanto las dimensiones del mosaico como la escala de la forma. 3. Ajusta el control deslizante de Ancho de trazo (de 0,5 a 6,0). 4. Usa Rotación (de 0 a 360 grados, en pasos de 5 grados) para girar el mosaico mediante patternTransform. 5. Establece el Color de forma y el Color de fondo usando las dos muestras de color. 6. Haz clic en Copiar para copiar el SVG generado al portapapeles.

El SVG exportado es de 200x200 con un bloque <defs><pattern> que usa patternUnits="userSpaceOnUse". El ancho y alto del patrón son iguales al valor de Tamaño, por lo que cada mosaico se repite en una cuadrícula de ese tamaño. Primero se dibuja un <rect> de fondo relleno con el Color de fondo y luego un segundo <rect> relleno con url(#pat) superpone los mosaicos. Cuando la Rotación no es cero, la rotación se aplica tanto como patternTransform en el patrón como como transformación rotate() en la propia forma.