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.

SVG Path for the curve

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.


comments powered by Disqus