Transform images to SVG using primitive shapes.

This library renders raster images to SVG images The algorithm repeatedly generates and mutates shapes, keeping only those that closely match the original bitmap.

Effectively it plays the card game "snap" with shapes until it finds a good match.

The code has largely been ported from the last known good fork of cutout which itself is derived from Primitive.

As per original, this has

• No native, non-javascript dependencies (so no node-canvas, as that relies on Cairo)
• No browser specific APIs (even though it can be bundled for the browser without any problems)
• Modular and not tied to a single implementation, so it can fit in any project

New features

• Ported to Typescript and ES6
• Replaced d3 randomNormal with a faster random algorithm (gteat) for shape generation that has a greater central bell curve (anecdotally better fitting in fewer iterations).
• Fixed a race condition causing NaNs in randomNormal only seen after a 5K+ iterations caused by a bug in the original d3 randomNormal implementation.
• Replaced missing "dainty" utility lib npm dependency with a small function to do the same thing (thanks go to swanie21's svg info page svg-shapes for the crash course).
• Provided a direct runner.ts using Jimp to use with your own images. (Original used direct ndarrays or the cutout-cli project which is now unavailable).
• Added open licenced pexels.com example images.
• Cleaned up/modernised the code (an ongoing thing),

Additionally, I'm investigating further performance improvements using webworkers to split the variants work over multiple threads.

Raster input	Svg result

Note that this is only a quickly created script with a hardcoded config for my own testing but felt it would be useful for others to try it out before using the API.

npm install -g tsx
tsx runner.ts images/robot.png ./robot.svg

npm run build
node ./dist/runner.js images/robot.png ./robot.svg

Auto stepping with [options.steps]

return new ShapeSnap( target, [options] ).autostep().svg

Within a for loop

for (let i = 0; i < steps; i++) {
    shapesnap.step(); // number of rendered shapes
}
return shapesnap.svg;

Get the current image

Get the current svg

Get the current internal model of shapes

Get the current difference

Add a single new shape

Adds the option.steps number of steps with each 10% progression passed to the (optional) callback. If no callback is specified it outputs to the console.

• Primitive
• Primitive.js
• Geometrize
• Ismay for the original implementation.
• Piwodlaiwo for retaining a fork of the original.

MIT