Rough.js is a graphics library that lets you draw in a sketchy hand-drawn like style. It supports drawing using SVG paths and works with both Canvas and SVG.
Installation & Usage
You can simply use npm to install Rough.js.
npm install --save roughjs
You can use the library like below in your code. You can view the full API here.
import rough from 'roughjs';
Rough.js Usage :
Below are some examples on how you can Rough.js to create hand drawn sketchy appearance.
Lines & Ellipses :
rc.circle(80, 120, 50); // centerX, centerY, diameter rc.ellipse(300, 100, 150, 80); // centerX, centerY, width, height rc.line(80, 120, 300, 100); // x1, y1, x2, y2
Filling
rc.circle(50, 50, 80, { fill: 'red' }); // fill with red hachure
rc.rectangle(120, 15, 80, 80, { fill: 'red' });
rc.circle(50, 150, 80, {
fill: "rgb(10,150,10)",
fillWeight: 3 // thicker lines for hachure
});
rc.rectangle(220, 15, 80, 80, {
fill: 'red',
hachureAngle: 60, // angle of hachure,
hachureGap: 8
});
rc.rectangle(120, 105, 80, 80, {
fill: 'rgba(255,0,200,0.2)',
fillStyle: 'solid' // solid fill
});
Sketching Styles :
rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' });
rc.rectangle(120, 15, 80, 80, { roughness: 2.8, fill: 'blue' });
rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });
Wired Elements :
If you’re looking for more applications of Rough.js, you can check out Wired Elements.
A set of common UI elements with a hand-drawn, sketchy look. These can be used for wireframes, mockups, or just the fun hand-drawn look.
The elements are drawn with enough randomness that no two renderings will be exactly the same — just like two separate hand-drawn shapes.
You can check out the project on Github. You can check out the showcase website here.
Wired Elements can also be used with the below framework.
Looking to use Rough.js for your project ? You can check out more details here.
If you’re looking for more Web Design tips, you can check them out here.
