REACT-SVG-BLOB

React SVG Blob Generator. Inspired by blob shapes app original

Demo

https://codesandbox.io/s/react-svg-blob-kuzpc

Installation

$ yarn add react-svg-blob

Usage

import {SvgBlob} from 'react-svg-blob';
import {cross as crossPattern} from 'react-svg-blob/dist/lib/patterns';

<SvgBlob variant='solid' color='#00cec9' />;

<SvgBlob variant='gradient' colors={['#2980B9', '#6DD5FA']} />

<SvgBlob variant='pattern' pattern={crossPattern} color='#d1d8e0' isOutline />

<SvgBlob
  variant='image'
  image='https://source.unsplash.com/random/600x600/?plants'
/>

Options

parameter	type	default	description
variant	solid|gradient|pattern|image	undefined	The variant type of shape. Required true
isOutline	boolean	false
shapeProps.size	number	200	SVG blob path size
shapeProps.grow	number	6	Minimum size of the blob in percentage. More the smaller more the randomness
shapeProps.edges	number	6	Total nodes to create a shape. Increasing this value will add complexity to the shape
shapeProps.seed	number	undefined	It can be used to get same shape

We provide some patterns ready to use. You can find more of the pattern at Hero Patterns

Screenshot examples

License

MIT