Gema facetada
Grátis, sem cadastro, roda no seu navegador.
Os mesmos pontos que um blob usaria, unidos por linhas retas em vez de uma curva. As facetas planas captam a luz de modo diferente de um blob suave, e é por isso que isto se lê como pedra lapidada e não como uma forma líquida.
As configurações por trás dela
| Gerador | Blob |
|---|---|
| Pontos | 7 |
| Aleatoriedade | 55% |
| Suavidade | 100% |
| Semente | 9090 |
O que vale saber
- Bordas retas, então é drasticamente menor que o blob suave equivalente.
- Aleatoriedade moderada mantém as facetas variadas sem que nenhuma domine.
- Com 182 bytes está entre as menores formas daqui.
O que custa em bytes
Esta forma exata tem 182 bytes como SVG e 343 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 | 182 B |
| Fundo CSS | 343 B |
| clip-path CSS | 400 B |
| border-radius CSS | 110 B |
O começo do SVG de Gema facetada
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 28.66L157.96 53.78L162.15 114.19L122 145.68L75.84 150.18L44.25 112.72L58.68 67.05Z" fill="#4f46e5"/></svg>Em mais detalhe
Polígonos são a coisa mais barata que esta ferramenta faz. Um polígono de sete pontos são sete pares de coordenadas; os mesmos sete pontos como spline fechada são vinte e um. Se você precisa de uma forma de aparência orgânica numa página onde bytes importam, um polígono com alta aleatoriedade leva você quase lá por um terço do custo.
Perguntas
Como eu altero Gema facetada depois de obtê-la?
Abra o gerador, clique em Gema facetada 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 9090 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.