SVG Onda

Onda SVG simples: senoide de 1 ciclo para divisores e cabeçalhos

Uma onda SVG simples é uma curva senoidal de ciclo único — sem camadas empilhadas, sem animação, sem loop em JavaScript. É o tijolo por trás dos divisores de seção estilo Stripe, do mergulho suave embaixo de um cabeçalho, do placeholder de mock de áudio e do fundo do app de respiração para meditação. Por ser um único <path> com forma fechada, ela cabe em menos de 200 bytes e renderiza nítida em qualquer resolução. O viewBox típico é compacto, tipo 0 0 100 20, depois esticado em largura total com preserveAspectRatio="none".

Como o path é construído

O path mínimo de uma onda de um ciclo usa dois comandos Bézier quadráticos e uma continuação suave:

<svg viewBox="0 0 100 20" preserveAspectRatio="none">
  <path d="M0,10 Q25,0 50,10 T100,10 L100,20 L0,20 Z"
        fill="#3b82f6"/>
</svg>

O comando Q é um Bézier quadrático com um único ponto de controle — perfeito para um meio-ciclo suave. O comando T é uma continuação quadrática suave que reflete o controle anterior automaticamente, produzindo a segunda metade da senoide. Comparado ao cúbico C (dois pontos de controle), Q + T é mais simples, mais curto e bate com uma senoide real dentro de uns 2% de erro.

Matemática: derivando pontos exatos com Math.sin()

Se quiser uma onda matematicamente exata, amostre y = amplitude * Math.sin(2 * Math.PI * x / comprimentoDeOnda) em 20-40 valores de x e encadeie com L (linha) ou C. Para uso decorativo, a aproximação Q+T é indistinguível a olho e 5x menor em markup.

SVG vs canvas vs background CSS

SVG vence para ondas estáticas: nítido em vetor, minúsculo e acessível via DOM. Canvas vence para ondas dinâmicas como visualizadores de áudio ou simulações de oceano em tempo real — você redesenha em todo requestAnimationFrame. Background CSS com um SVG data-URI tileável vence quando a onda precisa repetir indefinidamente sob uma página longa sem inflar o DOM.

Casos de uso e geradores rápidos

• Divisores de seção estilo Stripe entre hero e conteúdo.
• Mocks de waveform de áudio em placeholders de media player.
• Fundo de app de respiração para meditação que escala suavemente com @keyframes.
• UI de streaming de música em placeholders de equalizador.
• getwaves.io da Z Creative Labs e shapedivider.app — sliders de amplitude, frequência e número de camadas para quando você quiser uma onda mais complexa depois.

Animação simples

Para sensação de parallax sem redesenhar o path, anime transform: translateX em loop e duplique a onda horizontalmente. O browser compõe a transformação na GPU, então mesmo num celular de baixo custo a animação mantém 60 fps.

Perguntas frequentes

Como faço a onda ocupar a tela inteira? Use um viewBox compacto como 0 0 100 20 e adicione preserveAspectRatio="none" no <svg>. A onda escala para preencher qualquer largura do container sem quebrar.

Como empilho várias ondas? Combine vários elementos <path> com cores diferentes e pequenos offsets de fase dentro do mesmo SVG. Cada path tem <200 bytes, então mesmo 5 camadas ficam minúsculas.

Posso aplicar gradiente? Sim — defina um <linearGradient> dentro de <defs> e use fill="url(#g)". É o padrão atual em hero backgrounds de 2026.

SVG ou canvas para visualizador de áudio? Canvas. Parse de SVG a cada frame fica caro quando passa de ~30 comandos por segundo; a API immediate-mode do canvas é muito mais barata para esse cenário.