The Curves Behind Everything
Every font you read, every icon on your phone, and every smooth animation on the web is built from Bezier curves. Independently developed by Paul de Casteljau at Citroen in 1959 and Pierre Bezier at Renault in 1962 for designing car bodies, these mathematical curves became the universal language of computer graphics. A cubic Bezier needs only four points to define an infinitely smooth, resolution-independent curve.
Anatomy of a Cubic Bezier
A cubic Bezier curve has two endpoints (P0 and P3) and two control points (P1 and P2). The curve starts at P0 heading toward P1, then bends toward P2 and arrives at P3. The control points act like magnets — they pull the curve without the curve necessarily passing through them. This simulation visualizes the control point influence and lets you reshape the curve in real time.
Animation Easing
In animation, cubic Beziers define timing functions. The CSS cubic-bezier() function maps time (X axis) to progress (Y axis). The default linear timing feels robotic — objects start and stop instantly. Bezier easing adds acceleration and deceleration that mimics real-world physics. The classic ease-in-out — cubic-bezier(0.42, 0, 0.58, 1) — is the most commonly used easing function in UI design.
De Casteljau's Elegant Algorithm
To find a point on the curve at parameter t, De Casteljau's algorithm recursively interpolates between adjacent control points. With four points, three linear interpolations produce three intermediate points; two more interpolations produce two; one final interpolation gives the point on the curve. This recursive subdivision is both numerically stable and visually instructive — the simulation shows the construction lines collapsing to the curve point.