Visualizing how x/y bezier curve values change

Say we want to graph how the y-value (output) changes with respect to the bezier curve parameter, t. For example, we want to see how the y-value changes when the y control points are 0 and 1. This should look like:

t y coordinate

The formula for the cubic bezier is as follows:

B(t) = (1 - t)3P0 + 3(1 - t)2tP1 + 3(1 - t)t2P2 + t3P3

Substituting P1 = 0 and P2 = 1 into the above equation (P0 = 0 and P3 = 1 are implied), we end up with:

y(t) = 3t2 - 2t3

But with an <svg> we do not have a way of plotting this function as-is. It turns out that we can actually plot it using a bezier curve. This can be done by havingĀ a curve where the output follows the y value, and the spacing of the points is linear. As a result, the curve drawn will follow y(t).

When using the control points 1/3 and 2/3, the resulting function will be linear. To see this, we can start with the formula, and substitute in P0 = 0 and P3 = 1, we get:

B(t) = 3(1 - t)2tP1 + 3(1 - t)t2P2 + t3

Expanding things out:

B(t) = (3t - 6t2 + 3t3) * P1 + (3t2 - 3t3) * P2 + t3

And then putting in P1 = 1/3 and P2 = 2/3:

B(t) = (t - 2t2 + t3) + (2t2 - 2t3) + t3

And once we remove the terms that cancel out, we are left with:

B(t) = t

We can now use this linear function for our X control points, and use the original x/y control points as the y control points. So we can construct an SVG path using a bezier curve that follows the y-value/x-value for the given control points with something like:

<path d="M 0 0 C 0.3333 P1, 0.6666 P2, 1 1" />