# Sketchy SVGs with RoughJS

> Applying RoughJS to vector images to get a hand-drawn effect.

Published 2018-03-26 by José M. Pérez · https://jmperezperez.com/blog/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](https://roughjs.com/), a library that draws SVG primitives like lines,
curves, arcs, polygons, circles, ellipses and paths on a Canvas in a hand-drawn
style.

<iframe height="300" className="w-full" scrolling="no" title="Rough.js + Font Awesome" src="https://codepen.io/milesmanners/embed/RMVGbd?default-tab=result" frameBorder="no" loading="lazy" allowTransparency allowFullScreen>
  See the Pen <a href="https://codepen.io/milesmanners/pen/RMVGbd">
  Rough.js + Font Awesome</a> by Miles Manners (<a href="https://codepen.io/milesmanners">@milesmanners</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

<p className="text-xs">Applying RoughJS to some icons from [Font Awesome](https://fontawesome.com/)</p>

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](https://github.com/pshihn/rough/wiki/Examples), 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](https://x.com/javivelasco)'s SF Palace of Fine Arts SVG from
[Zeit's Day](https://zeit.co/day), going through its paths.

<iframe height="500" className="w-full" scrolling="no" title="RoughJS - Zeit's Day SVG" src="https://codepen.io/jmperez/embed/QmqdwQ?default-tab=result" frameBorder="no" loading="lazy" allowTransparency allowFullScreen>
  See the Pen <a href="https://codepen.io/jmperez/pen/QmqdwQ">
  RoughJS - Zeit's Day SVG</a> by José Manuel Pérez (<a href="https://codepen.io/jmperez">@jmperez</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

<p className="text-xs">RoughJS applied to a SVG of the Palace of Fine Arts in San Francisco created by
Zeit ([source](https://zeit.co/day)).</p>

#### Contour + RoughJS

In the past I worked on a tool called
[Contour](https://github.com/JMPerez/contour) that creates a SVG based on the
edges detected on a bitmap image (more info on [this blog
post](https://jmperezperez.com/blog/drawing-edges-svg)).

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](https://codepen.io/jakealbaugh/pen/GZwgzV).

<iframe height="600" className="w-full" scrolling="no" title="Rough JS - Contour" src="https://codepen.io/jmperez/embed/dmzdeb?default-tab=result" frameBorder="no" loading="lazy" allowTransparency allowFullScreen>
  See the Pen <a href="https://codepen.io/jmperez/pen/dmzdeb">
  Rough JS - Contour</a> by José Manuel Pérez (<a href="https://codepen.io/jmperez">@jmperez</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

<p className="text-xs">RoughJS drawing the above SVGs with some custom options</p>

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](https://github.com/pshihn/rough/wiki)
allows to tweak the result.

#### Related Content

If you have read this far you probably like vector images and hand drawing.
[Eric Portis](https://x.com/etportis) shared with me recently a SIGGRAPH
2011 paper called “[Animated Construction of Line
Drawings](https://graphics.stanford.edu/~niloy/research/animated_construction_line_drawing/animatedConstructionLineDrawing_sigga11.html)”,
where they infer a plausible stroke order of a static input drawing.

<iframe className="aspect-video w-full" width="720" height="405" src="https://www.youtube.com/embed/kme8xbb0sug" frameBorder="0" allowFullScreen loading="lazy"></iframe>

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.