# 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:

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" />`