How does a computer turn a few points into a smooth curve?

Why not just connect the dots?

Imagine asking a computer for “a smooth curve passing through these five points.” A first attempt: fit a single polynomial. It works for two or three points; for five or more it oscillates wildly between them (the Runge phenomenon). Splines fix this by stitching local pieces together — but each piece still has to be defined. Bezier’s idea is different: don’t ask for a curve through the points; ask for one shaped by them. The points become handles, not anchors.

The two-point case — lerp

Between two points $P₀$ and $P₁$, the linear interpolation lerp is $lerp(P₀, P₁, t) = (1−t)·P₀ + t·P₁$. At $t = 0$ you sit on $P₀$, at $t = 1$ on $P₁$, and in between you trace the straight line. This is so simple it looks like nothing. But it is the only tool Bezier curves need.

# A point is a 2-tuple. Lerp is one line.
def lerp(a, b, t):
    return (a[0] + (b[0] - a[0]) * t,
            a[1] + (b[1] - a[1]) * t)

lerp((0, 0), (4, 2), 0.0)    # → (0, 0)
lerp((0, 0), (4, 2), 0.5)    # → (2, 1)
lerp((0, 0), (4, 2), 1.0)    # → (4, 2)

Recursive lerp — De Casteljau

With four control points $P₀, P₁, P₂, P₃$, do this. Lerp every adjacent pair at $t$ to get three new points. Lerp those pairs to get two. Lerp those to get one. That last point is $B(t)$, the curve at parameter $t$. Each “layer” reduces the count by one; with $n+1$ controls, you stop after $n$ layers. This is De Casteljau’s algorithm , and it is exactly equivalent to the polynomial form $B(t) = (1−t)³P₀ + 3(1−t)²t·P₁ + 3(1−t)t²·P₂ + t³P₃$ — same numbers, kinder bookkeeping.

In the widget, each layer is drawn in its own color: the dashed gray polygon connects the original controls, orange the level-1 lerps, brown the level-2 lerps, and the final green dot is $B(t)$. Sweep $t$ across the slider — the construction collapses, the green dot moves, and its trace is the curve. The curve is not drawn by a separate formula; it is the locus of recursion.

# De Casteljau: lerp every adjacent pair, then again, until 1 point remains.
def bezier(controls, t):
    pts = list(controls)
    while len(pts) > 1:
        pts = [lerp(pts[i], pts[i+1], t) for i in range(len(pts) - 1)]
    return pts[0]

# Cubic Bezier — four control points
P = [(0, 0), (1, 2), (3, 2), (4, 0)]
bezier(P, 0.0)   # → (0, 0)            (= P[0], starts at first)
bezier(P, 1.0)   # → (4, 0)            (= P[-1], ends at last)
bezier(P, 0.5)   # → (2.0, 1.5)         (midpoint by recursion)

What you can read off the picture

Four facts fall out without proof, just from staring at the construction.

• Endpoints. At $t = 0$ every lerp returns the left point, so $B(0) = P₀$. Symmetrically $B(1) = P₃$. The curve passes through the first and last control points.
• Tangents at endpoints. The level-1 lerps near $t = 0$ sit on segments $P₀P₁$; the curve emerges along that direction. So the curve leaves $P₀$ heading toward $P₁$, and arrives at $P₃$ along $P₂P₃$. Designers use this to “make two curves meet smoothly”: align their end-handles.
• Convex hull. Every layer of lerps is a convex combination of the previous layer; the final point is a convex combination of the controls. So the curve lives inside the polygon’s convex hull and never escapes — useful for collision bounds and clipping.
• The control polygon is not the curve. It bounds the curve, points along it, can be moved to drag the curve — but the curve sits inside the polygon, smoothed away from its corners.

# Bernstein form — algebraically equivalent to De Casteljau.
def bezier_bernstein(P, t):
    s = 1 - t
    bx = (s**3 * P[0][0] + 3*s*s*t * P[1][0]
        + 3*s*t*t * P[2][0] + t**3 * P[3][0])
    by = (s**3 * P[0][1] + 3*s*s*t * P[1][1]
        + 3*s*t*t * P[2][1] + t**3 * P[3][1])
    return (bx, by)

bezier_bernstein(P, 0.5)  # → (2.0, 1.5)   same answer, different bookkeeping
#
# B'(0) = 3(P[1] - P[0])  →  tangent at start points along P0→P1
# B'(1) = 3(P[3] - P[2])  →  tangent at end points along P2→P3
# A designer reads "the curve leans into the next handle" off these two facts.

Why every graphics stack ships this

The properties above are exactly what a tool needs. Local control — moving one handle changes only the nearby curve. Affine invariance — transform the controls, and the curve transforms the same way (rotate, scale, translate without re-evaluating the formula). Numerical stability — De Casteljau is just lerps, no high-degree polynomial cancellation. Composable — splice many cubic Beziers end-to-end with matching tangents and you get B-splines, the workhorse of CAD and animation.

Concretely: TrueType fonts use quadratic Beziers; PostScript and most modern fonts use cubic; SVG path data is a Bezier syntax with shorthand; Figma, Illustrator, Inkscape — all the same recursion at the bottom; Pixar’s smooth animation curves and the “ease-in-out” timing function in CSS are cubic Beziers picked by hand. One algorithm, four handles, an entire industry of curves.

The deeper bridge: Bezier curves consume the parametric-curves module. The image of the curve is the smooth path; the parametrization is $t ↦ B(t)$. Designers usually only see the image; the parametrization is what the renderer steps through to draw it.