Skip to content

sun0day/svg-sketchy

Repository files navigation

image

A Node.js CLI to sketch svg.

Features

👉 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 dot
   
outputs after sketching dot_sketch

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()