excalidraw/rough

Rough.js is a lightweight graphics library that lets you draw shapes with a sketchy, hand-drawn appearance on the web. Instead of rendering perfectly clean lines and geometrically flawless circles, it adds a wobbly, organic quality to everything, making it look like someone quickly doodled it on paper. You can draw rectangles, circles, ellipses, lines, arcs, polygons, and even complex SVG paths, all with that casual sketched aesthetic. The library works with both Canvas and SVG, which are the two main ways browsers render graphics. At a high level, you tell it what shape to draw and where, and it applies algorithms that introduce controlled imperfections, slight deviations, wavy edges, and overlapping strokes. You can fine-tune the effect: a "roughness" setting controls how messy the lines look, a "bowing" setting warps the shape, and fill styles range from cross-hatching and zigzag patterns to solid colors. You can also adjust things like the angle and spacing of hatch lines. Anyone building a web app where a polished, corporate look would feel too stiff could benefit from this. Imagine a wireframing tool like Excalidraw (which is listed as a sponsor), a brainstorming app, a whiteboard product, or an educational site that wants diagrams to feel approachable and informal. A product team sketching architecture diagrams or user flows could use it to give their visuals a collaborative, whiteboard-like quality rather than a rigid, diagrammed feel. Diagramming tools like diagrams.net and Terrastruct also back the project. The library is notably tiny, under 9 kilobytes, so it adds almost no weight to a web application. Some of its core drawing algorithms were adapted from an earlier project called "handy" built for Processing, and the SVG arc conversion logic came from Mozilla's codebase. It's open source under the MIT license, so it's free to use in commercial projects.