SVG Cubic Bézier Curve Example

Your browser does not support SVG
code

This demonstration shows how cubic bézier curves can be drawn on an SVG.

Drag the line ends or the control points to change the curve. Click the curve to toggle the fill.

For more information, please refer to:
How to Draw Cubic Bezier Curves on HTML5 SVGs

See also:
How to Draw Quadratic Bézier Curves on HTML5 SVGs
How to Create Complex Paths in SVGs

Disclaimer

The code was developed by Craig Buckler of OptimalWorks.net for SitePoint.com.

This code can be used without any restrictions but please don't expect 24/7 support! A link back to SitePoint.com is appreciated.