Gerador de Ondas SVG
Gere divisores de onda SVG para transições entre seções do seu site.
① Personalize altura, amplitude e cor ② Pré-visualize ao vivo ③ Copie SVG ou snippet HTML
Altura (px) 120
Amplitude (px) 40
Ondas 2
Cor da onda
#C9B89A
Fundo
#0E0E0E
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" width="100%" preserveAspectRatio="none">
<path d="M 0 60 Q 180 20 360 60 Q 540 100 720 60 Q 900 20 1080 60 Q 1260 100 1440 60 L 1440 120 L 0 120 Z" fill="#c9b89a"/>
</svg>
O que são divisores de onda SVG e como usá-los?
Divisores de onda SVG são gráficos vetoriais escaláveis para transições suaves entre seções. Ao contrário de PNG/JPG, as ondas SVG são independentes de resolução e escalam perfeitamente em qualquer tela. A forma da onda é definida por um elemento <path> dentro de um <svg> usando curvas de Bézier quadráticas (comando Q). O atributo preserveAspectRatio="none" garante que a onda sempre ocupe a largura total.
Perguntas frequentes
Um divisor de onda SVG é um gráfico vetorial escalável usado como separador visual entre seções. É uma forma preenchida com borda superior curva que escala perfeitamente.
Copie o snippet HTML e cole no final de uma seção. Use width="100%" e preserveAspectRatio="none" para adaptar a qualquer largura.
A amplitude controla a altura dos picos. Valores típicos: 20px (sutil) a 80px (dramático).
A frequência controla quantas ondas completas aparecem. 1 = curva S suave, 2–3 = padrão típico, 4+ = muitas ondas pequenas.
Curvas suaves (bezier quadrático) são a escolha mais comum. Angulares criam efeito geométrico cristalino.
O toggle inverte a onda verticalmente. Normal = área preenchida abaixo. Invertido = área preenchida acima.
Sim. Aplique animação CSS com translateX() em um viewBox mais largo. Duplique a largura para 2880 e repita o path.