Gerador de ondas SVG
Gere ondas SVG suaves, com picos ou em degraus, com camadas, amplitude e seeds. Baixe o .svg ou copie como data URI de fundo CSS para divisores de seção.
Configurações da onda
As mesmas configurações e a mesma semente sempre geram a mesma forma.
Pré-visualização
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z"/></svg>
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%230099ff' fill-opacity='1' d='M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z'/%3E%3C/svg%3E");Ferramentas Relacionadas
Ver TodasO que é Gerador de ondas SVG?
Cria formas de onda em SVG para divisores de seção e fundos. Escolha curvas suaves, picos agudos ou degraus, empilhe até cinco camadas, inverta a onda para o topo e exporte como arquivo .svg ou como data URI background-image CSS pronta para colar.
Como usar Gerador de ondas SVG
- Escolha uma cor e o estilo da onda (Suave, Picos, Degraus) e a posição (Base ou Topo).
- Ajuste a complexidade, a amplitude, as camadas, a opacidade, a largura e a altura.
- Clique em Aleatório ou digite uma seed para obter uma onda diferente, mas reproduzível.
- Baixe o .svg ou copie o código SVG.
- Ou copie o fundo CSS (data URI) para usar a onda sem um arquivo separado.
Exemplo
Complexity 2, amplitude 0, 1440×320, color #0099ff
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,160C120,160 480,160 720,160C960,160 1320,160 1440,160L1440,320L0,320Z"/></svg>
Amplitude 0 gera uma linha reta, o que mostra a construção Bézier exata.
Quando usar Gerador de ondas SVG
Use-o para divisores de seção ondulados, rodapés e fundos de destaque. O preserveAspectRatio="none" faz a onda se esticar para qualquer largura, o que serve para divisores de largura total; para ilustrações que precisam manter as proporções, edite o SVG em um editor vetorial.
Como funciona Gerador de ondas SVG
A largura é dividida em segmentos iguais; a altura de cada ponto é a linha de base mais um deslocamento pseudoaleatório com seed (mulberry32) escalado pela amplitude. Ondas suaves passam uma spline Catmull-Rom pelos pontos, convertida em comandos Bézier cúbicos C; picos usam linhas retas e degraus usam linhas horizontais/verticais. O caminho é fechado até a borda inferior (ou superior). Várias camadas usam linhas de base e seeds diferentes, com opacidade crescente em direção à frente. A data URI mantém o SVG legível e aplica codificação percentual só aos caracteres inseguros.
Casos de Uso Comuns
- Divisores ondulados entre seções de landing pages
- Fundos de rodapé em camadas
- Parte inferior de seções de destaque
- Imagens de fundo via data URIs CSS
- Formas decorativas reproduzíveis em design systems
Perguntas Frequentes
Vou obter a mesma onda de novo?
Sim. As mesmas configurações e a mesma seed sempre geram a mesma marcação SVG.
SVG inline ou data URI?
O SVG inline pode ser estilizado e animado com CSS; uma data URI em background-image mantém o HTML limpo, mas não pode ser reestilizada depois de codificada.
Como coloco uma onda no topo de uma seção?
Defina a posição como Topo; o caminho é fechado até a borda superior, então preenche para cima.