Onda suave
Grátis, sem cadastro, roda no seu navegador.
A predefinição padrão por um motivo: quatro pontos, amplitude moderada e quase nenhuma aleatoriedade fazem uma curva que se lê como deliberada e não como decorativa. Esta é a forma que a maioria das pessoas tem em mente quando diz que quer uma onda sob a seção principal.
As configurações por trás dela
| Gerador | Onda |
|---|---|
| Pontos | 4 |
| Amplitude | 38% |
| Aleatoriedade | 12% |
| Linha de base | 55% |
| Camadas | 1 |
| Suavidade | 100% |
| Semente | 1204 |
O que vale saber
- A pouca aleatoriedade a mantém simétrica, então ela não disputa atenção com o que está acima.
- Quatro pontos é o mínimo que ainda dá uma subida e uma descida — menos vira um único arco, mais vira uma ondulação.
- Com 322 bytes é pequena o suficiente para ir inline em vez de ser buscada como arquivo.
O que custa em bytes
Esta forma exata tem 322 bytes como SVG e 483 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 | 322 B |
| Fundo CSS | 483 B |
| clip-path CSS | 514 B |
O começo do SVG de Onda suave
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 137.58C-300 144.27,-120 166.02,0 177.73C120 189.44,240 207.5,360 207.83C480 208.15,600 190.33,720 179.69C840 169.05,960 144.62,1080 143.98C1200 143.34,1380 170.55,1440 175.86L1440 320L-360 320Z" fill="#4f46e5"/></sv…Em mais detalhe
Se você for mudar uma coisa, mude a linha de base e não a amplitude. Aqui a amplitude é uma fração do espaço entre a linha de base e a borda mais próxima, então aumentá-la numa onda centralizada a deixa mais funda, enquanto mover a linha de base muda quanta cor sólida fica abaixo da curva — que costuma ser o que as pessoas realmente querem quando um divisor parece fino demais.
Perguntas
Como eu altero Onda suave depois de obtê-la?
Abra o gerador, clique em Onda suave 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 1204 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.