Gerador de Ondas SVG

Crie Ondas SVG Suaves para Separar Seções

Ondas são uma das maneiras mais limpas de separar duas seções de uma página: adicionam movimento, personalidade e profundidade sem precisar de uma imagem. Este Gerador de Ondas SVG cria um simples elemento <path> dentro de um <svg>, dimensionado para se esticar por qualquer contêiner com width: 100%.

Controles

• Segmentos — quantas corcovas a onda tem. Um segmento gera uma curva única e suave; dez segmentos geram um padrão muito agitado.
• Amplitude — a oscilação vertical de cada corcova. Baixa amplitude dá uma ondulação sutil; alta amplitude gera uma onda dramática.
• Semente — inteiro determinístico que controla a variação aleatória entre as corcovas. Clique em rerrolar para testar novas formas.
• Inverter — alterna entre divisor inferior (onda em cima, preenchimento embaixo) e divisor superior (onda embaixo, preenchimento em cima).
• Preenchimento — cor sólida ou gradiente linear de duas paradas em qualquer ângulo.

Usando a Saída

Como o SVG usa preserveAspectRatio="none", você pode esticá-lo a qualquer largura envolvendo-o em um contêiner com width em CSS: a onda se adapta à página mantendo sua altura. Cole o SVG gerado diretamente no HTML, componente React ou sistema de templates.

<div style="width:100%"><!-- svg gerado --></div>

Usos Comuns

• Divisores entre a seção hero e o próximo bloco
• Rodapés descontraídos
• Curvas de fundo animadas (o path pode ser animado via CSS ou SMIL)
• Formas decorativas atrás de cartões de preços, depoimentos ou seções de recursos
• Indicadores de carregamento e transições de seção

O path é determinístico: a mesma semente sempre produz a mesma onda, então, quando você encontra uma forma que gosta, ela fica estável. Salve o SVG em arquivo se precisar editá-lo em um editor vetorial ou ajustar as cores manualmente.