Gerador de Ondas SVG

Ondas SVG em camadas para layouts modernos

Os divisores em forma de onda são uma maneira popular de suavizar a fronteira entre duas seções de uma página web. Em vez de uma linha horizontal rígida, uma borda curva acrescenta movimento e profundidade a banners de destaque, rodapés, tabelas de preços e landing pages. Este gerador de ondas SVG cria essas formas automaticamente. Ele empilha várias camadas translúcidas ou sólidas, cada uma com a sua própria curva aleatória, e distribui entre elas uma transição de duas cores, para que o resultado lembre colinas ondulantes ou água.

Como o resultado é SVG simples, ele se mantém nítido em qualquer tamanho, pesa apenas algumas centenas de bytes e pode ser estilizado, animado ou incorporado diretamente no HTML. Também é possível copiá-lo como um data URI de CSS para background-image, o que é prático quando não é possível adicionar arquivos extras a um projeto.

O que cada ajuste altera

Camadas define quantas ondas sobrepostas são desenhadas, desde uma única curva limpa até seis faixas empilhadas. Amplitude controla a altura das cristas e dos vales. Complexidade é o número de cristas ao longo da largura: valores baixos geram ondulações longas e preguiçosas, valores altos geram um mar agitado. Suavidade controla como os pontos são unidos: em 0% a onda é angulosa como um zigue-zague, em 100% torna-se uma curva arredondada formada por segmentos Bézier cúbicos. O preenchimento pode ser uma mistura de duas cores sólidas, uma por camada, ou um gradiente horizontal com opacidade crescente em direção à frente.

Usar e exportar a sua onda

Cada onda é gerada a partir de uma seed numérica, por isso um design é totalmente reproduzível: anote a seed e os valores das barras deslizantes e poderá recriá-lo mais tarde. Use Flip vertically (inverter verticalmente) para ondas que pendem do topo de uma seção e ative o fundo transparente quando o SVG tiver de ficar sobre outra cor. Faça o download do SVG para a web ou exporte um PNG de 1440 por 480 pixels para apresentações e ferramentas de design. Ao colocar o SVG numa página, estique-o até a largura total e defina o fundo da seção com a mesma cor de fundo da onda para evitar emendas finas. Tudo é calculado localmente no navegador, sem upload e sem necessidade de conta.