Rough.js logo

Rough.js

Draws graphics with a hand-drawn, sketchy appearance using a lightweight Canvas-based library.

Made by Preet Shihn

  • hand-drawn-animations

  • Javascript

  • Javascript Libraries

  • graphics

What is Rough.js?

The Rough.js library offers a unique canvas-based solution for creating graphics with a hand-drawn, sketchy aesthetic. By leveraging this lightweight (8k) tool, users can easily generate visuals that evoke a natural, organic feel, eschewing the typical sleek and polished digital look. The library provides a comprehensive set of primitives, including lines, curves, arcs, polygons, circles, and ellipses, as well as the ability to render SVG paths. This versatility empowers designers, artists, and developers to craft a wide range of expressive, hand-crafted-inspired graphics, from illustrations and infographics to user interface elements and interactive visualizations. Whether aiming to convey a sense of authenticity, add character to a design, or simply explore a more distinctive aesthetic, the Rough.js library offers a compelling solution for those seeking to inject a touch of human touch into their digital creations

Highlights

  • Generates hand-drawn, sketchy graphics on the canvas
  • Supports a variety of primitive shapes, including lines, curves, arcs, polygons, circles, and ellipses
  • Enables rendering of SVG paths for increased design flexibility
  • Lightweight (8k) and easy to integrate into projects
  • Versatile tool for creating expressive visuals, illustrations, and UI elements

Platforms

  • Self-Hosted
  • Web

Languages

  • English

Social