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)
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 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.
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.
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.
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.
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.
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.
40 comments
[ 5.3 ms ] story [ 96.2 ms ] threadUpdate: indeed see e.g. https://github.com/excalidraw/excalidraw/issues/362
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.
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.
Thanks!
https://edea-dev.gitlab.io/mockups/ (source: https://gitlab.com/edea-dev/mockups)
https://otfn.development.fabcity.hamburg/git-pdm-mockups/
Depending on the image, often I just import the bitmap and trace all the edges manually.
https://matplotlib.org/stable/gallery/showcase/xkcd.html#sph...
https://wiredjs.com/
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/
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)