3 ms·
Rough.js – Create graphics with a hand-drawn, sketchy, appearance
- krat0sprakhar 7y agoIf you want to use a full-fledged flowchart diagramming tool that uses this library - checkout https://excalidraw.com/ https://excalidraw.com/
- aidos 7y agoI 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?
- wantan 7y agoTerrastruct (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 7y agoUnfortunately 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.
- dirtydroog 7y agoDoesn't seem to work on my iPad
- vjeux 7y agoWhat’s the symptom? It should work
- DylanSp 7y agoI 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 7y agoThis is great. I was using comics sans. This is a much nearer font. Thanks!
- spankalee 7y agoAlso 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/
- jbreckmckye 7y agoFor the impatient reader: this effect is typically achieved with the SVG filter "feDisplacementMap".
- mromanuk 7y agoI 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
- aglionby 7y agoGood example of where this has been used https://www.jwilber.me/permutationtest/ https://www.jwilber.me/permutationtest/
- dang 7y agohttps://news.ycombinator.com/item?id=22141526 https://news.ycombinator.com/item?id=22141526