Gerador de SVG Wave Divider

SVG wave dividers: o separador de seções das landing pages modernas

Linhas horizontais duras entre seções soam datadas. Desde aproximadamente 2018, o design web migrou para section dividers — curvas suaves, linhas inclinadas, picos e zigzags que costuram uma cor de fundo na seguinte. A forma mais popular é a onda, e SVG é o meio certo: um único path inline pesa menos de 1 KB, escala em qualquer largura sem perda e herda o currentColor da página para acompanhar o dark mode automaticamente.

Anatomia de um divider

Um divider limpo fica no pé da seção (ou, invertido, como chapéu da seguinte). Três botões definem o visual:

• viewBox — um aspecto largo como 0 0 1440 100 dá um ciclo suave único num hero desktop.
• preserveAspectRatio="none" — deixa o SVG esticar até a largura do container sem artefatos de distorção que importem em formas decorativas.
• transform="scaleY(-1)" — o truque padrão para virar um divider de pé em divider de chapéu sem redesenhar o path.

<svg viewBox="0 0 1440 100" preserveAspectRatio="none" aria-hidden="true">
  <path d="M0,40 C360,90 1080,-10 1440,40 L1440,100 L0,100 Z" fill="#3b82f6"/>
</svg>

Variantes que você vai usar de verdade

• Onda suave — o default "SaaS amigável"; uma Bézier cúbica por ciclo.
• Onda inclinada — uma diagonal descendente com curva; visual mais limpo e editorial.
• Picos / montanha — triângulos afiados para marcas outdoor ou tech agressivas.
• Zigzag / chevron — divertido, casa bem com blocos de cor chapada.
• Em camadas (2-3 paths) — empilhe 2-3 versões da mesma onda com opacidade reduzida para simular profundidade sem gradiente raster.

Ferramentas e ecossistema

No mesmo nicho você encontra o shapedivider.app (o mais popular), o getwaves.io (Z Creative Labs) e o haikei.app — todos geram SVG inline que você cola direto no template. O gerador desta página foca especificamente no caso de section divider — exportando um path dimensionado para 100vw com o retângulo inferior correto para que a cor preencha até a borda da próxima seção.

Performance e acessibilidade

Um divider inline comprime para menos de 500 bytes gzipados, batendo qualquer PNG/JPG equivalente. Marque com aria-hidden="true" e role="presentation" para que leitores de tela o ignorem — geometria decorativa não tem valor semântico. Em folhas de impressão, esconda os dividers (@media print { .divider { display: none; } }) — eles gastam tinta e poluem o papel. Para um efeito sutil de parallax, anime transform: translateY() no scroll; evite animar o atributo d, que força recomputação do path a cada frame.

Perguntas frequentes

Qual altura faz sentido? Entre 80 e 150 px no desktop. Acima de 200 px come muito espaço de conteúdo; abaixo de 60 px quase não aparece.

A cor pode seguir meu tema dark? Sim — defina o fill do path como var(--section-bg-next) e o divider acompanha a variável CSS que controla o fundo da próxima seção.

Quantos paths em camadas é demais? Três é o ponto ideal. Quatro ou mais costuma embaralhar a silhueta sem agregar profundidade visível.

Qual a diferença para um gerador de wave-shape genérico? O gerador genérico devolve uma onda isolada que você posiciona onde quiser. Este gerador de divider devolve um path dimensionado e fechado para atuar como fronteira entre duas cores de fundo — incluindo o retângulo inferior que preenche até a próxima seção.