Examples:

Δ       









Greetings, visitor!

while working on a application that needed an SVG-path element, I grew frustrated with the lack of ways to try the path-string in a visual way. Spoiled by JSFiddle and the likes, trying to visualise what my path would look like was hard...

I fully expected a comparable website to exist to try and edit a path, but I could find none, so I decided to make my own. I hereby present it to the WWW :-)

Please note: this is not a SVG-drawing tool. There are many of them around. This tool is meant for programmers, who try to figure out how the path they want can be described in coordinates. Load the examples and play around, and you will (hopefully) see what I mean.

There are a few fields/buttons to play with:

Path string
This is the main course. Here you can edit the string of the path and see any changes live on the canvas. As this is only a simple tool, there are severe limitations...
  • For now, all segments must be on separate lines, like the examples.
  • For now, only controlpoints with absolute coordinates will render correctly. If enough people are interested, I might be persuaded to enable relative points as well. 
  • As I use simple string manipulation to change the path as you drag the points, if you drag one point past the other, they will merge. I know, I've tried :-) 
Δ + buttons
Once you have a path, actually moving it around (ie: changing the coordinates) is tedious work.
Use these buttons, it is way easier!
Use the Δ -parameter to move with alacrity or great precision...
Test dot
Will place a sad, lonely dot on the x,y given. (r=5)
Size Canvas
Change the size of your canvas to have enough room for your masterpiece
Mirror Y 
The coordinates for a SVG element start with (0,0) in the top left corner. I don't know why; probably because the DOM also starts with 0,0 top left. But it drives me nuts when trying to generate a curve. Use this handy toggle to restore sanity!
(Technique copied from SO.)
Flip Y / X
Having used your sanity (as it is) restored by the  Mirror Y function, you might get a depression getting back to the mundane SVG of the dark ages. Using the button Flip Y you can hold on to your good mood slightly longer. This button will use the size of your canvas to re-calculate all coordinates in the mirror dimension. And if we can do it in the Y-dimension, Y stop there?

This tool is developed by Paul Wiegers, because I needed something like this and could not find it. The code was hacked together in a weekend, and can likely be improved at least 1000x. I've not obfuscated it, and will publish it on Github as soon as I can find the time to do so :-)

Published for his and your amusement and to toy around with. Positive comments welcome, negative and constructive ones too, the rest you can swollow :-p

Used libraries: