Rough.js v4.0 – hand-drawn, sketchy graphics | Hacker News Reader

Rough.js v4.0 – hand-drawn, sketchy graphics

roughjs.com

307 pointsshihn20 comments

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/

They're great for rapid wire-frame prototyping.

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

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

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

Rough.js + WE look awesome. I love that you can hand craft UI ideas in the same style if needed. Just curious - do you use any drag & drop tool with it for prototyping?

this is super awesome! thanks for sharing

Genuinely curious - why would anyone prefer this over just blocky normal graphics?

I’ve found sketchy styles to be immensely useful in getting clients to focus on UX and structure rather than getting stuck on minor irrelevant details. My background is construction, and architects do the same thing with initial concepts.

I never thought of it that way, that makes sense.

Yep, it's super common that when you show a UX prototype to a client they'll hyperfocus on things you don't want them to focus on right now like the font choice or button colors. Making it look rough and muted can help.

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) though, which would be a whole other cool aesthetic.

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... [1] https://habr.com/en/post/454376/

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

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

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-...

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

[2] https://wiredjs.com/

Excalidraw is built on top of this!

https://excalidraw.com/

Another library recently featured in HN https://news.ycombinator.com/item?id=21648968 https://github.com/jwilber/roughViz

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

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.

A thread from 2018: https://news.ycombinator.com/item?id=16571827

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.

Reply on news.ycombinator.com