Useless-blobs NPM

Useless Blobs

Parametrized random SVG blob creation. Playground here

Installation

npm install useless-blobs

Generate SVG Path String

There are various helpers that are exported in case you want finer control.

import generateBlobPath, { createPolygon, generatePathString } from 'useless-blobs';

const options = { 
    verts: 6, 
    width: 200, 
    height: 200, 
    irregularity: .25, 
    spikiness: .5, 
    boundingShape: 'ellipsis'
};
const smoothing = 1;

// will only generate an array of points
const polygonPoints = createPolygon(options);

// creates an svg path from an array of points and a smoothing value between them
const pathString = generatePathString(polygonPoints, smoothing);

// a helper that wraps the previous two functions into one
const otherPathString = generateBlobPath({...options, smoothing});

// no options are required
const defaultPathString = generateBlobPath();

The resulting path string from generateBlobPath or generatePathString can then be used within the d value of a <path> tag in an SVG as outline here.

Options

Option	Description	Allowed Values	Optional	Default
`verts`	Number of vertices shape will contain	Any integer >= 3	✅	6
`width`	Width in pixels of resulting shape	Any integer > 0	✅	200
`height`	Height in pixels or resulting shape	Any integer > 0	✅	200
`irregularity`	Affects deviation between angles of each point	0,1	✅	.25
`spikiness`	Affect how much a point deviates from the bounding shape	0,1	✅	.5
`boundingShape`	Defines shape points will be limited within	`rectangle` or `ellipsis`	✅	`ellipsis`
`smoothing`	Affects how jagged final curve will be	0,1	✅	1

React Component

There is also a React component exported to simplify use for React projects.

import UselessBlob from 'useless-blobs/lib/components';

<UselessBlob />

// or

<UselessBlob
    fill='red'
    stroke='blue'
    verts={12}
    height={200}
    width={500}
    irregularity={0.5}
    spikiness={0.8}
    boundingShape='rectangle'
/>

It should be noted that for the React component all props follow the same name and requirements as the options table with additional props for:

Option	Description	Allowed Values	Optional	Default
`fill`	What color to paint blob	Any color	✅	`'black'`
`stroke`	Color of stroke around blob	Any color	✅	`'transparent'`
`style`	In-line style object to apply to underlying `<svg>` tag	React in-line style object	✅	`undefined`
`pathStyle`	In-line style object to apply to underlying `<path>` tag	React in-line style object	✅	`{ transition: '.25s' }`
`className`	CSS class to apply to underlying `<svg>` tag	String	✅	`undefined`