HTML5 <canvas> SVG and bezierCurveTo command generator

Path Edit Modes

Output
Trace Path Over Image

About this tool

This tool was written by Victoria Kirst and forked by Claudio Procida to generate SVG. Here's the original foreword by Victoria:

Using quadratic and cubic Bezier curves can be quite challenging, because unlike vector drawing software like Adobe Illustrator, we don't have direct visual feedback as to what we're doing. This makes it pretty hard to draw complex shapes. ... [I]f you have the time and, most of all, the patience, much more complex shapes can be created.

Translation: Someone will write a tool for this later

This is a tool to generate SVG and calls to bezierCurveTo via a Bezier path drawing GUI.

Intended For: People who already know JavaScript/canvas and want to draw a simple non-standard shape, but don't want to fiddle with pixel values.
Not Intended For: Auto-generating code for those who don't know what they're doing; replacing a full-fledged awesome drawing program like Illustrator.

Possible improvements:

If you'd like to contribute to the tool, fork the repo and submit a PR!

Original work Copyright (c) 2011-2017 Victoria Kirst. Modified work Copyright (c) 2017 Claudio Procida

Fork me on GitHub