
Rough.js – Create graphics with a hand-drawn, sketchy, appearance - simonpure
https://roughjs.com/
======
dang
[https://news.ycombinator.com/item?id=22141526](https://news.ycombinator.com/item?id=22141526)

------
krat0sprakhar
If you want to use a full-fledged flowchart diagramming tool that uses this
library - checkout [https://excalidraw.com/](https://excalidraw.com/)

~~~
wantan
Terrastruct ([https://terrastruct.com](https://terrastruct.com)) supports this
too (diagramming tool specifically for software architecture)

Example:
[https://app.terrastruct.com/diagrams/1914249269](https://app.terrastruct.com/diagrams/1914249269)

~~~
vosper
Unfortunately the choice of font in the example you posted makes the diagram
harder to read than it needs to be. Legibility has been sacrificed to achieve
the hand-written look (a font that's less cursive in style might have been
okay). Not a good trade-off IMO.

Other than that I like how it looks.

------
mromanuk
I would like a plugin for Figma, using this or a similar technique to make the
strokes or fill look rough. I tend to use Figma for my SVG art, the problem is
that you can’t modify the stroke just yet, at least that’s what I read in the
plugin docs

------
DylanSp
I like this library; I used it for a tic-tac-toe game, combined with the
Amatic SC font
([https://fonts.google.com/specimen/Amatic+SC](https://fonts.google.com/specimen/Amatic+SC))
for a nice hand-drawn look.

~~~
endergen
This is great. I was using comics sans. This is a much nearer font. Thanks!

------
spankalee
Also checkout Wired Elements - a delightful set of fully interactive
components built with Rough.js that work in any framework, by the author:
[https://wiredjs.com/](https://wiredjs.com/)

------
aglionby
Good example of where this has been used
[https://www.jwilber.me/permutationtest/](https://www.jwilber.me/permutationtest/)

------
jbreckmckye
For the impatient reader: this effect is _typically_ achieved with the SVG
filter "feDisplacementMap".

