Built and fact-checked by the DocNectar team — see our editorial standards
Key Features
Instant Calculation
Get accurate results in real time with our optimized algorithm.
Mobile Friendly
Fully responsive design. Works on all devices & screen sizes.
Privacy Focused
Your data stays on your device. We don't store any inputs.
100% Free
No hidden costs. This tool is completely free forever.
Star shapes are a common design element for badges, ratings, and decorative accents. This tool generates a ready-to-use SVG star from a few simple parameters — no design software required.
How it works
Set the number of points, the outer radius (how far the points reach) and inner radius (how deep the notches between points go), and a fill color. The tool computes evenly-spaced vertices alternating between the two radii and connects them into a single SVG `<polygon>`.
- Enter number of points.
- Enter outer radius (px).
- Enter inner radius (px).
- Enter fill color.
- Click Calculate to see your results.
Examples
A classic 5-pointed star
A 5-point star with an inner radius around 38-40% of the outer radius produces the familiar, balanced star proportions seen in flags and rating icons; a larger inner radius makes a flatter, more subtle star shape.
Who should use it
- Rating icons, badges, and decorative accents.
- Quick placeholder or prototype graphics.
Industry applications
- Web design and front-end development
- UI/UX prototyping
Advantages
- Instant, copy-paste-ready SVG markup — no design software needed.
- Fully deterministic and easy to regenerate with tweaked parameters.
Limitations
- Produces a single flat-color star — gradients or multi-color effects need manual editing afterward.
Common mistakes to avoid
- Setting the inner radius larger than the outer radius, which produces an inverted, unusual-looking shape rather than a typical star.
- Forgetting to set matching `width`/`height` on the surrounding container, causing unexpected scaling.
Best practices
- Try a few different inner/outer radius ratios to find the star proportions that look right for your use case.
- Use the SVG's built-in `viewBox` to let it scale responsively in your page layout.
Tips
- For a classic 5-point star look, try an inner radius around 38-40% of the outer radius as a starting point.