Generador de patrones de fondo SVG

Generador de patrones de fondo SVG

Elige un motivo — puntos, cuadrícula, rayas diagonales, ondas, cuadrados, hexágonos o topografía — y esta herramienta construye un patrón SVG sin solución que puedes insertar directamente en el fondo de un sitio web, en una pantalla de aplicación o en un diseño impreso. El patrón se construye a partir de un único mosaico repetido, por lo que el archivo permanece pequeño sin importar lo grande que sea el área que cubre.

El tamaño del mosaico controla el espaciado entre repeticiones, y el espesor de línea controla lo negrita que son los trazos — también establece el tamaño de los puntos y cuadrados para esos dos motivos. Los colores de primer plano y fondo aceptan cualquier color hexadecimal (#RRGGBB o la forma más corta #RGB), la opacidad desvanece el motivo en su fondo sin tocar el color de fondo en sí, y la rotación gira todo el mosaico — las rayas diagonales ya comienzan en 45° y giran más desde allí. Cambia el formato de salida para obtener exactamente lo que necesitas: marcado SVG plano para guardar como archivo, una regla CSS lista para pegar con el patrón integrado como URI de datos, o una clase de valor arbitrario de Tailwind que puedes insertar directamente en la lista de clases de un elemento.

Cada opción actualiza la vista previa al instante mientras la ajustas, y el recuento debajo de la salida informa las dimensiones del mosaico, el recuento exacto de caracteres del código generado y el formato de salida activo. Debido a que el patrón es un único mosaico vectorial pequeño en lugar de un mapa de bits, permanece nítido en cualquier nivel de zoom y se escala a cualquier tamaño de pantalla sin costo.

Todo se ejecuta localmente en tu navegador — nada de lo que diseñes aquí se carga en ningún lugar. Cuando estés satisfecho con el resultado, cópialo, descárgalo como archivo .txt o devuelve la salida a la entrada para seguir refinándola.

Preguntas frecuentes