# 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)
```^{3}P_{0} + 3(1 - t)^{2}tP_{1} + 3(1 - t)t^{2}P_{2} + t^{3}P_{3}

Substituting `P`

and _{1} = 0`P`

into the above equation (_{2} = 1`P`

and _{0} = 0`P`

are implied), we end up with:
_{3} = 1

```
y(t) = 3t
```^{2} - 2t^{3}

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 `P`

and _{0} = 0`P`

, we get:
_{3} = 1

```
B(t) = 3(1 - t)
```^{2}tP_{1} + 3(1 - t)t^{2}P_{2} + t^{3}

Expanding things out:

```
B(t) = (3t - 6t
```^{2} + 3t^{3}) * P_{1} + (3t^{2} - 3t^{3}) * P_{2} + t^{3}

And then putting in `P`

and _{1} = 1/3`P`

:
_{2} = 2/3

```
B(t) = (t - 2t
```^{2} + t^{3}) + (2t^{2} - 2t^{3}) + t^{3}

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 P`_{1}, 0.6666 P_{2}, 1 1" />