Install

$ npm install blobs

<script src="https://unpkg.com/blobs"></script>

Usage

const svg = blobs(options);

Options are not sanitized. Never trust raw user-submitted values in the options.

Options

Required

Name	Type	Description
size	number	Bounding box dimensions (in pixels)
complexity	number	Shape complexity (number of points)
contrast	number	Shape contrast (randomness of point position)

Optional

Name	Type	Default	Description
color	string?	"none"	Fill color
stroke	object?	...	Stroke options
stroke.color	string	"none"	Stroke color
stroke.width	number	0	Stroke width (in pixels)
seed	string?	random	Value to seed random number generator
guides	boolean?	false	Render points, handles and stroke

Either stroke or color must be defined.

Guides will use stroke color and width if defined. Otherwise, they default to black stroke with width of 1.

Example Options Object

const options = {
   size: 600,
   complexity: 0.2,
   contrast: 0.4,
   color: "#ec576b",
   stroke: {
      width: 0,
      color: "black",
   },
   guides: false,
   seed: "1234",
};

Advanced

If you need to edit the output svg for your use case, blobs also allows for editable output.

const editableSvg = blobs.editable(options);

The output of this function is a data structure that represents a nested svg document. This structure can be changed and rendered to a string using its render function.

editableSvg.attributes.width = 1000;
const svg = editableSvg.render();

Utilities to create nodes in the editable output can be imported from blobs/editable.

import {xml} from "blobs/editable";

const xmlChild = xml("path");
xmlChild.attributes.stroke = "red";
// ...
editableSvg.children.push(xmlChild);

License

MIT