A curve drawn by points sliding on points sliding on points

2026-05-20

Every letterform on this page, every vector illustration in every UI, every animator's stretched-and-squashed character - they are all the same shape. A Bezier curve. Four points and a recipe. The recipe is the surprise.

Pick four points anywhere on the page. Call them P₀, P₁, P₂, P₃. The curve will start at P₀, end at P₃, and bend toward the two middle points without ever touching them. That sentence is the whole specification. The construction is below.

Press play and watch a single red dot trace the curve from P₀ to P₃. Every other dot on the screen exists to put that one dot in the right place. Drag any of the four white control points and watch the whole construction reshape around them.

Three layers of sliding

A Bezier curve is built by repeated linear interpolation. The most boring operation in maths. Given two points and a number t between 0 and 1, the linear interpolation is the point that's a fraction t of the way from the first to the second. t = 0 puts you at the start; t = 1 at the end; t = 0.5 at the midpoint. That's it.

Layer 1. Slide along each of the three sides of the control polygon by fraction t. That gives three new points - the blue dots. They sit one on each side.

Layer 2. Now treat those three blue points as a smaller control polygon. Slide along its two sides, again by the same fraction t. That gives two more new points - the tan dots.

Layer 3. Slide along the one side between the two tan dots, by t, one more time. That gives a single final point - the red dot.

The red dot is the curve. As t sweeps from 0 to 1, the red dot moves, and the path it traces out is the cubic Bezier. Linear interpolation, three times, recursively. No formula, no polynomial, no calculus.

Why this is the right curve

The four control points say four things. The first and last pin the endpoints. The two middles say something less obvious: they set the direction the curve leaves and enters the endpoints, and how strongly it commits to that direction before it bends back.

The line from P₀ to P₁ is the tangent at the start. At t = 0, the red dot is sitting at P₀, but its direction of travel is along P₀P₁. Pulling P₁ further from P₀ makes the curve fly off in that direction more aggressively before turning. The same trick holds at the other end with P₂ and P₃.

So two endpoints, two tangent vectors. Four points worth of information about where the curve goes and how fast it commits - and the construction makes a beautifully smooth bend between them, every single time. That's why every type designer in the world draws letters this way.

The recursion goes higher

Linear interpolation of two points is a line - a Bezier curve of degree one. Linear interpolation of two of those is a quadratic Bezier - three control points. Linear interpolation of two of those is the cubic Bezier you've been dragging - four points. The recursion keeps going. Five points give you a quartic Bezier, six a quintic, and so on forever.

In practice nobody uses more than four. Two reasons: a cubic is already smooth enough for any shape humans actually draw, and the curve stops sitting cleanly inside its control polygon at higher degrees - the controls start fighting each other. The cubic is the sweet spot of expressiveness vs control. That is why every letter you have ever read on a screen is made of cubics joined end to end.

Pause at t = 0.5. Look at the picture. There are three blue points, two tan points, one red point - all sitting on lines that lead to each other. No formula needed. The whole of vector graphics, the alphabet of every screen, is sitting there.