The Curve That's Everywhere

Open any design tool. Draw a path. Grab a handle and drag it. The curve bends, smoothly, intuitively, as if pulled by an invisible force. That behavior has a name: the Bézier curve, and it has been quietly running the visual world since the 1960s.

Where they come from

Pierre Bézier was an engineer at Renault Paul de Casteljau, working at Citroën, independently derived the same formulation at the same time. Citroën classified his work as an internal document, so Bézier published first and got the naming rights. The geometric construction in the demo (repeatedly interpolating between points) is de Casteljau's algorithm, named for him only decades later.. In the early 1960s, he needed a way to describe the smooth, compound curves of car bodies mathematically — something a computer could both store and reproduce. He developed a formulation that let you define a curve using just a handful of control points: some on the curve itself, some off it, pulling it toward them like magnets.

The insight was elegant. You don't describe every point on the curve. You describe the forces that shape it, and let the math do the rest.

How they actually work

A cubic Bézier — the most common kind — has four control points: P₀ and P₃ anchor the two ends of the curve. P₁ and P₂ are handles that pull the curve toward them without the curve ever reaching them.

The formula for a point on the curve at parameter t (where t runs from 0 to 1) is:

But there is a more beautiful way to think about it, discovered by Paul de Casteljau: repeated linear interpolation.

1. Linearly interpolate between P₀→P₁, P₁→P₂, and P₂→P₃ at parameter t. You get three new points.
2. Interpolate between those three points at t. You get two new points.
3. Interpolate between those two at t. You get one point — and that point sits exactly on the curve.

The demo below makes this visible. The blue lines show the first round of interpolation. The coral line shows the second. The pine green dot is the final point on the curve. Drag the slider to move t from 0 to 1 and watch the construction trace the entire curve.

Every font on your screen is built from these curves — TrueType fonts use quadratic Béziers (three control points), while PostScript and OpenType use cubics Apple chose quadratics deliberately. PostScript used cubics and Adobe controlled the licensing. By building TrueType around quadratics, Apple sidestepped the dependency. The dispute (sometimes called the font wars) ended in 1989 when the two companies cross-licensed their technologies.. Every CSS animation-timing-function: cubic-bezier(...) is one of these. Every path in an SVG file. Every smooth stroke in Figma, Illustrator, or Sketch.

Why this blog can do this

This post is a Markdown file. The interactive diagram above is a Vue 3 component, dropped into the Markdown with two lines:

::BezierDemo
::

That syntax is called MDC — Markdown Components. It is part of Nuxt Content, the system that powers this blog. The component has full access to Vue's reactivity system: refs, computed properties, event listeners. It is not a screenshot, not an iframe, not an embedded CodePen. It is just a component, living inside a story.

This is what I wanted when I built this site. Writing that can move.