SVG Estrela N Pontas

Estrela de N pontas em SVG: matemática, cultura e boas práticas

Uma estrela de N pontas é construída a partir de 2 * N vértices alternando entre um raio externo e um raio interno. Os pontos externos ficam em ângulos de 360 / N graus, e os pontos internos ficam exatamente entre eles. A razão entre raio interno e raio externo é a decisão estética mais importante — valores entre 0,4 e 0,6 produzem o visual clássico de "estrela cadente"; valores menores dão um sparkle mais fino e afiado.

Gerador em JavaScript

const path = [];
const cx = 50, cy = 50;
for (let i = 0; i < 2 * n; i++) {
  const r = i % 2 === 0 ? outerR : innerR;
  const angle = (i * Math.PI) / n - Math.PI / 2;
  path.push(cx + r * Math.cos(angle),
            cy + r * Math.sin(angle));
}
// depois monte <polygon points="x1,y1 x2,y2 ..." />

Começar o ângulo em -Math.PI / 2 coloca a primeira ponta apontando para cima, que é a convenção visual de estrelas em bandeiras, badges e widgets de avaliação.

Significado cultural por número de pontas

• 5 pontas (pentagrama) — topo da árvore de Natal, bandeiras dos EUA/UE, avaliações de filme, símbolo de proteção Wicca.
• 6 pontas (hexagrama) — Estrela de Davi no Judaísmo, chacra de Krishna no Hinduísmo, estilização de floco de neve.
• 7 pontas — Cruz de Wessex na Inglaterra, Commonwealth Star da Austrália, místico "número da sorte".
• 8 pontas — rosa-dos-ventos, Rub el Hizb em marcadores de seção do Alcorão.
• 12 pontas — zodíaco e coroa mariana.
• 16, 24, 32 pontas — estouros decorativos, adesivos "starburst" de promoção.

SVG vs clip-path CSS vs Unicode

SVG vence quase sempre: nítido em vetor em qualquer resolução, suporta estilo por ponto e stroke, razão paramétrica. CSS clip-path polygon consegue recortar uma imagem em estrela de 5 pontas, mas redimensionar distorce as pontas porque as porcentagens são fixas. Caracteres Unicode (★ ☆) são glifos de texto e deixam de ser legíveis acima do tamanho máximo de fonte — bom para barras de avaliação, inútil para ilustração de hero.

Preenchida vs contornada e estrelas sparkle

Uma estrela preenchida parece sólida e confiável — por isso widgets de rating usam preenchidas por padrão. Uma estrela contornada (use fill="none" + stroke) parece reluzente, mágica, padrão em ilustrações de conto de fadas. A estrela de 4 pontas fina com razão de raio interno em torno de 0,15 é o canônico "sparkle" popularizado pelo Spotlight do iOS da Apple e pelo botão de IA do Notion.

Animação e tamanho mínimo

Girar uma estrela com @keyframes spin é a animação mais comum — mantenha o centro em transform-origin: center. Para visibilidade, nunca renderize uma estrela abaixo de 16 px em contextos raster; abaixo disso, as pontas borram e viram um círculo. O SVG continua nítido, mas a percepção de "estrela" desaparece.

Perguntas frequentes

5 ou 6 pontas? 5 é o padrão ocidental para bandeiras, ratings e Natal. 6 carrega forte simbolismo judaico (Estrela de Davi) e hindu (chacra de Krishna) — escolha intencionalmente.

Como faço um sparkle? Use 4 pontas com razão de raio interno bem pequena (em torno de 0,15). Isso produz o sparkle fino em forma de cruz que Apple, Notion e Linear usam para acentos de IA.

Qual o tamanho mínimo legível? 16 px na tela. Abaixo disso as reentrâncias internas somem e a estrela vira um blob. Para favicons, prefira uma estrela de 4 ou 5 pontas com alto contraste.

N pode ser 3? Tecnicamente sim, mas uma "estrela" de 3 pontas com razões normais lembra um triângulo da Mercedes-Benz, não uma estrela. A convenção é N >= 4 para o cérebro reconhecer como estrela.