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
comments powered by Disqus