cubic-bezier editor

What the math is doing

• Two anchors, two handles. P0 = (0, 0) and P3 = (1, 1) are fixed; you control P1 = (x1, y1) and P2 = (x2, y2).
• x's are clamped, y's aren't. Per CSS spec, x1 and x2 must lie in [0, 1]. y1 and y2 can be negative or above 1 — that's how back-out and spring-style overshoot easings work.
• Time is x, progress is y. Browsers solve: given the elapsed normalised time x, what value of t makes bezierX(t) = x? Then they emit bezierY(t) as the eased progress.
• The inverse needs a numeric solver. Cubic-bezier has no closed-form inverse, so browsers (and this tool) do a binary search on t. 20 iterations gives sub-pixel precision on any practical canvas.