Cubic bezier easing sampler
Sample a CSS cubic-bezier() easing curve at 11 points from t=0 to t=1, so you can see the x and y it produces before dropping it into a stylesheet. Runs on your device.
Cubic bezier easing sampler walks a CSS cubic-bezier(p1x, p1y, p2x, p2y) curve across 11 steps between t=0 and t=1, defaulting to 0.42, 0, 0.58, 1, the built-in ease-in-out preset. Each row lists t next to the x and y that step produces, ending in a finished cubic-bezier() string for a stylesheet. A non-numeric control value gets the run refused.
Questions
What are the default control points?
0.42, 0, 0.58, 1, which is the CSS ease-in-out preset.
How many points does it sample?
11 points, evenly spaced from t=0 to t=1, so each step covers a tenth of the curve.
What does each row show?
t alongside the x and y the curve produces at that t.
Does it give me a CSS string?
Yes, a finished cubic-bezier(p1x, p1y, p2x, p2y) string appears below the table, ready to paste into a stylesheet.
What happens with a non-numeric control point?
The tool refuses, naming that p1x, p1y, p2x and p2y must all be numbers.