Rough.js – Create graphics with a hand-drawn, sketchy, appearance | Hacker News Reader

Rough.js – Create graphics with a hand-drawn, sketchy, appearance

roughjs.com

101 pointssimonpure13 comments

https://news.ycombinator.com/item?id=22141526

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

I misread and thought this worked in the other direction. I’m used to working on a real whiteboard and I’m still to find a flow that works for me while nutting out architecture ideas with the team remotely. The best I’ve found so far is to scratch a little in Figma and then rework into real objects as we go. Anyone else have other tools for this?

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

Example: https://app.terrastruct.com/diagrams/1914249269

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.

Doesn't seem to work on my iPad

What’s the symptom? It should work

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

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) for a nice hand-drawn look.

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

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/

Good example of where this has been used https://www.jwilber.me/permutationtest/

For the impatient reader: this effect is typically achieved with the SVG filter "feDisplacementMap".

Reply on news.ycombinator.com