Gerador de Blob e Ondas SVG

Continuar na ferramenta

Mais páginas desta ferramenta

onda svg para site

Onda SVG para site, pronta para topo ou rodapé de seção

Uma onda SVG entre duas seções quebra a monotonia de blocos retangulares empilhados, um recurso comum em landing pages modernas. Esta página já abre o gerador em modo ondas, com o preset "onda simples" carregado.

Como uma camada de onda vira um SVG preenchível

Cada camada de onda é uma curva suave (a mesma família Catmull-Rom do blob, mas em caminho aberto, sem fechar em loop) que termina encostando reto na borda oposta do retângulo, formando uma área fechada e preenchível, não é uma linha solta. Amplitude, frequência (quantos períodos cabem na largura), fase (deslocamento horizontal em graus) e opacidade são independentes por camada, então dá para empilhar 2 a 4 camadas com cores translúcidas e criar profundidade, como nos divisores de seção do Haikei e do get-waves.io.
Uma amplitude igual a zero não vira uma curva quase reta por arredondamento de ponto flutuante, ela é tratada como caso especial e transformada numa linha reta exata (sem nenhum comando de curva no `d`), útil para desligar uma camada temporariamente sem removê-la da composição.

Usos comuns de uma onda de seção

Transição entre hero e a seção seguinte

Entrada: preset: onda simples, posição: rodapé
Saída esperada: onda de 1440×180

Uma única camada com amplitude moderada já resolve a maioria dos casos, sem exagerar no movimento visual.

Camadas duplas com profundidade

Entrada: preset: onda dupla
Saída esperada: 2 camadas com fases diferentes

A camada de trás mais clara e translúcida, a da frente mais opaca, cria a ilusão de duas ondas do mar se sobrepondo.

FAQ da ferramenta completa

Por que usar uma seed em vez de só "gerar aleatório"?

Porque um blob aleatório sem seed é impossível de recuperar: se você gostou da forma e recarregou a página, ela some. Com seed, a mesma string sempre reconstrói exatamente o mesmo blob, então você pode anotar a seed, colar num link ou versionar no código, e o resultado visual nunca muda.

O blob fecha certinho ou fica com um bico no ponto de fechamento?

Qual a diferença entre irregularidade e suavidade?

Os SVGs exportados funcionam em qualquer navegador e ferramenta de design?

Por que o SVG exportado tem poucas casas decimais em vez das 15 que outros geradores produzem?

Como funciona a animação de morph entre duas formas?

Posso usar o SVG como background-image de uma seção CSS?

Qual a diferença entre a onda tipo "sine" e a onda tipo "picos"?

Perguntas frequentes

A onda serve tanto para o topo quanto para o rodapé de uma seção?

Sim, a opção de posição decide de que lado a área preenchida encosta: em "topo" a curva forma a borda de cima e o preenchimento desce, em "rodapé" é o inverso, a mesma configuração de camadas funciona nos dois casos.

A onda estica sem distorcer se a seção do site for mais larga que 1440px?

O SVG exportado usa `preserveAspectRatio="none"`, ou seja, ele é pensado para esticar horizontalmente até a largura real do contêiner via CSS (`width: 100%`), mantendo a altura fixa definida no gerador, exatamente como os divisores de seção prontos para uso em produção.

Próximos passos

Como uma camada de onda vira um SVG preenchível

Cada camada de onda é uma curva suave (a mesma família Catmull-Rom do blob, mas em caminho aberto, sem fechar em loop) que termina encostando reto na borda oposta do retângulo, formando uma área fechada e preenchível, não é uma linha solta. Amplitude, frequência (quantos períodos cabem na largura), fase (deslocamento horizontal em graus) e opacidade são independentes por camada, então dá para empilhar 2 a 4 camadas com cores translúcidas e criar profundidade, como nos divisores de seção do Haikei e do get-waves.io.

Uma amplitude igual a zero não vira uma curva quase reta por arredondamento de ponto flutuante, ela é tratada como caso especial e transformada numa linha reta exata (sem nenhum comando de curva no `d`), útil para desligar uma camada temporariamente sem removê-la da composição.

Usos comuns de uma onda de seção

Transição entre hero e a seção seguinte

Entrada: preset: onda simples, posição: rodapé
Saída esperada: onda de 1440×180

Uma única camada com amplitude moderada já resolve a maioria dos casos, sem exagerar no movimento visual.

Camadas duplas com profundidade

Entrada: preset: onda dupla
Saída esperada: 2 camadas com fases diferentes

A camada de trás mais clara e translúcida, a da frente mais opaca, cria a ilusão de duas ondas do mar se sobrepondo.

FAQ da ferramenta completa

Por que usar uma seed em vez de só "gerar aleatório"?

O blob fecha certinho ou fica com um bico no ponto de fechamento?

Qual a diferença entre irregularidade e suavidade?

Os SVGs exportados funcionam em qualquer navegador e ferramenta de design?

Por que o SVG exportado tem poucas casas decimais em vez das 15 que outros geradores produzem?

Como funciona a animação de morph entre duas formas?

Posso usar o SVG como background-image de uma seção CSS?

Qual a diferença entre a onda tipo "sine" e a onda tipo "picos"?

Perguntas frequentes