
Rough.js v4.0 – hand-drawn, sketchy graphics - shihn
https://roughjs.com/posts/release-4.0/
======
spankalee
If you like this, be sure to check out Wired Elements - a set of 20+ fully
working, wire-frame style web components built with Rough.js (by the author of
Rough.js): [https://wiredjs.com/](https://wiredjs.com/)

They're great for rapid wire-frame prototyping.

~~~
syspec
I’ve seen this attempted before to operate success, but this is the best
execution I have seen of this idea!

It’s dynamically rough so it’s different each time, but it’s not over done

~~~
shihn
wired-elements could be adapted to v4.0 of roughjs, which supports random
number seeding. Causing the shape to remain the same, once generated.

~~~
ygra
You could do the same with 3.1 with generators, I believe.

------
hirenj
I’m using this in a scientific drawing tool that I put together - it was
remarkably easy to integrate, and the sketch aesthetic is great for
presentations or when you wish to convey uncertainty.

I’m still hanging out for a browser implementation of Fiziko
([https://news.ycombinator.com/item?id=21651240](https://news.ycombinator.com/item?id=21651240))
though, which would be a whole other cool aesthetic.

~~~
tauchunfall
There is some code [0] for generation of coastal lines in cartographic maps
(text in french, code in JavaScript). It's kind of similar.

The blog post [1] about fiziko describes how it calculates parallel bezier
curves using line intersection and curves of varying thinkness. The code about
the coastal lines also uses a similar technique and describes how to get the
result step by step.

[0] [https://observablehq.com/@linard-y/chemin-decale-offset-
path...](https://observablehq.com/@linard-y/chemin-decale-offset-paths) [1]
[https://habr.com/en/post/454376/](https://habr.com/en/post/454376/)

------
andreareina
Somewhat related: paper.css[1], a stylesheet for getting that rough look in
your html components.

[1] [https://www.getpapercss.com/](https://www.getpapercss.com/)

------
andrenotgiant
If you have another library that builds SVG charts or diagrams, Rough.js is
really fun and usually very simple to include.

When combined with a handwritten font like humour sans[0] You can instantly
turn a chart into something that looks more like an XKCD drawing.

No idea why, but I find the hand-drawn look is universally more engaging for
charts and diagrams, causing people to actually pay attention and ask
questions. It looks like some of the example links[1] need updating. But the
WiredJS[2] site is a good demo of the look I am describing.

[0] [https://github.com/shreyankg/xkcd-
desktop/blob/master/Humor-...](https://github.com/shreyankg/xkcd-
desktop/blob/master/Humor-Sans.ttf)

[1]
[https://github.com/pshihn/rough/wiki/Examples](https://github.com/pshihn/rough/wiki/Examples)

[2] [https://wiredjs.com/](https://wiredjs.com/)

------
brandly
Excalidraw is built on top of this!

[https://excalidraw.com/](https://excalidraw.com/)

------
johnx123-up
Another library recently featured in HN
[https://news.ycombinator.com/item?id=21648968](https://news.ycombinator.com/item?id=21648968)
[https://github.com/jwilber/roughViz](https://github.com/jwilber/roughViz)

~~~
shihn
RoughViz is awesome, and it also used RoughJS for rendering.

------
golergka
I've just been toying with an idea of a canvas-based game and wanted to use
hand-drawn graphics style – and with this library, it looks like I can save
money on the art and have animations for free, too! Thanks so much for posting
this.

------
dang
A thread from 2018:
[https://news.ycombinator.com/item?id=16571827](https://news.ycombinator.com/item?id=16571827)

------
RobKohr
It would be nice if I didn't have to have html elements for this, but instead
it would be a js or css that you applied and all the normal elements would be
automatically rendered in sketchy style.

