93 comments

[ 2.8 ms ] story [ 184 ms ] thread
Wow. Love it. Love the visual history. It feels quite snappy. The UI aesthetics are great. You've got most the pen tool features I used in Illustrator, and managed to do it without having multiple kinds of arrows to keep track of, which always bugged me.
Thank you! Those are all things I focused on so it's a pleasure to hear that.
FWIW, I actually much preferred Illustrator's v/a distinction to the 'click on a point' / 'drag over line' distinction here.
Artur this is pretty super dope wedep. Good job homey.
Awesome! I'm really awful at drawing on my computer. Many failed attempts at trying to learn Illustrator, Gimp, etc. What's really cool about a web app of a drawing app is that you could use all the open source product tour JS libraries to create interactive tutorials... So impressive, thank you!
If you failed at using Illustrator or Gimp effectively, then you didn't try hard enough. Follow video tutorials and try to recreate graphics, in time you'll get better.

Ugh, this entire thing is in coffeescript too, now I have to learn coffeescript to make sense of this library.

Coffeescript is way easier to learn than Illustrator.
I learned coffeescript in literally 30 minutes. I have a hard time taking any js dev seriously who sees coffeescript as hard.
I think the OP is not saying "it was impossible to learn", but "the amount of effort required to learn wasn't worth the return I would get from it". The latter may well be a sensible decision.

And it's great when someone tries to makes the learning process easier, and even better when they open source it.

Yeah, exactly. I also don't have a need to use any of those heavy weight apps more than a few times a year, so every time I go back, I have to start over again from scratch. Something appealing, lightweight, with good tutorials would be such a boon for web developers who don't have time to learn all the subtleties of Illustrator.
> Ugh, this entire thing is in coffeescript too

You mean the entire thing is noise free an easily readable, I agree.

You might be shocked (shocked!) at how clean and readable some of the CoffeeScript source is. To pick an example at random:

https://github.com/artursapek/mondrian/blob/master/src/geome...

Artur really did a nice job with structuring this project...

Vanilla JS is easier for me. I don't have time to learn the workings of coffeescript just to read a library casually.
'The golden rule of CoffeeScript is: "It's just JavaScript". The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime'

There really is very little magic with coffeescript. Most of it is syntactic sugar which can be learned at a glance of: http://coffeescript.org/ .

Don't mean to come off as pushy but I think it's well worth learning what coffeescript is. Especially if you are familiar with javascript, as it's a straight upgrade in your toolkit.

As an additional testimony, I've actually been learning coffeescript without really knowing JavasScript, and it has actually gone fairly well. For the most part it's intuitive, and if you're willing to be a little frustrated figuring out some of the syntax changes it can be rewarding.
But obviously you do have enough time to complain about it.
> Ugh, this entire thing is in coffeescript too, now I have to learn coffeescript to make sense of this library.

This reminds me of a really funny bit Louis CK does about wifi on an airplane. https://www.youtube.com/watch?v=KpUNA2nutbk#t=234

Basically, the punchline is how ridiculous it is that some people can believe they're entitled to something being a certain way, that they didn't know even existed until a few minutes ago.

"Ugh, this really cool library isn't written in something I already know. What an asshole for doing that."

Wow that's the opposite reaction than what I had.
don't know if you are interested in edtech but check out appynotebook.com ... it is an open source LMS with a vector graphics drawing layer and a lot more.
This is awesome, thanks for this!
Thank you for doing this. This may seem like an ignorant question but can your app open .ai files?
Not yet.

AI, like PSD, is proprietary and unfriendly to developers because Adobe's software is really complex (and they don't want to share the market). I want to write a small backend that uses one of several AI->SVG converters out there so people can use AI files in Mondrian. Unfortunately I haven't had time yet.

This is amazing. I could have really used something simple like this in the past, and really appreciate the ability to use it in the future. Seriously, thank you!
Not much to say other than: Wow. Great Job.
Played around a bit for a few minutes and threw a few of my usually handwritten SVGs at it with disastrous results. View boxes don't seem to work, dashed lines, symbols, any kind of shape reüse in general; groups are ungrouped automatically, but apparently properties defined on groups are not propagated to child elements when ungrouping. And it manages to lock up Firefox and IE completely.

Not terribly impressed so far, but then again, I'm not a designer or an artist and I manage to write SVGs that fail in various renderers due to implementation deficiencies. But those I tested were not even complex or used advanced features.

At the moment I'd guess this is aimed at the most trivial vector graphics possible, i.e. only basic shapes, stroke and fill. It might work for that, but that's well beyond what I use of SVG or Inkscape usually.

You're right, it still chokes on a lot of SVG features. It is in no way spec-complete. All I can say is hopefully people contribute and it works better for everyone. The version I'm sharing is what I've been able to muster by myself in a year between school and work.

That said, if you opened issues on Github describing how to lock it up in Firefox and IE, and listing those SVG features that it doesn't render, that would be very helpful. Cheers.

Apologies, if that came across too negative. It's just a bit frustrating when you see »Oh, nice, it's based on SVG and compares itself to Illustrator and Inkscape« and try various things you have written in the past years only to notice that none of them work.
Pardon the meta-comment, but “reüse” is just so comically HN.
Assuming ygra is German he/she probably just hit the [separate] ü key. That being said, until their follow up above I thought the comment was intended to be a parody of HN negativity.
Very cool, thanks.
Didn't work at all for the MediaCrush logo.

https://mediacru.sh/static/mediacrush_logo.svg

Is this negativity really necessary? If you're going to leave a comment about something not working at least say what went wrong and what could fix the issues you had.

I'm sick of comments like this constantly polluting HN's community with negativity.

I meant to be more useful than negative, by offering a test file that didn't work so they could try it themselves and perhaps fix the problem.

I'm sick of people being sick of this stuff.

It is not negativity, it is the real world. The author put up his wares and someone reviewed it and shared his thoughts. Hopefully, maybe, someone will come along and say "hey I checked in a fix for it!".
Really really impressive, you roxx PS: http://tutorsbox.com creator
are you actually making money off that? check my profile for a link to an open source project of mine that has similar functionality with a lot more content management features.
A little
Cool. Looks like every class room needs it.

Do users draw or write using figure or e-pen?

Artur, the linked page is almost unreadable here (Chrome OSX):

http://cl.ly/image/0F212f3X2h07

The Maven Pro font appears to be infinitely thin at weight 300, it only starts being readable at 120px+. It doesn't have a version for that weight, so the browser is [failing at] simulating that.

Looks fine for me both in Canary and Stable on Snow Leopard.
Looks fine for me as well
Is there a specific reason why you choose to implement most (all?) of the functionality yourself without building it on top of any existing libraries?
Nice simple editor web based editor, though I'd still use the fuller featured SVGEdit in most cases.

One thing that would really stand out would be an 'infinite zoom' I've seen implemented elsewhere.

Can it be used to resurrect Aldus/Macromedia/Adobe FreeHand? I still can't use anything but it and I keep a windows VM on my Mac almost only for it.
This is terrific. Been fiddling around with the pen tool. So far, not much worse than Illustrator!

A few feature requests: having the shift-c tool (convert anchor point, I think) and being able to delete anchor points would be great. Much harder to work without that. Saving also didn't work the first several times I tried (but great to see auto-saving to ¿localStorage?)

Great job. One request: Make the CMD shortcuts work for the CTRL key too. They don't seem to fire.
As someone who struggles in general with javascript this is phenomenal and makes me feel like a programming goof. Good job.
Cool, but I need separate object and direct selection arrows like Illustrator. And rulers and draggable guides and a square grid.
This is not an alternative to Illustrator.

It's a very very basic vector editor that doesn't even let you rotate things, import any standard vector formats (SVG, EPS, AI, PDF), have dotted outlines, distort, curve the text, etc etc etc.

I understand it was a lot of work, and you did a great job, but let's not pretend this implements even 1% of Illustrator.

Rotation is possible. Activate the (rotate indicating) tool and move the resize/move/rotate handles.
Ah, sorry. It works in such a non-obvious way, I missed it.
The rotation tool works exactly the way Illustrator's does.
In, it doesn't.
You don't get the point of this, do you?
1) Select an object

2) Select the rotate tool (whose icon is the universal symbol for "rotate" that can't possibly be confused with anything else)

3) Click once to define an origin

4) Click and drag to interactively rotate about that origin.

This is how the Illustrator rotate tool has worked since, literally, Illustrator 1.0.

In Illustrator you don't have to do step 1 or 3.
I think that it's terrific but does a disservice to Illustrator. It's terrific because you've built it - and what's there, works, wonderfully - but does a disservice to Illustrator because the devil is in the million details that Illustrator has already implemented. But I know you want help to make and iron out those details, so really well done!