This is really cool and really well done. You should probably put the link to the GitHub page on it and add a LICENSE file to specify if it's open source though!
It would also be really nice to have a feature to hide the points and control points to see what you've made more clearly.
Awesome! Definitely using this to make icons. Way handy to have something simple and online, and not have to fire up Inkscape or Illustrator.
Issues I saw: Ctrl-click to add point doesn't work well on OSX, where ctrl-click doubles as right-click and brings up a context menu.
After ctrl-click and seeing the context menu, it gets stuck in add-point mode until I tap ctrl again.
Maybe it would be easiest to add-point when you click in the background, and select-point when you click on a point?
Having an insert-point function would be really handy. Maybe it would be easiest to make it so that add-point checks the selected point before adding, and joins the selected point to the new point.
Might be nice to allow the point type options on the first point, in the case where you close the path? I don't know SVG paths well enough to know if it supports that natively, but if the only way to close a path is with a straight line, it limits the usefulness of having a close path option, yes?
Thanks! Your suggestions are very relevant. The point insertion function is planned for the next update, as well as the ability to change the path code.
The close path function is natively present in SVG. The code ends with the command Z when you want to close the path. The first point is declared using the command M (Move To), so if you want to end the path with a curve, you just have to close it manually with an actual point. :)
Am I being thick? When I hold ctrl and click (on mac), the web context menu pops up and prevents me inserting a point. Although when the menu disappears I actually can add points. Also I have no idea how to create quad or bezier points.
EDIT: oh I am being somewhat thick, you can scroll down to see more menu options like line type. Its not at all obvious though at the resolution I am on. he CTRL click issue is still open for me though
You know what that means? That this tool understands Bezier curves better than Adobe Illustrator. Why? Because Adobe has never heard of the phrase "cusp node".
If you have Illustrator, I challenge you:
- Draw a box with 4 sides
- Try and curve the top line without causing the side lines to curve
Not to take away from how cool this site is, but that is actually really easy to do in Illustrator.
- Draw a box with 4 sides.
- Use the Anchor Point Tool (shift + c) to select the top line and drag it. The adjacent points will split their anchors.
You can use the Anchor Point Tool to convert points between corner mode, mirrored anchor mode, and split anchor mode. Not sure if those are the official terms.
If the anchor has its handles visible, you can also alt+click+drag one handle to automatically convert it to a split anchor / cusp / whatever the cool kids are calling it.
Forgive me for being a little skeptical but can you show us a screenshot of the "toast shape" done in Adobe Illustrator (showing the guide lines, please)? (I'm changing the challenge a bit because just dragging the top line isn't the same as bestowing the top corners with guides and this challenge now necessitates the guides):
And make sure to tell us how long it took you. In SVG Path Builder the toast shape above took me 10 seconds, and it never gave me grief by trying to curve the sides, while still giving me the guides for each of the relevant corner nodes. Drawing that in Inkscape is just as easy. Same for CorelDraw.
If you can manipulate the guides of your corner nodes and have them affect only the top side, then you've succeeded in making those two top corner nodes cusp. I have never seen anyone online showing cusp nodes in Illustrator.
Again, the anchor point tool is necessary here. First you drag the top line up to add split anchors (or cusp nodes, haven't ever used that term) to the two adjacent points. Then you can use either the anchor point tool or the direct selection tool to adjust the two new anchors.
One feature Adobe Illustrator is sorely lacking (afaik) is grid snapping for anchors. They will snap to objects, lines, and points, but grid snapping would be really helpful.
This should just be the interface for path editing in Inkscape. Inkscape already has these features, but you have to randomly and madly left, right, and double-click various things along with some random keyboard modifiers until you get what you want.
On another note, Blender seriously needs a more intuitive interface like this.
Inkscape could have had the world if they just copied Adobe Illustrator, but instead they came up with their own unfamiliar UI. I'm not saying their UI is worse that Illustrator (although I feel that way personally), but it's not better enough to justify the learning curve. I have to imagine Inkscape contributors were smart enough to realize this, so I guess they were afraid of getting sued. Same goes for Gimp/Photoshop.
You star! I was fumbling around with animatron (also pretty good) but this is more direct implementation for what I need for static svg paths. Great job!
Lovely. I kind of grown affected to SVG after I had to create a lot of SVGs at our last customer. It's cool because all you need is a text editor and a SVG viewer (I use [1]) to create images.
Manually creating paths can be pretty difficult though and that's why I am happy to see tools like this one.
It would also be really nice to have a feature to hide the points and control points to see what you've made more clearly.
GitHub link for others: https://github.com/anthonydugois/svg-path-builder