Gerador de Wave Shape SVG

Wave shape SVG: o jeito moderno de separar seções

Wave shape SVGs são curvas sinusoidais ou orgânicas usadas como divisores de seção em landing pages modernas. Elas substituíram as bordas retas e duras do flat design do início dos anos 2010 e viraram regra no design de marketing desde 2018, popularizadas por ferramentas como getwaves.io, shapedivider.app e haikei.app. O padrão é simples: o hero termina com uma borda curva, a próxima seção começa com a mesma curva invertida e a página é lida como uma composição fluida em vez de caixas empilhadas.

A onda canônica usa um viewBox largo de 0 0 1440 320 e um ou dois pontos de controle Bézier cúbicos para desenhar a curva:

<svg viewBox="0 0 1440 320" preserveAspectRatio="none">
  <path d="M0,160 C480,250 960,70 1440,160 L1440,320 L0,320 Z"
        fill="#3b82f6"/>
</svg>

Variantes que você pode gerar

• Onda senoidal suave — uma curva gentil, o divisor de landing page clássico.
• Onda inclinada — alturas de início e fim diferentes, dá um visual mais diagonal.
• Multi-onda — dois ou três ciclos no viewBox para um ritmo mais marcado.
• Ondas em camada — três paths empilhados com opacity 0.4, 0.6 e 1.0 para criar profundidade falsa; cavalo de batalha do hero moderno.
• Onda orgânica (blob) — pontos de controle aleatórios em vez de senoide matemática, usada por Stripe, Linear e muitos SaaS.

A matemática por trás da curva

O comando Bézier cúbico C recebe dois pontos de controle e um ponto final. Para aproximar uma onda senoidal de forma limpa, posicione os pontos de controle simetricamente em torno do meio e puxe-os acima da linha base pela amplitude. Cada ciclo completo de senoide precisa de pelo menos dois segmentos cúbicos — um para o pico, outro para o vale — então uma onda com três picos tem seis pontos de controle no total. Amplitudes grandes geram ondas dramáticas; divisores discretos costumam manter a amplitude abaixo de 15% da altura do viewBox.

Responsivo, animado e leve

SVG inline escala sem perda de qualidade. Use width: 100%; height: auto e preserveAspectRatio="none" quando quiser que a onda se estique para preencher qualquer container, ou xMidYMid slice quando preferir cortar. Para animação, a abordagem moderna é uma regra CSS @keyframes animando transform: translateX em uma onda mais larga que a viewport — isso é acelerado por GPU e evita o elemento <animate> (SMIL), depreciado em alguns navegadores. Comparado a um vídeo de fundo, uma onda SVG inline normalmente fica abaixo de 2 KB e não consome a main thread.

SVG wave vs CSS clip-path

clip-path: polygon() consegue fingir uma onda com vários segmentos pequenos, mas não produz curva suave de verdade até a função CSS shape() ganhar suporte amplo. Path SVG com curvas Bézier continua sendo a opção mais limpa para divisores curvos e ainda dá controle fino sobre cor, gradient, stroke e opacidade por camada.

Perguntas frequentes

Quanto pesa uma wave SVG inline? Quase sempre menos de 2 KB — o path é curto e comprime bem com gzip. Inlinear vence carregar um .svg externo porque evita o round-trip de rede.

Dá para animar a onda? Sim — o padrão mais limpo é CSS transform: translateX em uma onda do dobro da largura da viewport, em loop de 20 segundos. Evite animar o atributo d na main thread.

A onda é responsiva? Sim — o viewBox cuida do scaling automaticamente. Combine com preserveAspectRatio="none" se quiser que a curva se estique de ponta a ponta em qualquer tela.

Como inverto a onda para a próxima seção começar com a mesma curva? Reutilize o path e aplique transform: rotate(180deg) ou espelhe o atributo d no eixo Y. Muitos designers mantêm as duas versões no mesmo componente.