svg

A SVG Blob Generator Build With React

Aug 16, 2021
A SVG Blob Generator Build With React

REACT-SVG-BLOB

A SVG Blob Generator Build With React, Inspired by blob shapes app original.

REACT-SVG-BLOBv

View Demo View Github

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

parametertypedefaultdescription
variant`solid\gradient\pattern\
isOutlinebooleanfalse
shapeProps.sizenumber200SVG blob path size
shapeProps.grownumber6Minimum size of the blob in percentage. More the smaller more the randomness
shapeProps.edgesnumber6Total nodes to create a shape. Increasing this value will add complexity to the shape
shapeProps.seedstringundefinedIt can be used to get same shape

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

Recommended