Gerador de ondas SVG
Gere uma curva de onda SVG fluida para separar duas seções de página com um visual mais suave do que uma simples linha reta, com amplitude, frequência e cor totalmente ajustáveis.
Como funciona
A onda é construída a partir de curvas de Bézier cúbicas sucessivas, em que cada "ondulação" alterna entre a parte de cima e a de baixo de uma linha de base, para um traçado fluido, sem quinas. O número de ondulações (frequência) e a altura delas (amplitude) são ajustáveis de forma independente, assim como a cor de preenchimento.
Como usar essa onda como separador entre duas seções?
Copie o código SVG e posicione-o de forma absoluta na parte de baixo (ou de cima, com a opção "inverter") de uma seção colorida, com largura de 100%: a onda cobrirá a transição entre essa seção e a seguinte, cuja cor de fundo deve corresponder à cor de preenchimento do SVG para que a emenda fique invisível.
A largura definida precisa corresponder exatamente à largura da minha página?
Não: graças ao atributo preserveAspectRatio="none" e a uma largura em porcentagem no CSS, o SVG se estica para ocupar toda a largura disponível do contêiner, mesmo que sua largura original não corresponda exatamente à da sua página.
Geração 100% local: a curva é calculada inteiramente no seu navegador, sem nenhum envio de dados a um servidor.