Flor
Grátis, sem cadastro, roda no seu navegador.
Os mesmos raios alternados de uma estrela, mas com a suavidade no máximo, de modo que cada ponta vira uma pétala arredondada. O resultado é botânico mais que geométrico, e funciona bem grande e pálido atrás do conteúdo.
As configurações por trás dela
| Gerador | Blob |
|---|---|
| Pontos | 6 |
| Aleatoriedade | 10% |
| Suavidade | 150% |
| Semente | 701 |
O que vale saber
- A suavidade máxima transforma cada espinho numa pétala.
- Seis pétalas é o mais parecido com uma flor; quatro se lê como um trevo, dez como uma margarida.
- Com 557 bytes é a forma mais detalhada daqui, porque doze pontos carregam cada um um segmento cúbico.
O que custa em bytes
Esta forma exata tem 557 bytes como SVG e 718 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 | 557 B |
| Fundo CSS | 718 B |
| clip-path CSS | 775 B |
| border-radius CSS | 104 B |
O começo do SVG de Flor
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 37.57C108.24 37.5,102.78 63.66,116.56 71.31C130.34 78.96,151.28 61,155.12 68.18C158.96 75.35,131.93 84.08,131.94 100C131.95 115.92,159.03 124.73,155.15 131.84C151.28 138.96,130.22 121.26,116.43 128.46C102.64 135.66,108.05 160.93,100 160.64C91.9…Em mais detalhe
Esta é a forma mais cara do catálogo, e o contador de bytes deixa isso visível antes de você publicá-la. Se quiser o visual por menos, caia para quatro pétalas: corta o custo pela metade e, nos tamanhos em que uma forma de fundo costuma ser usada, a diferença é difícil de ver.
Perguntas
Como eu altero Flor depois de obtê-la?
Abra o gerador, clique em Flor 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 701 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.