Seixo
Grátis, sem cadastro, roda no seu navegador.
Cinco pontos com aleatoriedade moderada, o que tende a produzir algo mais perto de uma pedra de rio que de um respingo. O blob mais útil para qualquer coisa que precise se ler como um objeto sólido e não como uma mancha decorativa.
As configurações por trás dela
| Gerador | Blob |
|---|---|
| Pontos | 5 |
| Aleatoriedade | 45% |
| Suavidade | 105% |
| Semente | 404 |
O que vale saber
- Cinco pontos dão uma silhueta de número ímpar, o que evita a simetria acidental de seis.
- Aleatoriedade moderada: irregular, mas todos os lóbulos ainda têm mais ou menos o mesmo tamanho.
- A forma daqui mais próxima do que um border-radius CSS consegue imitar, se você preferir não publicar um SVG.
O que custa em bytes
Esta forma exata tem 294 bytes como SVG e 455 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 | 294 B |
| Fundo CSS | 455 B |
| clip-path CSS | 512 B |
| border-radius CSS | 104 B |
O começo do SVG de Seixo
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 41.28C122.08 40.79,161.83 60.16,167.4 78.1C172.96 96.04,149.18 132.27,131.81 143.78C114.43 155.29,83.98 154.88,68.12 143.87C52.27 132.87,35.62 98.85,41.2 80.89C46.78 62.94,77.92 41.76,100 41.28Z" fill="#4f46e5"/></svg>Em mais detalhe
Um seixo é o blob que mais vale comparar entre formatos de exportação. Como SVG ele é exato; como border-radius é uma aproximação com quatro cantos, que não consegue reproduzir cinco lóbulos e não deveria fingir que consegue. A saída de border-radius é oferecida como sua própria forma e não como a mesma forma em outro formato, porque apresentá-la de outro jeito seria uma mentira que você só descobre depois de publicar.
Perguntas
Como eu altero Seixo depois de obtê-la?
Abra o gerador, clique em Seixo 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 404 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.