Respingo
Grátis, sem cadastro, roda no seu navegador.
Catorze pontos e aleatoriedade no máximo, que é o mais irregular que o gerador chega. Deliberadamente na borda da faixa utilizável: além disso a forma deixa de se ler como um único objeto.
As configurações por trás dela
| Gerador | Blob |
|---|---|
| Pontos | 14 |
| Aleatoriedade | 100% |
| Suavidade | 120% |
| Semente | 31337 |
O que vale saber
- Aleatoriedade máxima, limitada para que a curva ainda não consiga se dobrar sobre si mesma.
- Melhor usada grande e atrás de algo, onde a irregularidade vira textura.
- A forma mais pesada do catálogo com 641 bytes.
O que custa em bytes
Esta forma exata tem 641 bytes como SVG e 802 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 | 641 B |
| Fundo CSS | 802 B |
| clip-path CSS | 859 B |
| border-radius CSS | 102 B |
O começo do SVG de Respingo
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 28.35C110.32 32.66,110.26 51.14,120.6 57.22C130.94 63.3,140.83 53.62,151.72 58.75C162.61 63.88,172.54 71.69,175.04 82.87C177.55 94.05,173.43 106.6,164.24 114.66C155.05 122.73,137.85 117.64,129.09 123.2C120.33 128.76,126.28 132.16,120.46 142.48C…Em mais detalhe
O teto de irregularidade existe porque uma spline não fica dentro dos seus pontos de controle — ela se arqueia para fora entre eles, e com aleatoriedade suficiente um lóbulo pode alcançar longe o bastante para cruzar um trecho vizinho e transformar o blob numa gravata-borboleta. O limite vem de uma varredura de todas as contagens de pontos, sementes e suavidades que a ferramenta permite, e não de um número que parecia razoável.
Perguntas
Como eu altero Respingo depois de obtê-la?
Abra o gerador, clique em Respingo 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 31337 com 14 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.