Pen Tool & Bezier Playground

drag handles to reshape · drag empty space to orbit · scroll to zoom

P0 —

Curve Controls

B(t) = (1−t)³P₀ + 3(1−t)²tP₁ + 3(1−t)t²P₂ + t³P₃ weights —

Parameter t 0.35

Design Tokens — restyle this page live

Switching a token set updates CSS variables (--accent, --handle, --radius, --space) everywhere at once — including the 3D curve colors. That is the whole idea of tokens.

How the pen tool computes a curve

Anchors and handles: P₀ and P₃ are anchor points on the path; P₁ and P₂ are the handle tips you drag out of an anchor. The curve leaves P₀ tangent to the line P₀P₁ and arrives at P₃ tangent to P₂P₃.
Bernstein weights: at every t, the four weights (1−t)³, 3(1−t)²t, 3(1−t)t², t³ sum to exactly 1 — the curve point is a weighted average, so the curve always stays inside the control points' convex hull.
de Casteljau's algorithm: repeatedly interpolate — lerp along each control edge by t, then lerp those results, then again. Toggle the construction lines to see three levels collapse to the single moving point. This is also how apps split a curve in two.
Continuity: smooth multi-segment paths need matching tangent handles across anchors (G1/C1 continuity) — that is what "mirrored handles" enforces.

Design tokens in one minute

A design token is a named design decision: instead of hard-coding #2563eb in 40 places, you define color.accent once and reference it. Token categories:

color.accent	primary actions, links
color.handle	secondary / warning accents
radius.md	12px — corner rounding scale
space.base	16px — spacing rhythm unit
type.scale	1.0 — modular font sizing

Tokens live in one source of truth (JSON, Figma variables) and compile to CSS variables, iOS/Android constants, etc. Rebrand = change the token file, ship everywhere. The switcher above does exactly this to the page you are reading.