Degraus
Grátis, sem cadastro, roda no seu navegador.
Cada vão corre horizontalmente até o ponto médio, vira na vertical e continua — um perfil de escada. A virada acontece no ponto médio e não no ponto em si, e é isso que mantém os degraus uniformes.
As configurações por trás dela
| Gerador | Onda |
|---|---|
| Pontos | 5 |
| Amplitude | 60% |
| Aleatoriedade | 18% |
| Linha de base | 52% |
| Camadas | 1 |
| Suavidade | 100% |
| Semente | 1111 |
O que vale saber
- Só ângulos retos, então combina bem com um layout baseado em grade.
- Menos pontos dão degraus mais largos e marcantes; mais pontos se aproximam de uma linha serrilhada.
- Com 358 bytes custa mais ou menos o mesmo que uma onda suave pelos mesmos pontos.
O que custa em bytes
Esta forma exata tem 358 bytes como SVG e 519 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 | 358 B |
| Fundo CSS | 519 B |
| clip-path CSS | 550 B |
O começo do SVG de Degraus
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-288 118.84L-144 118.84L-144 177.26L0 177.26L144 177.26L144 214.27L288 214.27L432 214.27L432 202.99L576 202.99L720 202.99L720 140.25L864 140.25L1008 140.25L1008 117.08L1152 117.08L1296 117.08L1296 171.17L1440 171.17L1440…Em mais detalhe
Degrau no ponto médio é o detalhe que faz isto funcionar. Virar no próprio ponto faria cada degrau ter o dobro da largura do vizinho, o que se lê como falha de renderização e não como design — e é a versão que sai da implementação óbvia.
Perguntas
Como eu altero Degraus depois de obtê-la?
Abra o gerador, clique em Degraus 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 1111 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.