6 ms·

HTML5 vector graphics editor

57 points by durman 14y ago

katquita 14y ago
very useful. Thanks!
moondowner 14y ago
It's like Inkscape in browser! Excellent.
Kartificial 14y ago
Maybe a small feature idea. When rotating elements, it's nice to be able to hold shift and let the object snap to 45 degrees angle increments.
- durman 14y ago
  That's a great suggestion. Putting it on the list of the next features to be done...
- durman 14y ago
  Just to inform you that this is now implemented.
fla 14y ago
Well done! Suggestion : A full-screen mode to take advantage of big screens
- durman 14y ago
  Thanks! A full-screen mode is in place but not in the demo. You'd have to sign-up (free) to get the editor with fullscreen capability.
duopixel 14y ago
Looks like this was done in Raphael from scratch. The history panel is very cool. I have my own HTML 5 vector graphics editor http://editor.method.ac http://editor.method.ac which is based off SVG Edit, so I understand the amount of work gone into this, it must have been an interesting challenge! I small UX suggestion for your landing page: instead of warning people that they don't have save functionality unless they sign up first, allow your users to save their work by signing up. I'm sure a "Save and Sign Up" button would do wonders for your conversion rates.
- guilloche 14y ago
  Your editor seems pretty advanced and very responsive, it is much better than previous existing ones. (I know, there was a javascript one several years ago)
- durman 14y ago
  Nice work your editor! Small note, I'd suggest you not hide some of the functionality behind menu (Bring forward, Send backward, ...). There is plenty of space in the upper menu and it might be better if the user saw these buttons directly and be able to manipulate them with one click. Figurepool is indeed built with Raphael from scratch. I'm also using JointJS though, a diagramming lib that I built some time ago. My goal is to build a mixture of vector graphics and diagramming tool. You're absolutely right about the "Save & Sign up" button. Will do it soon...
- DonnyV 14y ago
  Wow, this looks awesome! I love the controls on the right hand side. Simple large numbers with grabber hand. Also like your shape library. Only thing I would change is maybe let people directly change the numbers on the right hand side by double clicking it. Once people get used to it, they start knowing what numbers to put in.
  - duopixel 14y ago
    Thanks, that's how the numbers actually work, if you double click it it becomes editable.
guilloche 14y ago
Great work. As a graphics programmer on web, I understand it is very time consuming and hard to squeeze out performance from a browser. My own htm5/nacl vector graphics editor http://www.torapp.info http://www.torapp.info is similar but specially enhanced for security printing.
- e12e 14y ago
  What is "security printing" ? Watermarking?
  - guilloche 14y ago
    Something like guilloche designing for paper money.
gawker 14y ago
Just wanted to say that I really love this editor. Really simple to quickly create diagrams. Great job!
sea6ear 14y ago
The controls remind me a lot of the Morphic widgets from Squeak Smalltalk.
- durman 14y ago
  Nice that you noticed. I was indeed inspired by Squeak Smalltalk. I love that system. Pity it didn't get widespread.
  - e12e 14y ago
    I actually had to go an look up the various web/javascript smalltalks -- it looks like a few of them are live and well -- but more importantly the Lively Kernel does offer a parts bin with basic shapes, and a right click halo that allows for modification -- but lively kernel could be made to look prettier by borrowing from here...: http://www.lively-kernel.org/ Note Lively isn't Smalltalk... but with OMeta[1] it sort of is: http://www.youtube.com/watch?v=f2dyLKP_xJc http://www.youtube.com/watch?v=f2dyLKP_xJc [1] http://tinlizzie.org/ometa/ http://tinlizzie.org/ometa/ If you find [1] interesting you might also like: http://www.vpri.org/vp_wiki/index.php/Main_Page http://www.vpri.org/vp_wiki/index.php/Main_Page
Krutet 14y ago
Great work! I'm about to decide which solution I'm gonna use for making mind maps while studying and I like this one alot.. Any chance there'll be google drive connection in the near future? Edit: I seem to have a problem with scrolling in the document. When I try to scroll using two finger swipe on a mac it sometimes recognise the scroll as a zoom in/zoom out command instead, until I reload the page and I can scroll normally again. Is there any other way to scroll? Am I doing it wrong? (and sometimes the the browser recognise the two finger swipe as a back command..)
- durman 14y ago
  Figurepool can be very handy for mindmapping, actually the 'fork icon tool' was added with mindmaps in mind, you just click the icon tool and a new already connected box is added. Just double click the box to add new text label to it. The scrolling issue seems to be an OS X related bug. I sometimes observe the same. The fact that sometimes two finger swipe is recognized as back button is a Google Chrome on OS X feature. I was able to get around the zoom/scroll issue by pressing the Shift button. Not sure if it'll work for you though. At least you can give it a try...
euroclydon 14y ago
For anyone interested in writing HTML5 (Canvas or SVG) in-browser editors, I think there is big market potential in, not necessarily another diagram tool like this, but a content authoring tool for data analysis. It's not a big leap from this product to an editor for say, D3 or HighCharts.

57 points by durman 14y ago

katquita 14y ago

very useful. Thanks!

moondowner 14y ago

It's like Inkscape in browser! Excellent.

Kartificial 14y ago

Maybe a small feature idea. When rotating elements, it's nice to be able to hold shift and let the object snap to 45 degrees angle increments.

durman 14y ago
That's a great suggestion. Putting it on the list of the next features to be done...
durman 14y ago
Just to inform you that this is now implemented.

fla 14y ago

Well done! Suggestion : A full-screen mode to take advantage of big screens

durman 14y ago
Thanks! A full-screen mode is in place but not in the demo. You'd have to sign-up (free) to get the editor with fullscreen capability.

duopixel 14y ago

Looks like this was done in Raphael from scratch. The history panel is very cool. I have my own HTML 5 vector graphics editor http://editor.method.ac http://editor.method.ac which is based off SVG Edit, so I understand the amount of work gone into this, it must have been an interesting challenge! I small UX suggestion for your landing page: instead of warning people that they don't have save functionality unless they sign up first, allow your users to save their work by signing up. I'm sure a "Save and Sign Up" button would do wonders for your conversion rates.

guilloche 14y ago
Your editor seems pretty advanced and very responsive, it is much better than previous existing ones. (I know, there was a javascript one several years ago)
durman 14y ago
Nice work your editor! Small note, I'd suggest you not hide some of the functionality behind menu (Bring forward, Send backward, ...). There is plenty of space in the upper menu and it might be better if the user saw these buttons directly and be able to manipulate them with one click. Figurepool is indeed built with Raphael from scratch. I'm also using JointJS though, a diagramming lib that I built some time ago. My goal is to build a mixture of vector graphics and diagramming tool. You're absolutely right about the "Save & Sign up" button. Will do it soon...
DonnyV 14y ago
Wow, this looks awesome! I love the controls on the right hand side. Simple large numbers with grabber hand. Also like your shape library. Only thing I would change is maybe let people directly change the numbers on the right hand side by double clicking it. Once people get used to it, they start knowing what numbers to put in.
- duopixel 14y ago
  Thanks, that's how the numbers actually work, if you double click it it becomes editable.

guilloche 14y ago

Great work. As a graphics programmer on web, I understand it is very time consuming and hard to squeeze out performance from a browser. My own htm5/nacl vector graphics editor http://www.torapp.info http://www.torapp.info is similar but specially enhanced for security printing.

e12e 14y ago
What is "security printing" ? Watermarking?
- guilloche 14y ago
  Something like guilloche designing for paper money.

gawker 14y ago

Just wanted to say that I really love this editor. Really simple to quickly create diagrams. Great job!

sea6ear 14y ago

The controls remind me a lot of the Morphic widgets from Squeak Smalltalk.

durman 14y ago
Nice that you noticed. I was indeed inspired by Squeak Smalltalk. I love that system. Pity it didn't get widespread.
- e12e 14y ago
  I actually had to go an look up the various web/javascript smalltalks -- it looks like a few of them are live and well -- but more importantly the Lively Kernel does offer a parts bin with basic shapes, and a right click halo that allows for modification -- but lively kernel could be made to look prettier by borrowing from here...: http://www.lively-kernel.org/ Note Lively isn't Smalltalk... but with OMeta[1] it sort of is: http://www.youtube.com/watch?v=f2dyLKP_xJc http://www.youtube.com/watch?v=f2dyLKP_xJc [1] http://tinlizzie.org/ometa/ http://tinlizzie.org/ometa/ If you find [1] interesting you might also like: http://www.vpri.org/vp_wiki/index.php/Main_Page http://www.vpri.org/vp_wiki/index.php/Main_Page

Krutet 14y ago

Great work! I'm about to decide which solution I'm gonna use for making mind maps while studying and I like this one alot.. Any chance there'll be google drive connection in the near future? Edit: I seem to have a problem with scrolling in the document. When I try to scroll using two finger swipe on a mac it sometimes recognise the scroll as a zoom in/zoom out command instead, until I reload the page and I can scroll normally again. Is there any other way to scroll? Am I doing it wrong? (and sometimes the the browser recognise the two finger swipe as a back command..)

durman 14y ago
Figurepool can be very handy for mindmapping, actually the 'fork icon tool' was added with mindmaps in mind, you just click the icon tool and a new already connected box is added. Just double click the box to add new text label to it. The scrolling issue seems to be an OS X related bug. I sometimes observe the same. The fact that sometimes two finger swipe is recognized as back button is a Google Chrome on OS X feature. I was able to get around the zoom/scroll issue by pressing the Shift button. Not sure if it'll work for you though. At least you can give it a try...

euroclydon 14y ago

For anyone interested in writing HTML5 (Canvas or SVG) in-browser editors, I think there is big market potential in, not necessarily another diagram tool like this, but a content authoring tool for data analysis. It's not a big leap from this product to an editor for say, D3 or HighCharts.