Skip to content

jbukuts/useless-blobs

Repository files navigation

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

About

Parametrized random SVG blob creation

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published