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 |