Onda profunda
Grátis, sem cadastro, roda no seu navegador.
Três pontos e quase toda a amplitude, o que dá um vale profundo e muita cor abaixo dele. Use onde o divisor deve ser a transição em si e não um detalhe na borda de uma.
As configurações por trás dela
| Gerador | Onda |
|---|---|
| Pontos | 3 |
| Amplitude | 92% |
| Aleatoriedade | 18% |
| Linha de base | 50% |
| Camadas | 1 |
| Suavidade | 110% |
| Semente | 820 |
O que vale saber
- Três pontos produzem uma única queda clara em vez de um padrão repetido.
- Amplitude alta consome espaço vertical, então dê espaço para a seção de baixo respirar.
- Reproduzível a partir da semente 820 — anote se precisar da mesma curva em outra página.
O que custa em bytes
Esta forma exata tem 282 bytes como SVG e 443 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 | 282 B |
| Fundo CSS | 443 B |
| clip-path CSS | 474 B |
O começo do SVG de Onda profunda
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-480 80.61C-392 97.56,-176 145.02,0 173.07C176 201.12,304 252.99,480 233.6C656 214.21,784 82.6,960 67.28C1136 51.96,1352 134.87,1440 150.04L1440 320L-480 320Z" fill="#4f46e5"/></svg>Em mais detalhe
Uma onda profunda é a forma mais fácil de dar errado, porque em amplitude cheia a curva precisa se arquear bastante e um trecho achatado onde ela encontra a borda salta aos olhos. O gerador amostra um ponto além de cada borda da tela e deixa o viewBox recortar, então o movimento continua fora da tela em vez de terminar no limite — e é isso que faz isto se ler como um trecho de uma onda mais longa e não como um rabisco fechado em si mesmo.
Perguntas
Como eu altero Onda profunda depois de obtê-la?
Abra o gerador, clique em Onda profunda 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 820 com 3 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.