Gerador de padrão SVG de listras

Crie um padrão de listras vetorial personalizado: cores, espessura e ângulo ajustáveis. Baixe o arquivo SVG ou copie o código direto para incorporá-lo ao seu site. Geração 100% local, nada é enviado a um servidor.

Como funciona

Um padrão de listras no plano de fundo de um banner, de uma seção ou de uma ilustração precisa continuar nítido em todos os tamanhos de tela. Ao gerá-lo em SVG em vez de PNG, o padrão permanece vetorial: pode ser ampliado ou repetido sem nunca ficar borrado nem pixelado. Ajuste as duas cores, a espessura das listras e o ângulo, e pegue o arquivo pronto para usar.

Como usar esse padrão como fundo CSS?

Baixe o arquivo SVG e referencie-o como fundo com background-image: url('motif-rayures.svg'), ou copie o código SVG e codifique-o como data URI se preferir evitar uma requisição HTTP adicional.

O padrão se repete automaticamente em uma superfície grande?

Sim: as listras são geradas por um elemento <pattern> nativo do SVG, que se repete em blocos por toda a área definida, qualquer que seja o tamanho do retângulo escolhido. Você pode, portanto, gerar um padrão pequeno e usá-lo com background-repeat em CSS, se precisar.

Privacidade: o SVG é construído inteiramente no seu navegador, nenhum dado nem ajuste é enviado a um servidor.