Estrela
Grátis, sem cadastro, roda no seu navegador.
Doze pontos alternando entre um raio externo e um interno, com a suavidade baixa para as pontas continuarem afiadas. Geometria de estrela clássica, gerada em vez de desenhada, então o número de pontas e a irregularidade delas são suas para definir.
As configurações por trás dela
| Gerador | Blob |
|---|---|
| Pontos | 6 |
| Aleatoriedade | 12% |
| Suavidade | 35% |
| Semente | 700 |
O que vale saber
- Seis lóbulos significam doze pontos: um para fora, um para dentro, ao redor todo.
- Pouca suavidade mantém as pontas afiadas; aumente-a e a estrela vira uma flor.
- Reproduzível a partir da semente 700.
O que custa em bytes
Esta forma exata tem 551 bytes como SVG e 712 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 | 551 B |
| Fundo CSS | 712 B |
| clip-path CSS | 769 B |
| border-radius CSS | 110 B |
O começo do SVG de Estrela
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 40.29C101.9 40.39,112.74 70.84,115.86 72.52C118.98 74.2,152.54 67.52,153.49 69.12C154.43 70.72,132.19 96.43,132.12 100C132.06 103.57,153.39 128.71,152.42 130.26C151.44 131.81,118.42 124.64,115.36 126.6C112.3 128.57,101.81 163.92,100 163.96C98.1…Em mais detalhe
A estrela e a flor abaixo são os mesmos doze pontos unidos de duas maneiras diferentes, e é por isso que a suavidade é o controle que as separa em vez de um botão de modo. Também significa que você pode parar em qualquer ponto intermediário — uma estrela com pontas levemente suavizadas é uma forma que nenhuma das duas predefinições dá sozinha.
Perguntas
Como eu altero Estrela depois de obtê-la?
Abra o gerador, clique em Estrela 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 700 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.