Blob suave
Grátis, sem cadastro, roda no seu navegador.
Seis pontos com pouca aleatoriedade: reconhecivelmente um blob, mas próximo o bastante de um círculo para ficar atrás do conteúdo sem competir com ele. A escolha segura para uma forma de fundo decorativa.
As configurações por trás dela
| Gerador | Blob |
|---|---|
| Pontos | 6 |
| Aleatoriedade | 28% |
| Suavidade | 100% |
| Semente | 2048 |
O que vale saber
- A pouca aleatoriedade mantém todos os lóbulos de tamanho parecido, então ele se lê como calmo.
- Seis pontos é o ponto ideal — menos parece um polígono arredondado, mais se aproxima de um círculo.
- Com 330 bytes é pequeno o bastante para ir inline atrás de um cartão sem pensar duas vezes.
O que custa em bytes
Esta forma exata tem 330 bytes como SVG e 491 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 | 330 B |
| Fundo CSS | 491 B |
| clip-path CSS | 548 B |
| border-radius CSS | 110 B |
O começo do SVG de Blob suave
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 33.65C118.88 33.14,151.1 49.98,159.29 65.77C167.49 81.56,159.05 113.2,149.17 128.39C139.29 143.58,116.48 156.87,100 156.92C83.52 156.98,59.27 143.39,50.27 128.71C41.27 114.03,37.71 84.67,46 68.82C54.29 52.98,81.12 34.16,100 33.65Z" fill="#4f46e…Em mais detalhe
Blobs são curvas fechadas, o que faz da junção entre o último ponto e o primeiro uma junção como qualquer outra — mas só se a busca por vizinhos der a volta. Reaproveitar código de curva aberta trava ali, e o resultado é um único entalhe achatado numa forma que de resto é redonda. É o defeito mais comum em geradores desse tipo, é invisível até alguém ampliar o blob, e o conjunto de testes verifica essa costura explicitamente em cada forma que gera.
Perguntas
Como eu altero Blob suave depois de obtê-la?
Abra o gerador, clique em Blob suave 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 2048 com 6 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.