Bézier Curve
A smooth mathematical curve defined by control points. The foundational technology behind fonts, vector graphics, and animation easing functions.
A Bézier curve is a smooth parametric curve whose shape is determined by the positions of control points. Devised in 1962 by French engineer Pierre Bézier for car body design at Renault, it now underpins fonts (TrueType, OpenType), vector graphics (SVG, Illustrator), CSS animations, and game engines.
Classification by degree:
- Linear (1st degree): A straight line between two points. No control points
- Quadratic (2nd degree): Defined by start, one control point, and end (3 points). Used in TrueType fonts and SVG's
Qcommand - Cubic (3rd degree): Defined by start, two control points, and end (4 points). The most versatile form, used in PostScript, OpenType, and SVG's
Ccommand
The cubic Bézier formula:
B(t) = (1-t)³P₀ + 3(1-t)²tP₁ + 3(1-t)t²P₂ + t³P₃ (0 ≤ t ≤ 1)
Where P₀ is the start, P₁ and P₂ are control points, and P₃ is the end. Varying parameter t from 0 to 1 traces the curve.
In CSS animations, cubic-bezier() defines easing curves. For example, cubic-bezier(0.25, 0.1, 0.25, 1.0) equals the ease keyword - slow start, acceleration, then deceleration. Chrome DevTools provides a visual easing editor for interactive adjustment.
In vector drawing tools, the Pen tool manipulates Bézier curves: click to place anchor points, drag to adjust handle direction and length, controlling curvature. Mastering this interaction is essential for precise vector illustration and path creation.