The secret behind every smooth curve you've ever seen on a screen

The other day I was tweaking the logo for a new project — one of those things where you open the vector file just to "fix one tiny detail" and vanish for two hours. I clicked a curve and suddenly those little handles appeared — the sticks with a dot at the tip sprouting from each point. I dragged one and the whole curve flexed along with it, perfectly smooth, like rubber. And the old question hit me again: how do a handful of points become such a perfect curve?

Spoiler: there's gorgeous math behind it, and its name is the Bézier curve. I built a toy below so you can drag the points and watch the magic happen live. But first let me tell you where this came from — because the story literally involves cars.

The curve born in a car factory

The name comes from Pierre Bézier, an engineer at Renault in the 1960s. His problem was very concrete: how do you describe, in numbers a machine understands, the smooth curve of a car's body panel? Back then the design was drawn by hand, at full scale, with flexible wooden splines. Bézier needed a mathematical way to represent those curves so they could be manufactured precisely.

Curiously, another French engineer, Paul de Casteljau, at rival Citroën, had reached very similar ideas earlier — but Citroën treated it all as a trade secret and barely published. That's why the curve bears Bézier's name, while the elegant algorithm that makes it work bears De Casteljau's. That algorithm is exactly what's animated in the toy below.

The idea, without the scary formula

Take four points: two at the ends (where the curve starts and finishes) and two in the middle, the "control" points — they pull the curve toward themselves like magnets, but the curve doesn't pass through them. That's why dragging a handle bends the whole line in such an organic way.

De Casteljau's trick is pure linear interpolation — that is, "walk a fraction of the way between two points." Pick a value t between 0 and 1 (think of it as "what percentage of the way am I?"):

• On each segment connecting two neighbouring points, mark the point that sits t of the way along. With 4 points, that gives me 3 new points.
• Connect those 3 new points and repeat: mark the point at t on each of the 2 segments. Now I have 2 points.
• Connect those 2 and mark the point at t once more. A single point is left — and it lies exactly on the curve.

Sweep t from 0 to 1 and that final point slides along, tracing the whole curve. That's all. No memorized cubic polynomial — just "walk a fraction of the way," repeated in layers. In the toy, drag the t slider and watch the construction lines (the layers) cascade into place.

Why it's everywhere

Once you get Bézier, you start seeing it everywhere:

• Fonts. Every letter you're reading right now is a bunch of Bézier curves. The TrueType and PostScript/CFF formats store glyphs exactly like that — points and handles.
• SVG and illustration. The C command in an SVG path is, literally, a cubic Bézier. The "pen" in Illustrator, Figma, Inkscape — they all draw Béziers.
• Animation. That CSS transition that "starts slow and speeds up"? It's a Bézier. The cubic-bezier() function is nothing but one of these curves, where the X axis is time and the Y axis is the animation's progress. The toy below hands you the ready-to-copy cubic-bezier() string.

The same curve that shapes a 1960s Renault's bumper also forms the "o" in this sentence and eases the menu that slides open in your favourite app. One idea, a thousand disguises.

Two curiosities I find brilliant

• The curve always stays "inside" the points. There's a property called the convex hull: the curve never escapes the closed outline of its control points. So even when you drag the handles far away, the curve stays "well-behaved" — great when you need to guarantee a stroke won't trespass where it shouldn't.
• You can "split" a Bézier in two without changing the drawing. De Casteljau's own step, paused at any t, gives you the control points of both halves of the curve. That's how editors do that "add a point in the middle of a stroke" without deforming anything.

My honest take

I'll admit that for years I treated Béziers as a black box: I'd drag the handles in Figma by feel until it "looked nice." When I finally sat down to understand De Casteljau, it was that satisfying click of realizing something that looked like magic was, deep down, simple and elegant. And that's exactly the kind of thing that makes me love programming: peeling back the magic and finding a beautiful idea underneath — usually simpler than the fear made it seem.

Enough talk — go drag 👇

Here's the toy. Drag the four points (mouse, finger or keyboard), move t to see De Casteljau's construction lines, toggle the control polygon, and try the easing presets. The equivalent cubic-bezier() string shows up ready to copy. All vanilla, no libraries at all.

If you dragged the points until you found a curve you liked — this is more or less how I work: I take an everyday curiosity and turn it into something you can touch and understand. If you have a project in mind — a product, an internal tool, a site that needs to truly convert — I'd love to hear about it. Want to chat?