Chapter 02 · Curves

The math behind
the pen tool.

Every smooth curve you've ever seen on a screen — Figma paths, fonts, even the curve tool in MS Paint — is this one idea. And it starts with a formula you learned in school.

start with the 2-minute lesson ↓
▶ watch rgbguy's original — Bézier Curves!
The lesson · a 90-second movie you can touch

Press play. It explains itself.

It plays like the video — one caption at a time, the picture animating under it — and it pauses when it's your turn to drag something. Skip around with the dots or arrow keys. The full playground comes after.

0.50
skip to lab ↓
90 seconds · it pauses when it's your turn
On paper · the same idea in symbols

Midpoint → weighted point

The midpoint formula is a recipe for mixing two points. Rewrite it and the mix becomes obvious: half of A plus half of B. So… what happens if you don't mix 50/50?

The school version, for A=(x₁,y₁), B=(x₂,y₂): M = ( (x₁+x₂)/2 , (y₁+y₂)/2 ) M = (A + B) / 2 M = A/2 + B/2  ✓ M = A × 0.5 + B × 0.5 Change the weights (they must sum to 1): P = A × 0.1 + B × 0.9 ← 90% of the way to B! Give the weight a name — t — and you get the most important line in graphics: P(t) = (1−t)·A + t·B "linear interpolation", friends call it lerp. t=0 → you get A. t=1 → you get B. Anything between → between.
drag the weight ↓
0.50
Step 2 · Stack the lerps

Linear → Quadratic → Cubic

Here's the trick the video builds to: lerp between the lerps. With three points, lerp A→B and B→C, then lerp between those moving points. The final point traces a curve. Add a fourth point, repeat again — that's the pen tool. Drag the big dots. Scrub t. Watch the named points.

drag A, B, C…

Scrub time

0.35

Show

t = 0.35
Formula: P = (1−t)²·A + 2(1−t)t·B + t²·C
Point at t=0.35: (312, 245)
2 lerps → 1 lerp → point
Step 3 · Use it like a designer

Your own tiny pen tool

Click to drop a corner point. Click and drag to drop a point and pull its handles out — exactly like Figma or Illustrator. Each segment between anchors is one cubic Bézier: your anchors are A and D, your handles are B and C.

click = corner · drag = smooth

Pen

Each segment:
P = (1−t)³A + 3(1−t)²t·B + 3(1−t)t²·C + t³D
anchors: 0 · segments: 0
Step 4 · Spot it in the wild
where you already use Béziers, daily —
  • Every font you read. Each letter's outline is a chain of these curves. Zoom into a "S" in any design tool — anchors and handles.
  • CSS animations. cubic-bezier(.25,.1,.25,1) — easing is a Bézier where x is time and y is progress. That "smooth start, smooth stop" feel is the curve you just built.
  • Game paths & cameras. Cutscene cameras, racing lines, projectile arcs — designers drop control points, the game lerps between lerps at 60fps.
See it in 3D · orbit it like Blender

The cutscene camera rides your curve

This is exactly how game cameras fly: designers drop four control points in the editor, the engine runs the same P(t) you derived above, and the camera rides it at 60fps. Orbit the scene like Blender, then press 🎥 ride to sit ON the curve.

drag to orbit · scroll to zoom

Camera

P(t) = (1−t)³A + 3(1−t)²tB + 3(1−t)t²C + t³D
t = 0.00
B and C drift — the path is rebuilt every frame
The source · rgbguy's original

Watch the video, jump by section

Click any moment on the right — it takes you straight there (in place when this site is served over http, on YouTube when opened as a local file).

jump to a moment

open on YouTube ↗