×

Bezier Curve Visualizer

how to use

You can:

  • drag points and see how the curve changes

  • change ease functions for the animation

  • double tap/click on a point to remove it, or in a blank space to add a point

controls

Easing function in the animation

t value (0)

Animation speed (t += 0.005 every frame)

view

Show...






Control point color scheme

presets

Choose a preset to load:


Want to add a preset? Create a pull request on GitHub

data storage

This is your data. It stores your current curve and your presets.

This is not cross-browser or cross-device. If you want to have your presets on a different browser/device, load the data below in the other browser/device.

To load save data, paste your save data into the box above and click the Load Save Data button.


Your save data is refreshed if you have not visited the page for more than 60 days.
If you have disabled cookies, this data won't be saved at all.

how it works

This visualizer uses an implementation of DeCasteljau's algorithm. For how this works, see the Geometric interpretation section of this Wikipedia page.

contribute

Version: