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. 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 teal line shows the second. The purple 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. 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.