Create a Five-Pointed Star with SVG Path Lines
Build a five-pointed star using moveto and lineto commands. Calculate the vertex coordinates using trigonometry for any size and rotation.
Detailed Explanation
Building a Star with Line Commands
A five-pointed star is a classic polygon that connects every other vertex of a regular pentagon. You can draw it entirely with M and L commands.
The Path
M 50,0 L 61,35 L 98,35 L 68,57 L 79,91 L 50,70
L 21,91 L 32,57 L 2,35 L 39,35 Z
How the Coordinates Are Calculated
A regular five-pointed star has 10 vertices alternating between the outer radius and an inner radius. For a star centered at (50, 50) with outer radius 50 and inner radius ~19:
| Vertex | Angle (deg) | x | y |
|---|---|---|---|
| 1 (outer) | 270 | 50 | 0 |
| 2 (inner) | 306 | 61 | 35 |
| 3 (outer) | 342 | 98 | 35 |
| 4 (inner) | 18 | 68 | 57 |
| 5 (outer) | 54 | 79 | 91 |
The formula for each vertex:
x = cx + r * cos(angle)
y = cy + r * sin(angle)
where r alternates between the outer and inner radius.
Customization Tips
- More points: For a six-pointed star, use 12 alternating vertices at 30-degree intervals.
- Rotation: Add an offset angle to rotate the star. For example, start at 250 degrees instead of 270.
- Aspect ratio: Use different outer and inner radii to create thinner or fatter stars.
Closing the Path
The Z command connects the last point back to the first M point, ensuring a clean closed shape for filling.
Use Case
Star shapes are common in rating systems, badges, decorative icons, and gamification elements. Using a path instead of a polygon gives you finer control for animations like morphing between shapes.