Gerador SVG Padrão Zigzag

Padrões zigue-zague e chevron em SVG

O zigue-zague é um dos motivos decorativos mais antigos que existem. Aparece em cerâmica neolítica, vasos gregos antigos, símbolos Adinkra africanos, têxteis astecas e cestaria indígena norte-americana — bem antes de alguém chamar essa coisa de "chevron". O desenho é uma única polyline cujos segmentos alternam direção e, embora a forma seja trivial, o impacto visual vem da capacidade de transmitir movimento, ritmo e estrutura ao mesmo tempo.

A construção SVG também é uma das mais limpas. Uma única <polyline> dentro de um <pattern> dá conta do tile inteiro, e o navegador repete horizontalmente:

<pattern id="zigzag" width="40" height="20" patternUnits="userSpaceOnUse">
  <polyline points="0,20 10,0 20,20 30,0 40,20"
            fill="none" stroke="#333" stroke-width="2"/>
</pattern>

As três variáveis são amplitude (vão vertical), período (vão horizontal de um ciclo completo) e espessura do traço. Ajustar apenas amplitude e período muda completamente a sensação — um zigue-zague agudo de 60° passa energia elétrica, enquanto um longo e raso lê como onda suave.

Variantes: agudo, suave, espesso, grego

• Zigue-zague agudo — segmentos retos com ângulos de 60° ou 90°; sensação enérgica e eletrônica.
• Onda — troque a polyline por um path Bezier <path d="M0 20 Q 10 0 20 20 T 40 20">; mais suave e calma.
• Chevron — zigue-zague mais espesso, geralmente preenchido em vez de só contornado; o look clássico de revival dos anos 70.
• Greek meander (chave grega) — zigue-zague com retornos em ângulo reto; motivo arquitetônico da Grécia antiga.

Onde o zigue-zague aparece

A grife italiana Missoni (fundada em 1953) construiu um império inteiro em cima de tricô zigue-zague multicolor. Vans, a camiseta do Charlie Brown e a casa do filme Up da Pixar dependem do chevron para reconhecimento instantâneo. Na tipografia, divisores em chevron entre seções voltaram com tudo na onda de wave dividers nos anos 2020. Na Op art, Bridget Riley usou arranjos quase-zigue-zague para brincar com a ilusão de Hering — linhas perfeitamente paralelas que parecem arqueadas por causa do contexto em zigue-zague ao redor.

Zigue-zague só em CSS

Dá pra fazer uma borda zigue-zague em CSS puro encadeando clip-path: polygon(...) ou empilhando linear-gradient() de fundo. Funciona para decoração simples e em linha única — por exemplo, o efeito de papel rasgado no rodapé de um hero. Mas para um padrão tileável e re-colorível como background inteiro, <polyline> em SVG é mais curto e renderiza igualzinho em todos os navegadores. Ângulos agudos pedem um cuidado de anti-aliasing: use stroke-linejoin="miter" para picos afiados ou "round" para suavizados.

Perguntas frequentes

Zigue-zague ou onda? Zigue-zague é angular e lê como enérgico; onda (Bezier senoidal) é curva e lê como calma. Mesmo tile, sensação completamente diferente.

Cores saturadas funcionam? Sim, mas mantenha a opacidade baixa (10-25%) se o zigue-zague cobre uma área grande — zigues totalmente saturados brigam com o texto. Em hero banners, opacidade total funciona normalmente.

Chevron e zigue-zague são a mesma coisa? Praticamente. Chevron costuma sugerir faixas mais grossas e preenchidas (tipo tecido), e zigue-zague sugere linhas mais finas contornadas, mas os termos são usados como sinônimos em briefings.

Dá pra fazer só com CSS? Para uma borda decorativa única, sim — clip-path resolve. Para um background tileável, <pattern> SVG é mais limpo.