Gerador de ondas SVG | Crie divisores de onda em camadas com código pronto para colar

Gere ondas SVG que separam as seções de uma página web com uma curva fluida em vez de uma linha reta. Ajuste a altura da onda, a frequência, o número de camadas e um gradiente de duas cores com os controles e, em seguida, copie o código SVG ou baixe-o como arquivo.

💡 Sobre esta ferramenta

Você provavelmente já viu sites em que uma onda suave aparece abaixo da área de destaque ou acima do rodapé. Empilhar seções retangulares passa uma sensação rígida e quadrada, e um único divisor de onda suaviza todo o layout. O detalhe é que escrever essa curva à mão significa digitar uma longa lista de coordenadas path do SVG, algo nada prático.

Este gerador monta ondas em camadas, até cinco sobrepostas, apenas com os controles. Cada camada recebe uma altura e uma opacidade ligeiramente diferentes, então as ondas parecem ficar umas à frente das outras e dão profundidade. O gradiente da cor 1 para a cor 2 é distribuído automaticamente entre as camadas, então você não precisa escolher cores intermediárias. A saída é tanto um SVG em linha que você cola direto no seu HTML quanto um arquivo .svg para baixar e tratar como imagem.

Quando quiser a onda na borda superior de uma seção, ative a inversão e a curva apontará para o outro lado. Combina com páginas de destino, portfólios, cabeçalhos de blog e qualquer lugar em que um divisor ganhe com um pouco de movimento.

🧐 Perguntas frequentes

Como insiro o SVG no meu site? Copie o código gerado e cole-o entre as duas seções que deseja separar. Acrescente width: 100% e display: block para que a onda se estenda de borda a borda sem espaço horizontal.

Ele se mantém bem em diferentes tamanhos de tela? O SVG de saída traz preserveAspectRatio="none", que instrui o navegador a esticar a forma para preencher a caixa em vez de travar a proporção. Com largura de 100%, ele se adapta a celulares e desktops automaticamente. Para ajustar apenas a altura vertical, sobrescreva-a com uma media query de CSS.

O que o controle de camadas altera? Define quantas ondas sobrepostas você obtém. Em 1, há uma única onda de cor sólida; no máximo de 5, há cinco ondas com opacidade e altura variadas formando um fundo mais profundo.

O que acontece ao aumentar a frequência? Aumenta o número de ciclos de onda ao longo da largura. Um valor baixo gera ondulações amplas e suaves; um valor alto gera ondulações mais apertadas e frequentes.

Por que exportar SVG em vez de PNG? O SVG é um formato vetorial, então permanece nítido ao ser ampliado ou exibido em uma tela 4K. Uma única onda é leve, normalmente de 1 a 2 KB, então quase não afeta o carregamento da página.

📚 Como o viewBox mantém as ondas responsivas

A primeira coisa no código exportado é viewBox="0 0 largura altura". Isso define o sistema de coordenadas interno do SVG, independente do tamanho com que ele aparece na tela. Essa separação é justamente o que torna o comportamento responsivo possível: quando o CSS fixa a largura em 100%, o viewBox governa as proporções internas do traçado enquanto preserveAspectRatio decide como ele se estica para caber.

A onda em si é uma curva senoidal aproximada por uma longa sequência de pequenos segmentos retos dentro de um path. A largura é dividida em muitos passos pequenos, um ponto é colocado em cada passo e os pontos são unidos por linhas. Com um passo fino o suficiente, o olho a percebe como uma curva lisa. Mais pontos geram uma curva mais suave, mas um código mais longo, então usa-se um tamanho de passo que equilibra a aparência e o peso do arquivo.