Sketchy SVGs with RoughJS

I love hand-drawn graphs and I have always fantasized about applying it to vector images. That's why I was very happy to find out about RoughJS, a library that draws SVG primitives like lines, curves, arcs, polygons, circles, ellipses and paths on a Canvas in a hand-drawn style.

Applying RoughJS to some icons from Font Awesome

The tool can be very handy for given an informal look to diagrams and charts in some slides or presentations. Do check their examples page, which is very impressive.

If you have a SVG you can draw the primitives that compose it. In the next example I'm applying RoughJS to Javi Velasco's SF Palace of Fine Arts SVG from Zeit's Day, going through its paths.

RoughJS applied to a SVG of the Palace of Fine Arts in San Francisco created by Zeit (source).

Contour + RoughJS

In the past I worked on a tool called Contour that creates a SVG based on the edges detected on a bitmap image (more info on this blog post).

I wanted to test the combination of Contour and RoughJS, so I took the output of Contour for 3 music album artworks. Contour outputs a SVG with polylines, which doesn't seem to be supported by RoughJS at the moment, but it's straightforward to convert to paths.

RoughJS drawing the above SVGs with some custom options

The effect is very subtle, in part because Contour generates lots of short lines, but gives the drawing a sketchy style in some traces. Changing the “simplification” and “roughness” options allows to tweak the result.

Related Content

If you have read this far you probably like vector images and hand drawing. Eric Portis shared with me recently a SIGGRAPH 2011 paper called “Animated Construction of Line Drawings”, where they infer a plausible stroke order of a static input drawing.

The predicted stroke is comparable to the order used by human artists. I think it's really interesting, though I haven't found any actual implementation of the algorithm on a website.

Conclusion

RoughJS is another tool that pushes vector images forward, adding an artistic hand-drawn touch to them. I'm looking forward to see how the project evolves and how it is applied in different use cases.