Generador de Patrones SVG - Crear Fondos Repetitivos en Línea
Genera patrones de fondo SVG personalizados con vista previa en tiempo real. Ajusta escala, rotación, opacidad, espaciado y trazo — exporta como SVG, CSS o PNG. 100% en el navegador, sin envío de datos.
Preguntas Frecuentes
¿Qué es un Generador de Patrones SVG?
Un Generador de Patrones SVG es una herramienta que crea patrones de fondo repetibles y sin costuras en formato SVG (Gráficos Vectoriales Escalables). Estos patrones se definen usando el elemento SVG <pattern>, que permite que una pequeña unidad gráfica se repita infinitamente sobre una superficie. Los patrones SVG se usan ampliamente en diseño web para fondos, texturas decorativas y acentos visuales porque son ligeros, escalables a cualquier resolución y totalmente personalizables con código.
¿Cómo uso este Generador de Patrones SVG?
1. Explore la biblioteca de patrones y seleccione un tipo (ej. Líneas Diagonales, Hexágonos, Puntos). 2. Personalice el color principal (elementos del patrón) y el color de fondo. 3. Ajuste la Escala para controlar la densidad del patrón. 4. Establezca el ángulo de Rotación. 5. Ajuste finamente la Opacidad, Espaciado y Grosor de Trazo. 6. Cambie entre estilo Relleno y Contorno. 7. Copie el código SVG o CSS, o descargue como archivo SVG/PNG.
¿Cuál es la diferencia entre la salida SVG y CSS?
La salida SVG le da un archivo SVG completo con elementos <pattern> y <rect>. Es ideal para incrustar directamente en HTML, usar en herramientas de diseño (Figma, Illustrator), o referenciar como archivo de imagen. La salida CSS le da código CSS background-image con el patrón codificado como URI de datos SVG en línea. Es ideal para aplicar patrones directamente en sus hojas de estilo sin archivos adicionales. Ambas salidas producen resultados visuales idénticos.
¿Cómo funcionan los patrones sin costuras?
Todos los patrones en este generador están diseñados para ser sin costuras por defecto. El elemento SVG <pattern> maneja el mosaico automáticamente repitiendo la unidad del patrón en toda la superficie. Los parámetros de escala, espaciado y rotación le permiten ajustar la apariencia del mosaico, pero la continuidad siempre se mantiene matemáticamente.
¿Por qué los patrones SVG son mejores que los fondos basados en imágenes?
Los patrones SVG ofrecen varias ventajas sobre fondos de imágenes rasterizadas (PNG, JPEG): se escalan perfectamente a cualquier resolución sin pixelación, tienen tamaños de archivo extremadamente pequeños (típicamente menos de 1KB), se pueden personalizar (colores, escala, rotación) via código sin re-exportar, soportan transparencia nativamente, se renderizan nítidamente en todas las densidades de pantalla (Retina, 4K), y se pueden incluir en línea en CSS sin solicitudes HTTP adicionales.
¿Puedo usar los patrones generados en mi proyecto web?
Sí, los patrones generados se pueden usar libremente en cualquier proyecto web. Puede incrustar el código SVG directamente en HTML, usar la salida CSS en sus hojas de estilo, o referenciar el archivo SVG descargado. Los patrones se generan a partir de primitivas geométricas y cumplen con los estándares, funcionando en todos los navegadores modernos.
¿Es seguro y privado este Generador de Patrones SVG?
Sí. Esta herramienta se ejecuta 100% en su navegador usando JavaScript del lado del cliente. Ningún dato de diseño, patrón o configuración de color se envía jamás a ningún servidor. Toda la generación de patrones, creación de código SVG/CSS y exportación PNG ocurren localmente en su dispositivo.
Ejemplos de Código
// Create SVG background patterns programmatically
function createDiagonalLinesPattern(options = {}) {
const {
size = 10,
strokeWidth = 1,
color = "#6366f1",
backgroundColor = "#ffffff",
opacity = 1,
rotation = 45,
} = options;
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
<rect width="${size}" height="${size}" fill="${backgroundColor}" />
<line x1="0" y1="${size}" x2="${size}" y2="0"
stroke="${color}" stroke-width="${strokeWidth}" opacity="${opacity}"
transform="rotate(${rotation} ${size / 2} ${size / 2})" />
</svg>`;
}
function createDotsPattern(options = {}) {
const {
size = 20,
dotRadius = 2,
color = "#6366f1",
backgroundColor = "#ffffff",
opacity = 1,
} = options;
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
<rect width="${size}" height="${size}" fill="${backgroundColor}" />
<circle cx="${size / 2}" cy="${size / 2}" r="${dotRadius}"
fill="${color}" opacity="${opacity}" />
</svg>`;
}
// Convert SVG pattern to CSS background
function svgToCssBackground(svgString) {
const encoded = encodeURIComponent(svgString)
.replace(/'/g, "%27")
.replace(/"/g, "%22");
return `url("data:image/svg+xml,${encoded}")`;
}
// Usage
const linesSvg = createDiagonalLinesPattern({ size: 12, strokeWidth: 1.5, color: "#3b82f6" });
const dotsSvg = createDotsPattern({ size: 16, dotRadius: 1.5, color: "#8b5cf6" });
const element = document.getElementById("my-element");
element.style.backgroundImage = svgToCssBackground(linesSvg);
element.style.backgroundRepeat = "repeat";
console.log("CSS:", svgToCssBackground(dotsSvg));