Tiny Online Tools
Custom Star Shapes as Pure SVG
A star is a surprisingly versatile shape — it shows up as a loyalty badge, a review rating, a notification accent, a sticker burst, and a UI highlight. This generator gives you full control over every aspect and outputs a single clean <polygon> inside an SVG.
Controls
- Points — number of star tips from 3 to 20.
- Inner radius ratio — how pointy or chunky each arm is. Low values give needle-sharp stars; high values produce softer, rounder bursts.
- Rotation — spin the whole star to any angle.
- Fill — solid color or two-stop linear gradient with configurable angle.
- Stroke — optional colored outline with adjustable width; round or mitered corners.
Rendering Details
The algorithm places 2 × points vertices at alternating outer and inner radii around the center. The result is a perfectly proportional star for any number of points. Because it's a standard polygon, you can style it with CSS, animate it with keyframes, or flow it into React / Vue / Solid components without any runtime.
Uses
- Rating and review widgets
- Sticker bursts for "NEW!" and "SALE" labels
- Loyalty and gamification badges
- Holiday decorations (winter / Christmas themes)
- Favicon and icon design
- Sparkle accents for illustrations
Pair with the Neon Shape Generator for a glowing star, or the Grainy Gradient generator for a textured backdrop — the resulting SVG always stays tiny, scalable, and perfect for any screen or print resolution.