Image placeholders are base64 encoded datauri stringified svg files. These strings can be used in place of a src attribute in HTML, or as background image defined in css.

// input

Fiona(1322672).img()

// output

data:image/svg+xml;utf8,%0A%20...etc...3C%2Fsvg%3E%0A%20%20

Scalable placeholder images

With default options, the image width and height of 1000px, and The colours will be chosen randomly.

<img src={Fiona(seed).img()} style={{
  width: 100,
  height: 100,
  borderRadius: '50%'
}} />
        

Custom colours and size

You can also customise colours by passing an array of objects definng gradients...

<img src={Fiona(seed).img({
  height: 200,
  width: 400,
  bg: '#d4e1ec',
  colors: [
    { start: '#d24188',
        end: '#ffe0e0' },
    { start: '#5056a9',
        end: '#d4e1ec' }
  ]
})} alt="" />