Skip to content
random svg blob generator
TypeScript HTML
Branch: master
Clone or download
Latest commit fd576ca Nov 5, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets simplify playground + add edit hint Sep 10, 2019
editable remove xml helpers from standard import Nov 4, 2019
internal remove xml helpers from standard import Nov 4, 2019
testing remove xml helpers from standard import Nov 4, 2019
.gitignore add snapshot tests Sep 10, 2019
.npmignore ignore unnecessary files in npm tarball Sep 8, 2019
CHANGELOG.md update changelog Nov 5, 2019
CNAME Create CNAME Sep 9, 2019
LICENSE
README.md remove xml helpers from standard import Nov 4, 2019
index.html update changelog Sep 11, 2019
index.ts remove xml helpers from standard import Nov 4, 2019
package.json update changelog Nov 5, 2019
rollup.config.ts generate sourcemaps Sep 8, 2019
tsconfig.json add rollup to package module Jan 9, 2019

README.md



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



You can’t perform that action at this time.