Generador de Patrones SVG (Mosaicos Geométricos)

Generador de Patrones SVG

Crea patrones de teselas geométricas perfectas con vista previa en vivo. Elige entre 12 tipos de patrones — puntos, líneas, cuadrículas, hexágonos, chevrons, triángulos y más — personaliza colores, tamaño, espaciado y rotación, y luego exporta como código SVG, fondo CSS o archivo SVG descargable. Todo se ejecuta en tu navegador con retroalimentación visual instantánea.

Cómo Usar

Selecciona un tipo de patrón del menú desplegable, luego ajusta los controles para personalizar tu diseño. La vista previa se actualiza en tiempo real a medida que cambias colores, tamaño, espaciado, grosor del trazo, opacidad y rotación. Cuando estés satisfecho con el resultado, utiliza los botones de exportación para copiar el código SVG, copiar el marcado del fondo CSS, descargar el archivo SVG o copiar solo la definición del patrón para incrustarla en SVGs existentes.

Características

• 12 Tipos de Patrones — Puntos, líneas horizontales, líneas verticales, líneas diagonales, cuadrícula, chevron/zigzag, hexágonos, triángulos, diamantes, cruces, ondas y tablero de ajedrez. Cada uno se tesela perfectamente.
• Vista previa en vivo — Amplia área de vista previa visual que muestra tu patrón teselado en tiempo real. Cada cambio se refleja instantáneamente — sin esperas, sin botón de generar.
• Personalización de Color — Selectores de color para colores de primer plano y fondo. Crea cualquier combinación de colores para tu patrón.
• Controles de Tamaño y Espaciado — Deslizadores de rango para la escala del patrón (10-100px), el grosor del trazo (1-20px) y el espaciado (5-100px). Ajusta finamente la densidad y el peso de tu patrón.
• Opacidad y Rotación — Ajusta la opacidad del patrón (0.1-1.0) y la rotación (0-360°) para variaciones creativas y efectos de superposición.
• Exportar como Código SVG — Copia el marcado SVG completo con el patrón incrustado, listo para pegar en cualquier proyecto.
• Exportar como Fondo CSS — Copia una propiedad CSS background-image con URI de datos — pégala directamente en tu hoja de estilos para fondos de patrón perfectos.
• Descargar Archivo SVG — Descarga el patrón como un archivo .svg para usarlo en herramientas de diseño (Figma, Illustrator, Sketch).
• Copiar Definición del Patrón — Copia solo el elemento SVG para incrustarlo en documentos SVG existentes.

Tipos de Patrones

Puntos: Círculos dispuestos en una cuadrícula regular. Patrón clásico de lunares.
Líneas: Líneas paralelas horizontales, verticales o diagonales. Limpio y minimalista.
Cuadrícula: Líneas perpendiculares que forman una cuadrícula de papel cuadriculado.
Chevron/Zigzag: Patrón repetitivo en forma de V. Ideal para fondos dinámicos.
Hexágonos: Teselado de panal de abejas. Matemático y orgánico.
Triángulos: Rejilla de triángulos repetidos. Geométrico y moderno.
Diamantes: Cuadrados rotados creando formas de diamante. Elegante y clásico.
Cruces: Signos más dispuestos en una cuadrícula. Limpio y estructurado.
Ondas: Líneas sinusoidales curvas. Orgánico y fluido.
Tablero de Ajedrez: Cuadrados alternos llenos y vacíos. Audaz e icónico.