Onda de rodapé
Grátis, sem cadastro, roda no seu navegador.
A mesma geometria de um divisor de hero, espelhada na vertical para que o preenchimento fique acima da curva em vez de abaixo. Essa única diferença é o que separa uma forma que fica sobre um rodapé de uma que fica sob um cabeçalho.
As configurações por trás dela
| Gerador | Onda |
|---|---|
| Pontos | 4 |
| Amplitude | 55% |
| Aleatoriedade | 20% |
| Linha de base | 48% |
| Camadas | 2 |
| Suavidade | 100% |
| Semente | 640 |
O que vale saber
- Espelhada na vertical, então a área sólida fecha contra o topo da tela.
- Duas camadas dão alguma profundidade sem o peso de três.
- Coloque-a logo acima do seu rodapé com a mesma cor de fundo do próprio rodapé.
O que custa em bytes
Esta forma exata tem 551 bytes como SVG e 718 bytes como fundo CSS — o data URI é maior porque a codificação em porcentagem custa três caracteres para cada um que escapa. As duas cifras são da forma mostrada acima, com duas casas decimais de precisão nas coordenadas.
| Formato | Tamanho |
|---|---|
| SVG | 551 B |
| Fundo CSS | 718 B |
| clip-path CSS | 510 B |
O começo do SVG de Onda de rodapé
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 207.13C-300 198.98,-120 174.18,0 158.27C120 142.36,240 112.09,360 111.66C480 111.23,600 137.74,720 155.71C840 173.68,960 218.07,1080 219.5C1200 220.93,1380 173.48,1440 164.28L1440 0L-360 0Z" fill="#a5b4fc" opacity="…Em mais detalhe
O espelhamento vertical aqui não é uma transformação CSS, é parte do caminho: a curva é espelhada e a cauda fecha contra a borda oposta. Isso significa que o SVG exportado se sustenta sozinho e não precisa de um contêiner com um `transform` — o que importa sobretudo na exportação como fundo CSS, onde de saída não existe elemento algum para transformar.
Perguntas
Como eu altero Onda de rodapé depois de obtê-la?
Abra o gerador, clique em Onda de rodapé na fileira de predefinições e arraste o que quiser. A predefinição é um ponto de partida, não uma trava — todos os controles continuam ativos, e a caixa de semente aceita uma palavra se você preferir nomear sua forma em vez de numerá-la.
Vai ficar igual da próxima vez?
Sim, desde que a semente seja a mesma. Esta é a semente 640 com 4 pontos. O gerador é determinístico, então essas configurações reproduzem esta curva exata em qualquer dispositivo.
Posso usar outra cor?
Pode — a cor é aplicada na exportação, não está embutida na geometria. A pré-visualização acima usa a cor padrão da ferramenta; escolha a sua no gerador e o SVG, o fundo CSS e o clip-path acompanham.
Cada número e cada forma desta página foram produzidos rodando o gerador no momento do build, então descrevem a ferramenta que você está prestes a usar e não uma versão dela que já existiu.