Blob orgânico
Grátis, sem cadastro, roda no seu navegador.
Oito pontos com aleatoriedade alta o bastante para que os lóbulos difiram visivelmente em tamanho. Esta é a forma que as pessoas geralmente querem dizer com "blob": irregular o suficiente para parecer deliberada, regular o suficiente para ainda se ler como um único objeto.
As configurações por trás dela
| Gerador | Blob |
|---|---|
| Pontos | 8 |
| Aleatoriedade | 72% |
| Suavidade | 100% |
| Semente | 1618 |
O que vale saber
- A aleatoriedade alta dá a cada lóbulo seu próprio caráter, então a forma tem frente e fundo.
- Funciona bem como clip-path sobre uma fotografia, onde a irregularidade se lê como recorte intencional.
- Reproduzível a partir da semente 1618.
O que custa em bytes
Esta forma exata tem 402 bytes como SVG e 563 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 | 402 B |
| Fundo CSS | 563 B |
| clip-path CSS | 620 B |
| border-radius CSS | 110 B |
O começo do SVG de Blob orgânico
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 54.85C116.91 53.97,145.16 39.06,153.41 46.59C161.66 54.11,150.46 83.17,149.49 100C148.51 116.83,155.8 138.58,147.55 147.55C139.3 156.52,117.11 152.56,100 153.82C82.89 155.08,56.37 164.08,44.89 155.11C33.41 146.14,29.94 117.2,31.11 100C32.28 82.…Em mais detalhe
Existe um limite para o quanto um blob pode ficar irregular, e ele não é arbitrário. Os pontos ficam em ângulos igualmente espaçados com raios variáveis, então o polígono que passa por eles nunca pode se cruzar — mas a curva que passa por eles pode, se um lóbulo se arquear o bastante para alcançar um trecho vizinho. A irregularidade máxima aqui é definida contra uma varredura de todas as contagens de pontos e sementes, então nenhuma configuração produz uma forma que se dobre sobre si mesma.
Perguntas
Como eu altero Blob orgânico depois de obtê-la?
Abra o gerador, clique em Blob orgânico 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 1618 com 8 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.