Please explain Bezier curve for me

Hi, I posted the same text in the Gitter chat but didn’t within an hour and fifteen minutes, so I am gonna ask here.
I am currently doing the number 49 of 52 “Applied Visual Design” tutorial, “Use a Bezier Curve to Move a Graphic”. It mentions four points of a bezier curve but I am having a hard time wrapping my head around what the values represent. They only take one value, so does that mean they represent the Y-value, and their X-value is something like 0, 0.25, 0.75, 1, pre-determined? Or are P0-P3 arranged in sets of X- and Y-values? Probably not, but please explain this so I can understand this. :grinning:

A Cubic Bezier curve is defined by four points P0, P1, P2, and P3 . P0 and P3 are the start and the end of the curve and, in CSS these points are fixed as the coordinates are ratios. P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.

Hey, the CSS Cubic Bezier Generator will give you a graphical view of what the cubic-bezier function is doing.

Found a pretty good description of what the numbers mean on Quackit. Yes, the numbers you are passing into cubic-bezier represent points on a graph (x1, y1, x2, y2).

Thanks, I think I have a better feel for it now.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.