Posted in
4469
11:56 pm, December 16, 2021
Rough JS - Create graphics with a hand-drawn, sketchy, appearance
Rough.js is a small (<9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths.
Testing Notes
I can get the 1st rectangle almost working (except the bottom... do we need that? :), but the other bits not working, must be missing something here. I think the script was crashing due to it referencing the svg variable. Fixed now.
I actually cant think of what i would use this library for, but its cool anyway.
Related Links
Rough JS - Create graphics with a hand-drawn, sketchy, appearance Demo
View Demo Full Screen View Demo New Tab
Rough JS - Create graphics with a hand-drawn, sketchy, appearance Code
HTML
<h2>Draw a Rectangle</h2>
<canvas id="canvas"></canvas>
<h2>Draw a Circle</h2>
<canvas id="canvas2"></canvas>
CSS
#canvas {
height:180px;
}
Scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/rough.js/3.1.0/rough.js"></script>
Javascript
const rc = rough.canvas(document.getElementById('canvas'));
let node = rc.rectangle(10, 10, 200, 170); // x, y, width, height
// svg.appendChild(node);
const rc2 = rough.canvas(document.getElementById('canvas2'));
rc2.circle(40, 40, 80, {
fill: "rgb(10,150,10)",
fillWeight: 3 // thicker lines for hachure
});
External Link for Rough JS - Create graphics with a hand-drawn, sketchy, appearance
Related Tags
Add Comment
Other Items in javascript
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript