Animated Bézier Curves

Play with the control points to modify the curves!

These animations illustrate how a parametric Bézier curve is constructed. The parameter t ranges from 0 to 1. In the simplest case, a first-order Bézier curve, the curve is a straight line between the control points.

For a second-order or quadratic Bézier curve, first we find two intermediate points that are t along the lines between the three control points. Then we perform the same interpolation step again and find another point that is t along the line between those two intermediate points. Plotting this last point yields a quadratic Bézier curve. The same steps can be repeated for higher orders.

Written using the D3 visualisation library. Suggested by Mike Bostock and inspired by a similar animation on Wikipedia.

Requires a SVG-capable browser e.g. Mozilla Firefox, WebKit (Google Chrome, Safari &c.) or Internet Explorer 9+.