Skip to content
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
Cannot retrieve contributors at this time

The legacy API exists to preserve compatibility for users importing the package using a script tag. Because serves the latest version of the package if no version is specified, I can't break backwards compatibility, even with a major release. This API also preserves a few features that could potentially still be useful to some users (guide rendering and editable svg).


// $ npm install blobs
const blobs = require("blobs");
<script src=""></script>


const svg = blobs(options);

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



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


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",


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

New elements can be added anywhere in the hierarchy.

const xmlChild = blobs.xml("path");
xmlChild.attributes.stroke = "red";
// ...