Lineboil CLI

A command-line tool to create lineboil effects on SVG, JPG, and PNG files and export them as PNG spritesheets and animated GIFs.

Examples

SVG Input

JPG Input

Installation

npm install

Usage

node index.js generate <input> [options]

Supported Input Formats

• SVG files (.svg): Vector graphics with native support for filters
• JPG/JPEG files (.jpg, .jpeg): Raster images converted to SVG format
• PNG files (.png): Raster images with transparency support

Options

• -o, --output <path>: Output directory (default: ./output)
• -f, --frames <number>: Number of animation frames (default: 12)
• -s, --size <number>: Override output image size in pixels (optional, defaults to original SVG dimensions)
• -d, --delay <number>: GIF frame delay in milliseconds (default: 100)

Examples

# Generate lineboil effect from SVG with default settings
node index.js generate example.svg

# Generate from JPG/PNG image
node index.js generate photo.jpg
node index.js generate image.png

# Generate with custom settings
node index.js generate example.svg -o ./my-output -f 20 -s 1024 -d 80

# Create a subtle effect with fewer frames
node index.js generate artwork.jpg -f 6 -d 150

Output

The tool generates two files in the output directory:

• lineboil-spritesheet.png: PNG spritesheet containing all animation frames
• lineboil-animation.gif: Animated GIF showing the lineboil effect

How it works

Check out the blog post by Camillo Visini for the explaination of the technique: https://camillovisini.com/coding/simulating-hand-drawn-motion-with-svg-filters