Bézier Curves

Every time you open a design tool and pull a handle to bend a line, you are using a Bézier curve. Every letter in your font, every smooth path in an SVG, every easing function in a CSS animation — all of them are built from the same small idea.

The concept was developed independently in the 1960s by Pierre Bézier at Renault, who used it to design car body panels, and Paul de Casteljau at Citroën. The goal was simple: give a designer a small number of control points and let the math produce a smooth, well-behaved curve that approximates the shape suggested by those points — without the designer having to specify hundreds of coordinates.

The result is one of the most elegant algorithms in computer graphics: a recursive construction that requires nothing more than repeated linear interpolation, yet produces curves of arbitrary smoothness.

Below is a cubic Bézier curve — the kind used in every SVG <path> and CSS cubic-bezier(). It has four control points: two endpoints (the filled circles) and two handles (the hollow circles connected by dashed lines).

Drag any point and watch the curve follow. Toggle Show construction to see de Casteljau's algorithm animate: at each value of the parameter $t \in [0, 1]$ the algorithm interpolates between points three times, narrowing down to the single point on the curve.

<!-- {{c_html_comment}} -->
<div class="toolbar">
  <label class="toggle">
    <input type="checkbox" id="showConstruction">
    <span>{{lbl_show_construction}}</span>
  </label>
  <button id="resetBtn" type="button">{{btn_reset}}</button>
</div>
<canvas id="canvas" width="480" height="340"></canvas>
<p class="hint">{{hint_drag}}</p>

/* {{c_css_comment}} */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f4f7fa; color: #222; display: flex; flex-direction: column; align-items: center; padding: .6rem .4rem; }
.toolbar { display: flex; align-items: center; gap: .8rem; margin-bottom: .5rem; flex-wrap: wrap; justify-content: center; }
.toggle { display: flex; align-items: center; gap: .4rem; font-size: .9rem; cursor: pointer; user-select: none; }
button { font: 600 13px system-ui; padding: .35rem .8rem; border: 1px solid #1d3557; background: #1d3557; color: #fff; border-radius: 7px; cursor: pointer; }
canvas { border-radius: 10px; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.10); touch-action: none; max-width: 100%; }
.hint { font-size: .8rem; color: #555; margin-top: .5rem; text-align: center; }

// Code not found

The key insight: no matter where you drag the handles, the curve always stays smooth, always passes through the two endpoints, and always leaves them in the direction of the handle. That is not a coincidence — it is a theorem baked into the formula.

A Bézier curve of degree $n$ is defined by $n+1$ control points $P_0, P_1, \dots, P_n$. Its position at parameter $t \in [0, 1]$ is:

$$B(t) = \sum_{i=0}^{n} \binom{n}{i} (1-t)^{n-i}\, t^{i}\, P_i$$

The coefficients $\binom{n}{i}(1-t)^{n-i}t^{i}$ are the Bernstein basis polynomials — they are always non-negative and sum to 1, which means $B(t)$ is always a weighted average of the control points. That is why the curve stays inside the convex hull of the points.

De Casteljau's algorithm computes the same thing through repeated linear interpolation. For a cubic curve with points $P_0, P_1, P_2, P_3$:

1. Interpolate each adjacent pair at parameter $t$: $Q_i = (1-t)P_i + t\,P_{i+1}$ for $i = 0,1,2$.
2. Interpolate the resulting three points again: $R_j = (1-t)Q_j + t\,Q_{j+1}$ for $j = 0,1$.
3. Interpolate the final two: $B(t) = (1-t)R_0 + t\,R_1$.

This three-level pyramid of lerps is numerically stable, easy to implement, and reveals why cubics are the sweet spot: they offer four degrees of freedom (enough to control direction at both endpoints) without the unwanted oscillations that plague higher-degree curves. In practice, long paths are stitched from many cubic segments joined with matching tangent directions — exactly what SVG paths and PostScript fonts do.

Bézier curves are among the most widely deployed mathematical objects in software:

• Font outlines: TrueType fonts use quadratic Bézier curves (degree 2); PostScript and OpenType use cubics. Every glyph you read is a closed loop of Bézier segments.
• SVG and PDF paths: the C command in an SVG path is a cubic Bézier; the entire shape of an icon or illustration is a sequence of them.
• CSS cubic-bezier(): the easing functions that make animations feel natural — ease, ease-in-out, custom springs — are cubic Bézier curves mapping time to progress.
• Video game splines: camera paths, character animation rigs, and projectile trajectories all rely on sequences of Bézier or related spline segments.
• Computer-aided design (CAD): the original motivation — car bodies, aircraft fuselages, and industrial parts are designed as Bézier or NURBS surfaces.

The key reason Bézier curves are everywhere is their local control: moving one handle affects only the nearby portion of the path, which matches how designers think. Compare that to a global polynomial interpolation (which would wobble everywhere) and you understand why Pierre Bézier's 1962 insight still runs inside every convex-hull computation and vector renderer today.

Bézier curves are a masterclass in applied mathematics: a genuinely simple idea — keep interpolating between interpolations — that happens to solve a hard design problem perfectly. Four control points, a single parameter $t$ running from 0 to 1, and you get infinite smooth motion in the direction the designer intended.

The next time you drag a handle in Illustrator, tweak an animation easing, or look at the letter "g" on your screen, you are watching de Casteljau's three levels of linear interpolation play out millions of times a second — quietly keeping every curve smooth, every font readable, every animation fluid.