Utilizes Rough.js to convert an SVG to a hand-drawn visualization.

Try the sample application here.

Just install it from the NPM registry with

npm install --save svg2roughjs

or pack it yourself with npm pack and depend on the tar ball to import Svg2Roughjs.

"dependencies": {
  "svg2roughjs": "<path-to>/svg2roughjs-<version>.tgz"
},

For example see /sample-application/ which is a simple web application with controls to load some sample SVG files and change some of Rough.js parameters.

Then you can import it as usual

import Svg2Roughjs from 'svg2roughjs'

and instantiate it with an output div in which the canvas should be created. Setting an SVGSVGElement as svg triggers the drawing.

const svg2roughjs = new Svg2Roughjs('#output')
const svg = document.getElementById('some-svg-element')
svg2roughjs.svg = svg // or maybe use the DOMParser to load an SVG file instead

• Svg2Roughjs: The main class for the conversion.
• RenderMode: An enum that is used to switch between SVG and CANVAS rendering.

• constructor(target, renderMode?, roughConfig?)

  Creates a new Svg2Rough.js instance.

  target may either be a selector for a parent HTML element into which a new canvas or SVG should be created, or directly an HTMLCanvasElement or SVGSVGElement that should be used for the output.

  The optional renderMode defaults to RenderMode.SVG if the target is a parent element selector, otherwise defaults to the respective mode.

• redraw()

  Clears the output canvas or SVG and processes the input svg anew.

Some sample images with different Svg2rough.js settings. Try it yourself here.

SVG	Sketch
(created with yEd Live)
(created with yEd Live)
(created with yEd Live)

• Rough.js – Draws the hand-drawn elements
• svg-pathdata – Parses SVGPathElements
• TinyColor – Color manipulation
• units-css – CSS units parsing

MIT License © Fabian Schwarzkopf and Johannes Rössel