8 ms·
Rough.js: Create graphics with a hand-drawn, sketchy, appearance
- dang 3y agoRelated: Show HN: Sketchy-appearance interactive timeline made using RoughJS - https://news.ycombinator.com/item?id=29563678 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 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 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 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 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 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 https://news.ycombinator.com/item?id=13662347 - Feb 2017 (1 comment)
- zurtri 3y agoI love the effects. I use it on https://horserecords.info/ https://horserecords.info/.
- fskpf 3y agoGreat lib! Used it to build an svg2roughjs wrapper that converts your everyday SVG file to a sketch: https://github.com/fskpf/svg2roughjs https://github.com/fskpf/svg2roughjs
- oniony 3y agoReminds me of https://excalidraw.com/ https://excalidraw.com/
- rompic 3y agoExcalidraw 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 https://github.com/excalidraw/excalidraw/issues/362
- oniony 3y agoAh, that explains why they're so similar then!
- deleted 3y ago[deleted]
- Veuxdo 3y agoReminds me of paper and pencil
- andygeorge 3y agois that open source?
- IshKebab 3y agoI think that's what they use.
- asb 3y agoAlso see RoughNotation <https://roughnotation.com/ 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/ https://muxup.com/>. The write-up here aims to summarise how it works https://muxup.com/2022q3/muxup-implementation-notes#randomly-generated-title-highlights https://muxup.com/2022q3/muxup-implementation-notes#randomly... - if you click through you'll see it's really very little code.
- JNRowe 3y agoI 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 3y agoYes, redrawing on hover was a desired effect - sorry if you find it offputting.
- chatmasta 3y agoAlso 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 3y agoOn mobile, at least on Android, you can long-press on a title then dismiss the "open in" modal, but the hover effect remains.
- asb 3y agoOn https://muxup.com/ 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.
- davidthewatson 3y agoDoes 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!
- JKCalhoun 3y agoLooks like they support SVG paths, so you could roll your own with a wrapper function.
- chrisweekly 3y agoYes, Excalidraw can do that
- robbiejs 3y agoRough.js is very charming. I use it to draw a data grid on https://www.vanillacomponents.com/ https://www.vanillacomponents.com/.
- kasbah 3y agoI use this with https://wiredjs.com https://wiredjs.com for creating interactive mockups. E.g. https://edea-dev.gitlab.io/mockups/ https://edea-dev.gitlab.io/mockups/ (source: https://gitlab.com/edea-dev/mockups https://gitlab.com/edea-dev/mockups) https://otfn.development.fabcity.hamburg/git-pdm-mockups/ https://otfn.development.fabcity.hamburg/git-pdm-mockups/
- jarek-foksa 3y agoI used it to implement the "Sketchify" generator in Boxy SVG (https://boxy-svg.com/ideas/23 https://boxy-svg.com/ideas/23). It is especially nice that Rough.js has very few dependencies and can run inside a web worker.
- stjohnswarts 3y agoeeep chrome engine based browsers only
- lionkor 3y agoFirefox android is not supported? lol
- collyw 3y agoIs there anything that will take a hand drawn sketch and clean it up?
- collyw 3y agoIs there anything that will take a photo of hand drawn sketch and clear it up?
- mym1990 3y agoTopaz Labs software
- omoikane 3y agoYou 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.
- yboris 3y agoIf 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#sphx-glr-gallery-showcase-xkcd-py https://matplotlib.org/stable/gallery/showcase/xkcd.html#sph...
- spankalee 3y agoWired 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/ https://wiredjs.com/
- darrinm 3y agoLove 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 https://hatch.one/@darrin/sketchy-shapes/edit
- cadr 3y agoI 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 3y agoYup. 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.
- usuxhxvg 3y agoDon’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?
- beiller 3y agoIs 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 3y agoThis 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.
- jwilber 3y agoAwhile back I built a dataviz library off roughjs: roughviz https://www.jwilber.me/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/ https://shihn.ca/creations/
- veg 3y agoAbsolutely love this library. Easy to use and stood the test of time. Used it for charts on https://usdc.cool https://usdc.cool