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 |