Gerador de padrões SVG
Gera pontos, listras e padrões geométricos repetíveis.
Como usar Gerador de padrões 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.
- Digite os valores solicitados no painel de configurações.
- Ajuste a configuração básica e abra o modo avançado para opções de exportação e ajuste fino. A configuração personalizada continua ativa ao fechar o painel.
- Execute o gerador de padrões SVG, revise a saída e use os controles disponíveis para copiar ou baixar.
O que esta ferramenta suporta
Gera pontos, listras e padrões geométricos repetíveis.
- Padrão
- dots · stripes · grid
- Primeiro plano
- Set this value for your task.
- Fundo
- Set this value for your task.
- Espaçamento (px)
- Range: 4 to 200
- Raio do ponto / traço (px)
- Range: 1 to 50
Limites e processamento
As imagens usam o limite existente de 32 megapixels. São permitidas até 100 imagens de origem onde houver suporte. O HTML colado é limitado a 200,000 caracteres; diagramas Mermaid a 20,000 caracteres e 300 linhas. A geração de SVG e PNG exige um navegador.
Perguntas frequentes
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.
Onde minha entrada é processada?
Esta operação processa sua fonte no seu navegador. Copiar e baixar são ações explícitas; a entrada de origem não é salva em conta nem em histórico.
Quais são os limites de entrada?
As imagens usam o limite existente de 32 megapixels. São permitidas até 100 imagens de origem onde houver suporte. O HTML colado é limitado a 200,000 caracteres; diagramas Mermaid a 20,000 caracteres e 300 linhas. A geração de SVG e PNG exige um navegador.