I'm not a particularly talented graphic artist and previously I had created almost all of my vector artwork using Inkscape, which is usually very awesome except that I don't like its Mac support (it relies on XQuartz). I recently switched to using [Opacity](http://likethought.com/opacity/) which is a really awesome alternative and definitely worth the price.

The main benefit for me, as a programmer, is that as well as 1x and 2x PNG export (which is handy for app icons) it can also handle exporting source code for Mac, iOS and HTML5 canvas. Another cool feature is that you can define variables for angles, positions and colors so you can quickly modify and customize the appearance of your exported images.

The exported code is by no means perfect and it could do with optimizations that you may wish to do manually (such as creating functions for repeated components) but it saves a hell of a lot of time.

I created my site icon (the coffee mug with the brackets inside) using Opacity, and thanks to the HTML5 export, I've been able to create an interactive version, which you can play with below. I did have to make a couple of minor changes to the source to get it working perfectly, however you should be able to enter colors and text. If you are using Chrome, you should be able to use a color wheel to enter the colors, however in Firefox you have to manually enter the hex code.