draw star — live canvas animation example

motion & easing8+
trig, angles & vectors8+
collision detection11+
numbers in motion7+
geometry & shapes8-
generative showpieces13+
handy helpers7+

Drag the handles to reshape the star

Drag the outer handle to resize & spin the star; drag the inner handle to change the inner radius. A star is just vertices alternating between an outer and an inner radius.

Why know this? Placing points at evenly-spaced angles (cos/sin around a center) is the workhorse behind a huge amount of animation: stars, gears, sparkles, asteroids, explosion bursts, loading spinners, radial menus. Once you can put N points on a circle at the right angle and radius, you can build any of them — and because every vertex is plain math, you can tween the radii, spin the angle, or morph the spike count over time for free.