SVG Star Generator

N-pointed star in SVG: math, culture and best practices

An N-pointed star is built from 2 * N vertices alternating between an outer radius and an inner radius. The outer points are placed at angles of 360 / N degrees and the inner points sit exactly between them. The ratio between inner and outer radius is the single biggest aesthetic decision — values between 0.4 and 0.6 produce the classic "shooting star" look; lower values give a thinner, sharper sparkle.

JavaScript generator

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));
}
// then build <polygon points="x1,y1 x2,y2 ..." />

Starting the angle at -Math.PI / 2 places the first point pointing straight up, which is the visual convention for stars on flags, badges and rating widgets.

Cultural meaning by number of points

• 5 points (pentagram) — Christmas tree topper, US/EU flags, movie ratings, Wiccan protection symbol.
• 6 points (hexagram) — Star of David in Judaism, Krishna chakra in Hinduism, snowflake stylisation.
• 7 points — England's Cross of Wessex, Australia's Commonwealth Star, "lucky" mysticism.
• 8 points — Compass rose, Rub el Hizb in Islamic Quran section markers.
• 12 points — Zodiac and Marian crown.
• 16, 24, 32 points — Decorative bursts, "starburst" sale stickers.

SVG vs CSS clip-path vs Unicode

SVG wins almost every time: vector-crisp at any resolution, supports per-point styling and stroke, ratio is parametric. CSS clip-path polygon can clip an image to a 5-point star, but resizing distorts the points because the percentages are fixed. Unicode characters (★ ☆) are text glyphs and stop being legible above the font's maximum point size — fine for rating bars, useless for hero illustration.

Filled vs outlined and sparkle stars

A filled star feels solid and trustworthy — that is why rating widgets default to filled. An outlined star (use fill="none" + stroke) feels glittery, magical and is the standard choice for fairy-tale illustrations. The 4-pointed thin star with an inner-radius ratio around 0.15 is the canonical "sparkle" effect popularised by the Apple iOS Spotlight and Notion AI button.

Animation and minimum size

Rotating a star with @keyframes spin is the most common animation — keep the centre at transform-origin: center. For visibility, never render a star below 16 px in raster contexts; below that, the points blur into a circle. SVG itself remains crisp but the perception of "starness" disappears.

FAQ

Should I pick 5 or 6 points? 5 is the western default for flags, ratings and Christmas. 6 carries strong Jewish (Star of David) and Hindu (Krishna chakra) symbolism — choose intentionally.

How do I make a sparkle? Use 4 points with a very small inner-radius ratio (around 0.15). This produces the thin cross-like sparkle used by Apple, Notion and Linear for AI-related accents.

What is the minimum legible size? 16 px on screen. Below that the inner notches disappear and the star reads as a blob. For favicons, prefer a 4 or 5 point star with high contrast.

Can N be 3? Technically yes, but a 3-pointed "star" with normal ratios looks like a Mercedes-Benz triangle, not a star. The convention is N >= 4 for star recognition.