Softonic

Gerador de Padrão de Listras SVG

Etapa 1 / 4
Próximo

Padrões de listras planas são uma das maneiras mais confiáveis de preencher uma seção hero, divisor ou cartão vazio sem depender de uma foto de banco de imagens. Este gerador produz um SVG limpo baseado em <pattern> com duas cores, uma largura de listra configurável e um ângulo de rotação, de modo que o mesmo arquivo escala nitidamente de um hero móvel de 320px a um banner de desktop 4K.

Como gerar um padrão de listras SVG

  1. 1

    Defina o tamanho da tela

    Insira a largura e altura que você precisa, o SVG usa um viewBox, então ainda escalará na página.

  2. 2

    Escolha a largura da listra

    Valores menores dão uma listra fina; valores maiores dão faixas estilo toldo.

  3. 3

    Escolha o ângulo

    Use 0 para horizontal, 90 para vertical ou 45 para diagonais clássicas.

  4. 4

    Escolha duas cores

    Defina os valores hexadecimais do primeiro plano e do fundo, listras transparentes também são aceitáveis.

  5. 5

    Copie o SVG

    Cole-o inline, salve-o como um .svg ou insira-o em um fundo CSS via o conversor de SVG para CSS.

Como o padrão é construído

O SVG define um pequeno <pattern> do tamanho de duas listras, então preenche um <rect> que cobre todo o viewBox com fill="url(#stripes)". Como os padrões se repetem automaticamente, mudar o tamanho da tela não altera a espessura da listra, apenas quantas listras cabem.

patternTransform="rotate(angle)" é o que lhe dá diagonais sem precisar recalcular a geometria. O padrão ainda se encaixa perfeitamente em qualquer ângulo.

Tabela de larguras de listras

Largura da listra Aparência Uso comum
2 - 6 px Listras finas Fundos de formulários, textura sutil
10 - 20 px Diagonal equilibrada Seções hero, cartões, divisores
30 - 60 px Toldos ousados Banners de páginas de destino, arte de estado vazio
80 px+ Blocos em escala de pôster Cabeçalhos que precisam ser lidos de longe

Dicas

  • Mantenha o contraste baixo (por exemplo #f5f5f5 sobre #ffffff) quando o padrão estiver atrás do texto.
  • Ângulos de 15, 30 e 45 graus parecem mais “projetados” do que um estrito 0 ou 90.
  • Para animar as listras, envolva o <rect> em um <g> e traduza-o em loop; como o padrão se repete, você obtém rolagem infinita de graça.
  • A saída é puro SVG sem referências externas, então é seguro usar inline em HTML ou modelos de email que removem tags <script>.

Perguntas frequentes

Sim. Salve a saída como um arquivo .svg e referencie-o com background-image: url(...) e background-repeat: repeat, ou insira-o no conversor de SVG para CSS para obter uma URL de dados inline.

As diagonais são anti-aliasing pelo navegador. Se você ver franja, aumente a largura da listra em 1 - 2 pixels ou rasterize para um PNG maior e reduza.

Os seletores de cor produzem cores sólidas, então, para deixar uma listra transparente, edite o SVG de saída: defina um fill como none ou como um hex de 8 dígitos com alfa, como #00000000. O que estiver atrás do SVG passa a aparecer.

A saída é sua, é apenas marcação gerada com base nas suas entradas, sem formas registradas ou ativos de terceiros.

Suas duas cores e a largura e a altura são enviadas ao nosso servidor apenas para gerar a prévia do SVG; nada é armazenado ou registrado, e nenhum arquivo é enviado.

Ferramentas relacionadas

Gerador de papel quadriculado

Crie papel quadriculado para imprimir online: escolha grade ou pontos, ajuste o espaçamento em mm, selecione A4 ou Carta e uma cor de linha personalizada, e imprima ou baixe um SVG nítido.

Gerador de papel pautado

Crie papel pautado para imprimir de graça. Escolha pauta média, larga ou estreita, defina o espaçamento das linhas em mm, o tamanho da página e uma linha de margem, e imprima ou baixe o SVG.

Criador de gráficos de ponto cruz

Transforme JPEG, PNG ou WebP em gráfico de ponto cruz imprimível com 10–150 pontos, 2–40 cores próprias, símbolos, contagens exatas e medidas do tecido.

Conversor de Pantone para HEX

Converta cores Pantone PMS para os valores mais próximos de HEX, RGB e CMYK para correspondência em tela e impressão, com pré-visualização de amostras.

Divisor de Grade do Instagram

Divida uma imagem ampla em uma grade 3×3 do Instagram, ou qualquer número de linhas. As peças são numeradas para facilitar o upload em ordem inversa.

Gerador de letras de grafite

Crie letras de grafite com efeitos tag, bubble, block, estêncil, neon e wild. Ajuste as cores e exporte PNG ou SVG diretamente no navegador.

Ferramenta disponível em outros idiomas