Generador de patrones SVG
Genera puntos, rayas y patrones geométricos repetibles.
Cómo usar Generador de patrones SVG
SVG pattern generator creates a repeating dots, diagonal stripes or grid pattern as an SVG file. Pick foreground and background colors, a tile spacing from 4 to 200 px, and a dot radius or stroke width from 1 to 50 px. The output is a 600 by 400 SVG built on a pattern element, shown as markup and downloadable as pattern.svg.
- Introduce los valores solicitados en el panel de ajustes.
- Ajusta la configuración básica y abre el modo avanzado para opciones de exportación y ajuste fino. La configuración personalizada sigue activa al cerrar el panel.
- Ejecuta el generador de patrones SVG, revisa la salida y usa los controles disponibles para copiar o descargar.
Qué admite esta herramienta
Genera puntos, rayas y patrones geométricos repetibles.
- Patrón
- dots · stripes · grid
- Primer plano
- Set this value for your task.
- Fondo
- Set this value for your task.
- Espaciado (px)
- Range: 4 to 200
- Radio de punto / trazo (px)
- Range: 1 to 50
Límites y procesamiento
Las imágenes usan el límite de lienzo existente de 32 megapíxeles. Se permiten hasta 100 imágenes de origen donde sea admitido. El HTML pegado está limitado a 200,000 caracteres; los diagramas Mermaid a 20,000 caracteres y 300 líneas. La generación de SVG y PNG requiere un navegador.
Preguntas frecuentes
How do I use the SVG pattern as a CSS background?
Download pattern.svg and reference it with background-image in CSS, or paste the markup inline. The file is a 600 by 400 image, so the browser repeats that whole image; choose a spacing that divides 600 and 400 evenly, such as 20 or 40, for clean seams.
Why do the stripes appear as diagonal lines?
The stripes pattern draws one line from the top-left to the bottom-right corner of each square tile, producing 45-degree diagonals. Spacing sets the tile size and the stroke value sets line thickness. For horizontal and vertical lines, choose the grid pattern.
Can I make the pattern background transparent?
Not from the settings: each tile includes a rectangle filled with the background color you pick. For transparency, remove that rect element or give it a fill-opacity of 0 in the downloaded SVG markup.
¿Dónde se procesa mi entrada?
Esta operación procesa su fuente en tu navegador. Copiar y descargar son acciones explícitas; la entrada de origen no se guarda en una cuenta ni en un historial.
¿Cuáles son los límites de entrada?
Las imágenes usan el límite de lienzo existente de 32 megapíxeles. Se permiten hasta 100 imágenes de origen donde sea admitido. El HTML pegado está limitado a 200,000 caracteres; los diagramas Mermaid a 20,000 caracteres y 300 líneas. La generación de SVG y PNG requiere un navegador.