Cristal
Grátis, sem cadastro, roda no seu navegador.
Cinco pontos com alta aleatoriedade, unidos por linhas retas. A forte variação de raio dá bordas longas e curtas na mesma forma, que é o que faz isto se ler como um estilhaço e não como um pentágono regular.
As configurações por trás dela
| Gerador | Blob |
|---|---|
| Pontos | 5 |
| Aleatoriedade | 85% |
| Suavidade | 100% |
| Semente | 1357 |
O que vale saber
- A alta aleatoriedade é o que impede isto de parecer um pentágono comum.
- Cinco lados se leem como deliberados; seis começa a se ler como um hexágono malfeito.
- Reproduzível a partir da semente 1357.
O que custa em bytes
Esta forma exata tem 156 bytes como SVG e 317 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 | 156 B |
| Fundo CSS | 317 B |
| clip-path CSS | 374 B |
| border-radius CSS | 108 B |
O começo do SVG de Cristal
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 20.18L157.74 81.24L142.5 158.5L72.34 138.08L23.94 75.29Z" fill="#4f46e5"/></svg>Em mais detalhe
Mesmo na aleatoriedade máxima um polígono daqui não consegue se cruzar. Os pontos ficam em ângulos igualmente espaçados com raios positivos, então a forma permanece estrelada em relação ao centro faça o que fizer a semente — uma garantia que os estilos curvos precisam de um limite explícito para manter, e que o polígono ganha de graça.
Perguntas
Como eu altero Cristal depois de obtê-la?
Abra o gerador, clique em Cristal 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 1357 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.