Features

• :pencil2: Converting svgs to hand-drawn style.
• :four_leaf_clover: Compatible with .dot and .mmd formats.

:point_right: Try it online

Install

$ npm i -g svg-sketchy

Usage

Used as CLI

sketch .svg

$ sket hello_world.svg # sketch single svg and override it
$ sket hello_world.svg -r /home  # sketch svg in another directory
$ sket hello_*.svg # sketch multiple svgs which paths start with "hello_" and override them
$ sket world.svg -o /home/hello_[name].svg # sketch svg and output it to a new directory with a new name "hello_world.svg"

sketch .dot & .mmd

Sketching .dot & .mmd files is not much different than sketching .svg. Suppose we have two files named hello_world.dot and hello_world.mmd, after sketching, the outputs would look like:

||hello_world.dot|hello_world.mmd| |----|:-----:|:-----:| |dsl|digraph G {Hello->World}| graph TB\nhello-->world |cmd|sket hello_world.dot | sket hello_world.mmd |outputs without sketching|| |  |  | |outputs after sketching||

customize sketch style

Try it online to see how different sketch configs affect the final svg output.

CLI options

|option|default|description| |----|----|----| -r, --root <svg_root_dir> | cwd |Svg files root directory, ignored when [svg_files] is absolute. -o, --output <svg_out_file> |"{cwd}/[name].svg"| Svg files output directory and filename, use "[name]" to keep the original svg filename. -f, --font <font_family> |"Comic Sans MS, cursive"| Font with which text elements should be drawn, setting to "null" will use the text element's original font family. --rough <roughjs_config> |-| Rough.js config, see roughjs options. e.g: "roughness=0.5,bowing=5". --no-rand |false| Whether to disable randomize Rough.js' fillWeight, hachureAngle and hachureGap. --no-fill |false|Whether to disable sketch pattern fills/strokes or just copy them to the output. --pencil |false|Whether to apply a pencil effect on the SVG rendering.

Used as API

You can also use svg-sketchy in Node.js env.

import { SVGSketcher } from 'svg-sketchy'

// create a SVGSketcher instance
const sketcher = new SVGSketcher({
  target: 'world.svg',
  root: './', // <--> -r, --root
  output: '/home/hello_[name].svg', // <--> -o, --output
  fontFamily: 'arial', // <--> -f, --font
  roughConfig: { // <--> --rough
    roughness: 0.5,
    bowing: 5
  },
  randomize: false, // <--> --no-rand
  sketchPatterns: false, // <--> --no-fill
  pencilFilter: true, // <--> --pencil
})

// transforming
await sketcher.run()