return to table of content

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

asb
7 replies
1d6h

Also see RoughNotation <https://roughnotation.com/>, which uses RoughJS to support underlines, highlights etc.

I took some inspiration for my website (mouse over any highlighted title) <https://muxup.com/>. The write-up here aims to summarise how it works https://muxup.com/2022q3/muxup-implementation-notes#randomly... - if you click through you'll see it's really very little code.

JNRowe
4 replies
1d4h

I enjoy the general effect, but on your site the highlights are redefined as elements take focus which causes a bunch of off-putting flickering for me as I find the article I want to read. Perhaps, it is intended behaviour but I figured I'd report it in case it is not. (chrome/linux)

asb
3 replies
1d3h

Yes, redrawing on hover was a desired effect - sorry if you find it offputting.

chatmasta
2 replies
1d3h

Also I can't see it at all on mobile. (And based on your comment, I don't know if I'm missing some informational context or just some presentational razzle dazzle.)

joeframbach
0 replies
1d3h

On mobile, at least on Android, you can long-press on a title then dismiss the "open in" modal, but the hover effect remains.

asb
0 replies
1d3h

On https://muxup.com/ you should see pastel-coloured randomly drawn 'roguh' highlights for the site title and for the titles of individual articles. If you mouse over, they'll be redrawn while your mouse is hovering. If you're on mobile, you won't see that, and that's fine. It worked just fine on Android (FF or Chrome) and iPhone last time I checked, but do let me know if you're not seeing that.

It's really very simple, just thought the distillation of the 'rough' drawing technique to a couple of dozen lines of code for this use case might be of interest to some.

k__
0 replies
1d

That looks really cute, I like it!

PsyNyde
0 replies
23h22m

i like the onclick rotating doodle art more.

oniony
4 replies
1d7h
Veuxdo
1 replies
1d5h

Reminds me of paper and pencil

andygeorge
0 replies
1d4h

is that open source?

rompic
0 replies
1d7h

Excalidraw supports that library according to this page, so I assume that they use it.

Update: indeed see e.g. https://github.com/excalidraw/excalidraw/issues/362

IshKebab
0 replies
21h36m

I think that's what they use.

davidthewatson
2 replies
1d6h

Does anyone know if the libs discussed here can do a basic 3 circle Venn diagram with the intersection highlighted? I didn't see any Venn diagrams in the examples.

Thanks!

chrisweekly
0 replies
1d4h

Yes, Excalidraw can do that

JKCalhoun
0 replies
1d4h

Looks like they support SVG paths, so you could roll your own with a wrapper function.

collyw
2 replies
1d3h

Is there anything that will take a photo of hand drawn sketch and clear it up?

omoikane
0 replies
1d1h

You can get most of the way by importing the bitmap in Inkscape, trace it (shift+alt+B), simplify paths (ctrl+L, maybe multiple times). Usually some manual edits after that is needed to clean things up.

Depending on the image, often I just import the bitmap and trace all the edges manually.

mym1990
0 replies
1d2h

Topaz Labs software

jarek-foksa
1 replies
1d5h

I used it to implement the "Sketchify" generator in Boxy SVG (https://boxy-svg.com/ideas/23). It is especially nice that Rough.js has very few dependencies and can run inside a web worker.

lionkor
0 replies
1d3h

Firefox android is not supported? lol

cadr
1 replies
1d1h

I remember using some Java "napkin" look and feel years ago. Really great for getting the idea across that this really is a prototype and I didn't just finish all the work in 30 minutes.

SamBam
0 replies
19h48m

Yup. a) it allows people not to get hung up on the details, but just as importantly b) it shows creative people to look at the prototype and imagine other possibilities. A finished-looking mock-up tends to shrink the world of possibilities.

beiller
1 replies
1d1h

Is there a simple diagram app / site / etc. that uses this? I love the look.I'd love to diagram things using it. Love the fill types which could be great for accessibility.

sadeshmukh
0 replies
1d1h

This looks just like Excalidraw, which happens to be their first sponsor. I love Excalidraw, and I'll pull it open for any quick diagramming I need to do.

zurtri
0 replies
20h35m

I love the effects. I use it on https://horserecords.info/.

yboris
0 replies
1d2h

If using Python & Matplotlib, consider using XKCD style to communicate that a graph is imprecise and should be read that way.

https://matplotlib.org/stable/gallery/showcase/xkcd.html#sph...

veg
0 replies
23h9m

Absolutely love this library. Easy to use and stood the test of time. Used it for charts on https://usdc.cool

usuxhxvg
0 replies
1d1h

Don’t take this is criticism at all because I think the value for what you get is worth the 3 kB. But I am curious. Why is it even that big?

spankalee
0 replies
1d2h

Wired Elements are a set of web components by the same author that use Rough.js to render in a sketchy style. They work in any framework.

https://wiredjs.com/

robbiejs
0 replies
1d6h

Rough.js is very charming. I use it to draw a data grid on https://www.vanillacomponents.com/.

kasbah
0 replies
1d5h
jwilber
0 replies
23h36m

Awhile back I built a dataviz library off roughjs: roughviz

https://www.jwilber.me/roughviz/

The author, Preet, has worked on many other cool projects and I recommend checking out his site: https://shihn.ca/creations/

fskpf
0 replies
18h51m

Great lib! Used it to build an svg2roughjs wrapper that converts your everyday SVG file to a sketch: https://github.com/fskpf/svg2roughjs

darrinm
0 replies
1d2h

Love rough.js. Thanks Preet Shihn! I used it to create Sketchy Shapes you can add to Hatch projects. Fun to play with the parameters in realtime: https://hatch.one/@darrin/sketchy-shapes/edit

dang
0 replies
20h35m

Related:

Show HN: Sketchy-appearance interactive timeline made using RoughJS - https://news.ycombinator.com/item?id=29563678 - Dec 2021 (1 comment)

Rough.js – Create graphics with a hand-drawn, sketchy, appearance - https://news.ycombinator.com/item?id=29555853 - Dec 2021 (23 comments)

Show HN: Hand-drawn timelines using RoughJS - https://news.ycombinator.com/item?id=23998225 - July 2020 (1 comment)

Rough.js – Create graphics with a hand-drawn, sketchy, appearance - https://news.ycombinator.com/item?id=22787187 - April 2020 (13 comments)

Rough.js v4.0 – hand-drawn, sketchy graphics - https://news.ycombinator.com/item?id=22141526 - Jan 2020 (20 comments)

Show HN: RoughJS – Create hand-drawn graphics using JavaScript - https://news.ycombinator.com/item?id=16571827 - March 2018 (92 comments)

Show HN: Rough.js simple lib to create hand-drawn, sketchy, scribbly graphics - https://news.ycombinator.com/item?id=13662347 - Feb 2017 (1 comment)

collyw
0 replies
1d3h

Is there anything that will take a hand drawn sketch and clean it up?