Gerador de padrões SVG

O que é Gerador de padrões SVG?

O Gerador de Padrões SVG é uma ferramenta gratuita no navegador para web designers e desenvolvedores front-end que precisam de um fundo leve e repetível sem abrir um editor gráfico. Você escolhe um padrão em um menu suspenso (pontos, grade, listras, diagonal, tabuleiro), define uma cor de primeiro plano para as formas e uma cor de fundo para o ladrilho, e usa os campos numéricos de escala e espessura para controlar o tamanho do ladrilho e a espessura do traço. O resultado é um único ladrilho desenhado como SVG nítido, projetado para se repetir sem emendas, de modo que os arquivos permanecem minúsculos e o padrão escala sem ficar borrado. Use o alternador de Formato para alternar a saída copiável entre a marcação SVG pura e uma regra CSS background-image, depois copie-a ou baixe o arquivo .svg para sites, cartões, seções de destaque e mockups de interface.

Como usar Gerador de padrões SVG

1. Escolha um padrão no menu suspenso: Pontos, Grade, Listras, Diagonal ou Tabuleiro.
2. Digite ou escolha uma cor de primeiro plano para as formas e uma cor de fundo para o ladrilho.
3. Ajuste os campos numéricos de Escala (tamanho do ladrilho em pixels) e Espessura (raio do ponto ou espessura da linha).
4. Abra as Configurações e use o alternador de Formato para alternar a saída entre SVG e CSS.
5. Observe a prévia ao vivo repetir o padrão, depois copie o SVG ou o CSS, ou clique em Baixar para salvar o arquivo .svg.

Exemplos

Perguntas frequentes

Quais padrões posso gerar?

Cinco padrões repetíveis: pontos, grade, listras, linhas diagonais e um tabuleiro de xadrez. Cada um é desenhado como um pequeno ladrilho SVG que se repete sem emendas, então permanece nítido em qualquer tamanho e mantém o arquivo minúsculo.

O que a Escala e a Espessura controlam?

A escala é o tamanho de um ladrilho em pixels, que define a distância entre as formas repetidas. A espessura é o raio do ponto ou a espessura da linha dentro do ladrilho. A espessura é automaticamente limitada em relação à escala para que o padrão nunca preencha demais o ladrilho.

Qual é a diferença entre a saída SVG e a CSS?

O SVG dá a você a marcação pura para um arquivo .svg autônomo ou uso inline. O CSS dá a você uma regra background-image usando um data URI mais background-repeat: repeat, pronta para colar em uma folha de estilo. Use o alternador de Formato nas Configurações para alternar entre as duas.

Posso escolher cores visualmente em vez de digitar o HEX?

Sim. Clique no chip de cor ao lado do campo de primeiro plano ou de fundo para abrir o seletor de cores nativo do seu navegador, ou digite um valor HEX como #4f86f7 diretamente. A prévia e a saída são atualizadas conforme você altera.

Minhas cores ou arquivos são enviados para algum lugar?

Não. O padrão é construído inteiramente no seu navegador como uma string SVG, e o download é criado localmente como um Blob. Nenhuma cor, código ou arquivo é jamais enviado a um servidor, então funciona offline e mantém o seu trabalho privado.