Bezier curve playground

Wed Apr 15 2015 in Blog

Bezier curves are one of the cooler things with built-in support in the web browser - which makes it easier to create this demo in the browser (vs a custom native UI). Below is a playground to tinker with cubic bezier curves.

You can

• add new points - click on a empty area
• move the existing points (blue dots) - click and drag
• move the control points (the points with circles) - again, click and drag

Have a go… try adding a couple of points and dragging the resulting control points.

If you are wondering how they work, there are a huge number of articles, explanations and animations of bezier curves on the internet (this article adds one more to the demos) - and this section on the wikipedia article does a great job of explaining cubic+ bezier curves using animations. I refreshed my knowledge on the topic from that very article.