Ondas em camadas
Grátis, sem cadastro, roda no seu navegador.
Três curvas desenhadas a partir da mesma semente em fases diferentes, cada uma um pouco mais abaixo e com um pouco menos de opacidade. Compartilhar a semente é o ponto — camadas de sementes não relacionadas parecem três ondas que se sobrepõem por acaso, enquanto deslocamentos de fase de uma mesma onda parecem profundidade.
As configurações por trás dela
| Gerador | Onda |
|---|---|
| Pontos | 5 |
| Amplitude | 62% |
| Aleatoriedade | 22% |
| Linha de base | 42% |
| Camadas | 3 |
| Suavidade | 100% |
| Semente | 3311 |
O que vale saber
- A opacidade aumenta em direção à frente, então a pilha se lê como distância e não como três folhas chapadas.
- Cada camada é um caminho separado, então você pode recolori-las individualmente depois de colar.
- Três caminhos custam 898 bytes juntos — ainda menos que um PNG pequeno da mesma coisa.
O que custa em bytes
Esta forma exata tem 898 bytes como SVG e 1.071 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 | 898 B |
| Fundo CSS | 1.071 B |
| clip-path CSS | 544 B |
O começo do SVG de Ondas em camadas
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-288 95.89C-240 100.43,-96 109.48,0 123.14C96 136.8,192 170.05,288 177.86C384 185.66,480 180.48,576 169.98C672 159.48,768 126.46,864 114.84C960 103.23,1056 95.46,1152 100.31C1248 105.15,1392 136.65,1440 143.92L1440 320L-…Em mais detalhe
Camadas são o jeito mais barato de fazer um divisor chapado parecer projetado, e o mais exagerado com frequência. Duas costumam bastar; com cinco, as camadas de trás estão tão lavadas que adicionam bytes sem adicionar profundidade. Se quiser mais separação, aumente a distância entre as linhas de base em vez de acrescentar outra camada.
Perguntas
Como eu altero Ondas em camadas depois de obtê-la?
Abra o gerador, clique em Ondas em camadas 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 3311 com 5 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.