Bolha
Grátis, sem cadastro, roda no seu navegador.
Doze pontos com a aleatoriedade baixa, o que produz algo quase circular mas visivelmente feito à mão. Bom quando um círculo perfeito ficaria estéril mas um blob ficaria brincalhão demais.
As configurações por trás dela
| Gerador | Blob |
|---|---|
| Pontos | 12 |
| Aleatoriedade | 20% |
| Suavidade | 100% |
| Semente | 7211 |
O que vale saber
- Muitos pontos com pouca aleatoriedade convergem para um círculo com uma ondulação lenta.
- O blob mais caro daqui com 559 bytes, porque cada ponto adiciona um segmento cúbico.
- Se você quer esse visual barato, use seis pontos e baixe a aleatoriedade.
O que custa em bytes
Esta forma exata tem 559 bytes como SVG e 720 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 | 559 B |
| Fundo CSS | 720 B |
| clip-path CSS | 777 B |
| border-radius CSS | 106 B |
O começo do SVG de Bolha
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 36.37C110.36 36.38,121.78 40.94,131.07 46.18C140.36 51.42,150.78 58.85,155.74 67.82C160.71 76.79,160.7 89.18,160.87 100C161.04 110.82,161.46 123.37,156.74 132.76C152.02 142.15,141.99 151.34,132.53 156.35C123.08 161.35,110.54 163.31,100 162.79C8…Em mais detalhe
Esta predefinição é a ilustração mais clara de uma troca que esta ferramenta tenta tornar visível: doze pontos custam cerca do dobro de bytes de seis, e com aleatoriedade baixa a diferença entre eles é uma ondulação que quase ninguém registrará conscientemente. O contador de bytes fica embaixo da caixa de saída precisamente para que essa escolha seja feita de propósito e não por omissão.
Perguntas
Como eu altero Bolha depois de obtê-la?
Abra o gerador, clique em Bolha 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 7211 com 12 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.