Bezier Curve Editor

A Bezier curve is a parametric curve defined by control points. A cubic Bezier has 4 points: P0 (start), P1 and P2 (control handles that shape the curve), and P3 (end). The curve passes through P0 and P3 but is 'attracted' by P1 and P2 without necessarily touching them. They are used everywhere: SVG paths, CSS animations, font outlines, and game pathfinding.

A quadratic Bezier uses 3 points (P0, P1 control, P2 end) and produces a simpler parabola-like curve. A cubic Bezier uses 4 points (two control points) allowing S-curves, loops, and more complex shapes. Most CSS animations, Canvas paths, and SVG <path> elements default to cubic Bezier for their expressiveness.

CSS cubic-bezier(x1, y1, x2, y2) defines an easing curve for animations. The start point is fixed at (0,0) and end at (1,1). x1/y1 define the first control point; x2/y2 the second. X values must be in [0,1] (time). Y values can exceed [0,1] for overshoot/bounce effects. Built-ins like ease, ease-in, ease-out, ease-in-out are all cubic-bezier() calls.

In SVG, M x y moves to a start point. C cx1 cy1, cx2 cy2, x y draws a cubic Bezier to (x,y) with control points (cx1,cy1) and (cx2,cy2). Q cx cy, x y draws a quadratic Bezier. These path commands are used in <path d='...'> attributes and are the building blocks of all SVG icons, logos, and illustrations.

t is the parameter ranging from 0.0 (start) to 1.0 (end). Plugging t into the Bezier formula gives the exact (x,y) point at that proportion along the curve. t=0.5 is the midpoint of the curve (not the midpoint of the bounding box). This parametric form makes Bezier curves easy to sample, animate along, and split at any position.

Increment t from 0 to 1 each frame in requestAnimationFrame. Plug t into the Bezier formula to get the current (x, y) position. For easing, apply a non-linear t: ease-in uses t² or t³, ease-out uses 1-(1-t)², ease-in-out combines them. For CSS, use offset-path with a path() value and animate offset-distance from 0% to 100%.