The SVG/VML Bézier Curve Construction Set

Drag the end points (red) and control points (orange) in the page below. Each time you finish dragging a point, this application writes the SVG/VML notation of the Bézier Curve as it appears on the page. You can nudge all the points at the same time by using the arrow keys. If the form at the top of the screen is in the way, hit the ESC key to alternate it's visibility.

If you'd like, you can change the image to use as a guide by entering it into the "Image" form field and clicking "Set Image and Path".

You can also enter in a valid SVG Path in the "Path" field as long as it's in the following format:

M x1, y1 C cx1, cy1, cx2, cy2, x2, y2

Where (x1, y1) and (x2, y2) are the end points of the path and (cx1, cy1) and (cx2, cy2) are the control points. If you are not sure what end points and control points are, you should read the following articles to get started:

This application uses jQuery, Modernizr, jsdiff.js (to highlight the parts of the path have changed) and html5Forms.js (to do HTML5 Form validation consistantly in all browsers).

(ESC hides form.)