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

372 pointsedward39 comments

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.

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)

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

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

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

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.

That looks really cute, I like it!

i like the onclick rotating doodle art more.

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)

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/

I use this with https://wiredjs.com for creating interactive mockups. E.g.

https://edea-dev.gitlab.io/mockups/ (source: https://gitlab.com/edea-dev/mockups)

https://otfn.development.fabcity.hamburg/git-pdm-mockups/

Reminds me of https://excalidraw.com/

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

Ah, that explains why they're so similar then!

Reminds me of paper and pencil

is that open source?

I think that's what they use.

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/

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.

Firefox android is not supported? lol

eeep chrome engine based browsers only

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

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

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

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.

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.

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

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

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.

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.

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

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!

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

Yes, Excalidraw can do that

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?

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

Topaz Labs software

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.

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

Reply on news.ycombinator.com