Ondulação
Grátis, sem cadastro, roda no seu navegador.
Onze pontos com amplitude baixa: uma borda fina e regular em vez de uma declaração. Boa quando um divisor precisa existir sem chamar atenção, e a única predefinição que se lê bem como uma faixa estreita.
As configurações por trás dela
| Gerador | Onda |
|---|---|
| Pontos | 11 |
| Amplitude | 30% |
| Aleatoriedade | 8% |
| Linha de base | 55% |
| Camadas | 1 |
| Suavidade | 95% |
| Semente | 77 |
O que vale saber
- A amplitude baixa evita que a seção de baixo perca altura.
- Muitos pontos significam muitos segmentos cúbicos, então esta é a onda mais pesada do catálogo com 655 bytes.
- Quase nenhuma aleatoriedade, então a repetição é regular o bastante para parecer um padrão numa tela larga.
O que custa em bytes
Esta forma exata tem 655 bytes como SVG e 816 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 | 655 B |
| Fundo CSS | 816 B |
| clip-path CSS | 847 B |
O começo do SVG de Ondulação
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-130.91 159.28C-110.18 161.55,-41.45 168.2,0 173.6C41.45 178.99,89.45 188.64,130.91 193.36C172.36 198.08,220.36 201.74,261.82 203.4C303.27 205.07,351.27 204.33,392.73 203.88C434.18 203.43,482.18 203.29,523.64 200.54C565.…Em mais detalhe
Esta é a predefinição em que o contador de bytes justifica seu lugar. Cada ponto extra é outro segmento cúbico completo — três pares de coordenadas — então uma ondulação custa várias vezes o que uma onda suave por uma diferença que a maioria dos visitantes nunca notará conscientemente. Se você gosta do visual mas não do peso, tente seis pontos com a suavidade aumentada.
Perguntas
Como eu altero Ondulação depois de obtê-la?
Abra o gerador, clique em Ondulação 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 77 com 11 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.