Bezier Curves & Splines
A collection of applets that model Bezier Curves (of orders 1-5), Bezier Splines, and applications of both in computer graphics and animation.
Application: Animation Timing for CSS3 Transitions with Cubic Bezier Curves
A restricted Cubic Bezier curve/function can be used to define animation timing with CSS3 transitions (and in other animation situations). This figure provides an interactive model of the curve and a preview of the animation, relative to a linear animation timing, in addition to sample CSS code.
Cubic Bezier Spline Construction
Several Bezier Curves joined together form a Bezier Spline. This interactive figure depicts the construction of a Bezier Spline from three Cubic Bezier Curves.
Application: Drawing Shapes with a Freeform Bezier Spline
Bezier Splines can approximate many shapes, so they are extremely versatile in computer graphics even when constructed from lower-order curves. This model includes a freeform Bezier Spline and a couple of sample curves it can approximate.
5 Orders of Bezier Curves
An interactive model of the 5th Order Bezier Curve, also displaying curves of orders 1-4 that were used to construct it.