Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including blobs with all npm packages installed. Try it out:

var blobs = require("blobs")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

blobs v2.1.0

Random blob generation and animation

The legacy API exists to preserve compatibility for users importing the package using a script tag. Because unpkg.com 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).


Install

// $ npm install blobs
const blobs = require("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

NameTypeDescription
sizenumberBounding box dimensions (in pixels)
complexitynumberBlob complexity (number of points)
contrastnumberBlob contrast (randomness of point position)

Optional

NameTypeDefaultDescription
colorstring?"none"Fill color
strokeobject?...Stroke options
stroke.colorstring"none"Stroke color
stroke.widthnumber0Stroke width (in pixels)
seedstring?randomValue to seed random number generator
guidesboolean?falseRender 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();

New elements can be added anywhere in the hierarchy.

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free