Onda orgânica
Grátis, sem cadastro, roda no seu navegador.
Sete pontos com a aleatoriedade quase no máximo, então a curva vagueia em vez de se repetir. Ela se lê como desenhada e não como calculada, que é exatamente o que uma senoide regular não consegue fazer.
As configurações por trás dela
| Gerador | Onda |
|---|---|
| Pontos | 7 |
| Amplitude | 70% |
| Aleatoriedade | 85% |
| Linha de base | 50% |
| Camadas | 1 |
| Suavidade | 100% |
| Semente | 9142 |
O que vale saber
- Muita aleatoriedade significa que a semente importa — mude-a e você obtém uma curva genuinamente diferente, não uma deslocada.
- Continua perfeitamente suave: a aleatoriedade move os pontos, não afeta como a curva passa por eles.
- Sorteie até algo ficar bom e então anote a semente 9142 para guardá-la.
O que custa em bytes
Esta forma exata tem 478 bytes como SVG e 639 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 | 478 B |
| Fundo CSS | 639 B |
| clip-path CSS | 670 B |
O começo do SVG de Onda orgânica
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-205.71 191.31C-171.43 178.3,-68.57 110.51,0 113.21C68.57 115.91,137.14 202.67,205.71 207.53C274.29 212.39,342.86 145,411.43 142.35C480 139.71,548.57 197.9,617.14 191.66C685.71 185.41,754.29 115.82,822.86 104.89C891.43 9…Em mais detalhe
O controle de aleatoriedade mistura entre uma senoide e ruído com semente em vez de alternar entre eles, e isso importa mais do que parece. Senoide pura parece uma demonstração de CSS e ruído puro parece um erro; tudo que alguém realmente publica fica em algum ponto intermediário, e um único controle ao longo dessa linha é mais útil que dois modos que produzem cada um uma resposta errada.
Perguntas
Como eu altero Onda orgânica depois de obtê-la?
Abra o gerador, clique em Onda orgânica 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 9142 com 7 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.