Borda pixelada
Grátis, sem cadastro, roda no seu navegador.
Doze pontos de baixa amplitude com alta aleatoriedade, em degraus. O resultado se lê como um limite deliberadamente pixelado — útil para qualquer coisa de registro retrô ou técnico onde uma curva suave pareceria macia demais.
As configurações por trás dela
| Gerador | Onda |
|---|---|
| Pontos | 12 |
| Amplitude | 34% |
| Aleatoriedade | 66% |
| Linha de base | 55% |
| Camadas | 1 |
| Suavidade | 100% |
| Semente | 6502 |
O que vale saber
- Muitos degraus estreitos em alturas variadas, que é o que dá a impressão de bitmap.
- A forma em degraus mais pesada daqui, porque cada ponto adiciona três segmentos de linha em vez de um.
- Reproduzível a partir da semente 6502 — vale guardar, já que com alta aleatoriedade cada semente fica diferente.
O que custa em bytes
Esta forma exata tem 579 bytes como SVG e 740 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 | 579 B |
| Fundo CSS | 740 B |
| clip-path CSS | 771 B |
O começo do SVG de Borda pixelada
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-120 176.21L-60 176.21L-60 152.82L0 152.82L60 152.82L60 175.77L120 175.77L180 175.77L180 178.33L240 178.33L300 178.33L300 193.7L360 193.7L420 193.7L420 188.55L480 188.55L540 188.55L540 200.14L600 200.14L660 200.14L660 15…Em mais detalhe
Se isto ficar carregado demais, a solução é menos pontos e não menos amplitude. Cair para seis mantém o caráter de blocos e reduz o arquivo à metade, enquanto achatar a amplitude só produz uma linha reta ruidosa.
Perguntas
Como eu altero Borda pixelada depois de obtê-la?
Abra o gerador, clique em Borda pixelada 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 6502 com 12 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.