Skip to content

Latest commit

 

History

History
41 lines (31 loc) · 1.18 KB

README.md

File metadata and controls

41 lines (31 loc) · 1.18 KB
Raw

Procedural SVG generator npm version

Procedural SVG

Overview

Automatically generate SVG assets with random paths, shapes and fill colors.

Options (all are optional)

  • Width
  • Height
  • Colors (array of hex colors, or empty array for no fill, ex: [])
  • Complexity (defaults to 'basic', but can also be set to 'complex')

Usage

Javascript

import generateSVG from 'donatello-svg';

const basicSVG = generateSVG(28, 28);
const specificColorSVG = generateSVG(28, 28, ['#cc66aa', '#ffeeff']);
const complexSVG = generateSVG(28, 28, ['#bbaa88', '#33eeff', '#ccaaee'], 'complex');

...
<div>
  {basicSVG} // Note: This is output as a string and you may need to massage the output depending on where you attempt to render it.
</div>

React

import generateSVG from 'donatello-svg';
import InlineSVG from 'svg-inline-react'; // Note: This is required in many cases to output inline SVGs.

const specificColorSVG = generateSVG(28, 28, ['#cc66aa', '#33eeff']);

...
<div>
  <InlineSVG src={specificColorSVG} />
</div>