sun0day / svg-sketchy

A Node.js CLI to sketch svg.

A Node.js CLI to sketch svg.

Features [WIP]

• ✏️ Converting svgs to hand-drawn style.
• 🍀 Compatible with .dot and .mmd formats.

👉 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

Sketching .dot files is not much different than sketching .svg. Suppose we have a file named hello_world.dot:

digraph G {Hello->World}

After sket hello_world.dot, there would be a new svg hello_world.svg like:

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

// start transforming
sketcher.run()

svg-sketchy's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore: bump up eslint version to v9

Detected dependencies

github-actions

.github/workflows/CI.yml

• actions/checkout v4
• pnpm/action-setup v3
• actions/setup-node v4

.github/workflows/publish.yml

• actions/checkout v4
• pnpm/action-setup v3
• actions/setup-node v4

npm

package.json

• @antfu/eslint-config ^2.16.0
• @changesets/cli ^2.27.1
• @types/node ^20.12.7
• @vitest/coverage-v8 ^1.4.0
• @vitest/ui ^1.4.0
• eslint ^8.0.0
• lint-staged ^15.2.2
• simple-git-hooks ^2.11.1
• vitest ^1.4.0

packages/cli/package.json

• puppeteer ^22.6.3
• chalk ^5.3.0
• commander ^12.0.0
• fast-glob ^3.3.2
• ora ^8.0.1
• svg2roughjs ^3.2.0
• tsup ^8.0.2

packages/client/package.json

• @viz-js/viz ^3.4.0
• svg2roughjs ^3.2.0
• typescript ^5.2.2
• vite ^5.1.6

---

• Check this box to trigger a request for Renovate to run again on this repository