Gerador SVG Padrão Listras Diagonais

Padrões de listras diagonais em SVG

Listras diagonais carregam uma das linguagens visuais mais densas do design. A mesma geometria — linhas paralelas desenhadas em um ângulo, repetidas com período fixo — comunica coisas completamente diferentes dependendo das cores e do ângulo: aviso de perigo em preto e amarelo, luxo em listras pastel de doce, movimento em listras finas de esporte. A matemática é trivial: um conjunto de linhas paralelas em ângulo θ com período d entre elas. A escolha mais comum é 45° porque alinha bem com a malha de pixels e lê como a "mais diagonal" das diagonais.

O SVG resolve isso em poucas linhas. Defina um <pattern> com um único <rect> ocupando metade do tile e gire tudo com patternTransform="rotate(45)":

<pattern id="stripes" width="20" height="20"
         patternUnits="userSpaceOnUse"
         patternTransform="rotate(45)">
  <rect width="10" height="20" fill="#333"/>
</pattern>

Esse patternTransform com rotação é o jeito mais simples de conseguir qualquer ângulo diagonal — troque 45 por 30, 60, 135 para inclinar de outra forma. A largura da listra é a largura do retângulo; o espaço é a largura do tile menos a largura do retângulo. Adicionar um segundo <rect> em outro offset cria listras alternadas com duas cores (sem espaço).

Variantes e controle do tile

• Pinstripes finas — linha de 1-2 px, espaço de 8-12 px; ar de terno de banqueiro, formal.
• Listras grossas — largura e espaço iguais; cara de bandeira ou camisa de time.
• Hazard — amarelo + preto, 45°, larguras iguais — lê instantaneamente como cuidado.
• Bengala de doce — vermelho + branco alternados, ângulo suave, sinalização de festas.
• Tri-color assimétrico — três rects com larguras diferentes, visual editorial.

Contexto cultural e histórico

A listra diagonal amarela com preta em 45° é reconhecida internacionalmente como sinalização de perigo, convenção que vem da segurança industrial norte-americana e dos padrões da OSHA do início do século 20, hoje codificada em fitas zebradas de obra no mundo todo. No esporte, listras diagonais aparecem em poucos uniformes icônicos de futebol — Inglaterra e País de Gales no rugby usam faixas horizontais, mas Sunderland na Inglaterra, Independiente na Argentina e vários clubes sul-americanos usam faixa diagonal marcante. No futebol brasileiro o uso é raro; o preto e branco do Botafogo é vertical, não diagonal. As listras diagonais mais ubíquas no comércio são provavelmente as três do Adidas (1949), embora sejam horizontais no tênis e diagonais só porque o tênis em si é inclinado.

Equivalente em CSS e armadilhas

Dá pra fazer o mesmo padrão com um único linear-gradient em CSS — background: repeating-linear-gradient(45deg, #333 0 10px, transparent 10px 20px) reproduz o SVG acima. Funciona, mas fica verboso para variantes multi-cor. Cuidado com ilusões ópticas: listras diagonais densas paralelas ao texto disparam a ilusão de Hering (o texto parece curvado). Evite listras como fundo direto de conteúdo de leitura — use overlay translúcido ou restrinja listras a hero sections, divisores e blocos decorativos. Texto sobre fundo listrado também quase sempre quebra contraste WCAG.

Perguntas frequentes

Por que 45° é o melhor ângulo? Alinha com a malha de pixels sem artefatos de anti-aliasing sub-pixel, lê como a "mais diagonal" sem ambiguidade e bate com a convenção histórica de listras hazard usada mundialmente desde os padrões OSHA do início do século 20.

Qual o equivalente em CSS? Um único repeating-linear-gradient(45deg, cor1 0 10px, cor2 10px 20px). Funciona bem para duas cores; com três ou mais, o <pattern> SVG fica mais limpo.

Dá pra alternar cores? Sim — adicione um segundo <rect> com fill diferente no offset correto, ou liste mais paradas de cor no gradient.

Listras são acessíveis atrás de texto? Diretamente não. Coloque o texto dentro de um container sólido por cima do fundo listrado, ou baixe a opacidade das listras para 10-20%. Caso contrário, o contraste falha em WCAG e a ilusão de Hering briga com a tipografia.