Custom control surface: purples shape the curve, pinks sit on it, lime handles set tension.
Hover the graph or panel to show dots.
How it works
-
The graph is a chain of cubics:
cubic(pass → lime− → lime+ → next pass).
The blue line is that path as Y vs X.
-
Purples are the joints that own each segment.
Drag them to move the joint. Purples and pinks snap to the grid when snap is on.
Start and end
are the same kind of joint, but locked to the left and right edges (Y free).
-
Lime handles (G− / G+) sit opposite through their purple.
Drag a lime to rotate the pair and set how far it spreads
(push-pull: 0 = stacked on purple; negative = soft/round; positive = sides swapped (sharper).
-
Pinks are on-curve pass-throughs between purples.
Drag a pink along the green corridor to blend left/right.
Pinks win clicks when stacked on other dots.
-
Orange /
red diamonds are the actual cubic tension points
(same places as the limes after finalize). Useful to see what the math is using.
Edit the shape
Drag purple / start / end · drag lime for angle & push-pull · drag pink for blend ·
double-click empty to split & add a purple · double-click a free purple or pink to remove
(start/end stay).
Select & move many
Drag empty for marquee · Shift-click to toggle · drag any selected when 2+ are selected
for a group move (rules still clamp).
Panel
Select a purple for local push-pull & rotation · select a pink for local blend ·
Ctrl-click any slider to zero · Smooth zeros all pull/blend · Snap to grid (purples + pinks) ·
grid divisions: drag to scrub, double-click to type · Copy/Paste settings (JSON) · Copy PNG
(curve only).
Dots show while the pointer is over the graph or the control panels.