Generador de patrones SVG
Genera un patrón de fondo SVG repetible con una forma elegida, colores de primer plano y fondo y escala ajustable, luego copia el SVG o el CSS y descarga el archivo.
Generador de patrones SVG — Elige una forma de patrón como puntos, cuadrícula, rayas, líneas diagonales o un tablero de ajedrez, define los colores de primer plano y de fondo, y ajusta la escala del mosaico y el grosor de las líneas. Una vista previa en vivo repite el patrón por un cuadro, y se muestra el marcado SVG o la regla CSS background lista para copiar con un clic o descargar. Todo se ejecuta por completo en tu navegador; ningún color, código o archivo se envía nunca a un servidor.
¿Qué es Generador de patrones SVG?
El Generador de Patrones SVG es una herramienta gratuita en el navegador para diseñadores web y desarrolladores front-end que necesitan un fondo ligero y repetible sin abrir un editor gráfico. Eliges un patrón en un menú desplegable (puntos, cuadrícula, rayas, diagonal, tablero), defines un color de primer plano para las formas y uno de fondo para el mosaico, y usas los campos numéricos de escala y grosor para controlar el tamaño del mosaico y el grosor del trazo. El resultado es un único mosaico dibujado como SVG nítido, pensado para repetirse sin costuras, así que los archivos siguen siendo diminutos y el patrón escala sin volverse borroso. Usa el conmutador de Formato para alternar la salida copiable entre el marcado SVG puro y una regla CSS background-image, luego cópiala o descarga el archivo .svg para sitios, tarjetas, secciones de portada y maquetas de interfaz.
Cómo usar Generador de patrones SVG
- Elige un patrón en el menú desplegable: Puntos, Cuadrícula, Rayas, Diagonal o Tablero.
- Escribe o elige un color de primer plano para las formas y un color de fondo para el mosaico.
- Ajusta los campos numéricos de Escala (tamaño del mosaico en píxeles) y Grosor (radio del punto o grosor de la línea).
- Abre Ajustes y usa el conmutador de Formato para alternar la salida entre SVG y CSS.
- Observa cómo la vista previa repite el patrón, copia el SVG o el CSS, o haz clic en Descargar para guardar el archivo .svg.
Ejemplos
Fondo de lunares
Elige Puntos, una escala pequeña como 24px y un grosor de 3, con un color de punto claro sobre un mosaico de fondo oscuro para obtener una textura de lunares uniformemente espaciados.
Cuadrícula de plano
Elige Cuadrícula con una escala de 40px y un grosor fino de 1px, un color de línea tenue sobre un fondo azul profundo, para un fondo de página de estilo plano técnico.
Rayas diagonales en CSS
Selecciona Diagonal, cambia el conmutador de Formato a CSS y copia la regla background-image generada con background-repeat: repeat directamente en tu hoja de estilos.
Preguntas frecuentes
- ¿Qué patrones puedo generar?
- Cinco patrones repetibles: puntos, cuadrícula, rayas, líneas diagonales y un tablero de ajedrez. Cada uno se dibuja como un pequeño mosaico SVG que se repite sin costuras, por lo que se mantiene nítido a cualquier tamaño y el archivo es diminuto.
- ¿Qué controlan Escala y Grosor?
- La escala es el tamaño de un mosaico en píxeles, que determina la distancia entre las formas repetidas. El grosor es el radio del punto o el grosor de la línea dentro del mosaico. El grosor se limita automáticamente en relación con la escala para que el patrón nunca llene de más el mosaico.
- ¿Cuál es la diferencia entre la salida SVG y la CSS?
- SVG te da el marcado puro para un archivo .svg independiente o uso en línea. CSS te da una regla background-image que usa un data URI más background-repeat: repeat, lista para pegar en una hoja de estilos. Usa el conmutador de Formato en Ajustes para cambiar entre ambas.
- ¿Puedo elegir colores visualmente en lugar de escribir el HEX?
- Sí. Haz clic en la muestra de color junto al campo de primer plano o de fondo para abrir el selector de color nativo de tu navegador, o escribe un valor HEX como #4f86f7 directamente. La vista previa y la salida se actualizan a medida que lo cambias.
- ¿Se suben mis colores o archivos a algún sitio?
- No. El patrón se construye por completo en tu navegador como una cadena SVG, y la descarga se crea localmente como un Blob. Ningún color, código o archivo se envía nunca a un servidor, por lo que funciona sin conexión y mantiene tu trabajo privado.
Herramientas relacionadas
Código a imagen
Convierte un fragmento de código en una imagen PNG pulida con resaltado de sintaxis en tu navegador, con tema, fondo de degradado o transparente y relleno, sin subir nada.
Verificador de contraste de color
Comprueba la relación de contraste WCAG entre un color HEX de primer plano y uno de fondo, y si cumple AA y AAA para texto normal y grande.
Mezclador de colores
Mezcla dos colores HEX en la proporción que elijas, en espacio RGB o Lab, y obtén el color intermedio como muestra y valor HEX copiable.
Generador de tonos de color
Convierte un color HEX base en una escala de tonos 50-950 al estilo Tailwind, mezclando hacia blanco y negro, con muestra y HEX copiable.