Generative Placeholders

Use generative art as your image placeholders.

How to use

Basic usage

<img src="https://generative-placeholders.glitch.me/image?width=400&height=300">

Hint: Click the preview to generate a new image.

Choose the style

Available styles:

cellular-automata (default)
triangles
circles
tiles
cubic-disarray
joy-division
123

<img src="https://generative-placeholders.glitch.me/image?width=400&height=300&style=cellular-automata">

<img src="https://generative-placeholders.glitch.me/image?width=400&height=300&style=triangles">

<img src="https://generative-placeholders.glitch.me/image?width=400&height=300&style=circles">

<img src="https://generative-placeholders.glitch.me/image?width=400&height=300&style=tiles">

<img src="https://generative-placeholders.glitch.me/image?width=400&height=300&style=cubic-disarray">

<img src="https://generative-placeholders.glitch.me/image?width=400&height=300&style=joy-division">

<img src="https://generative-placeholders.glitch.me/image?width=400&height=300&style=123">

Tweak the look

The image generator uses the nice-color-palettes node package to pick a random color palette. You can choose a specific palette by passing an index of one of the top 100 palettes as colors.

<img src="https://generative-placeholders.glitch.me/image?width=400&height=300&style=cellular-automata&cells=20&colors=2">

Certain styles have additional parameters that you can adjust.

Cellular automata

cells: number of cells on each line

<img src="https://generative-placeholders.glitch.me/image?width=400&height=300&style=cellular-automata&cells=10">

Triangles

gap: controls the size of the triangles

<img src="https://generative-placeholders.glitch.me/image?width=400&height=300&style=triangles&gap=100">

Resources

Questions and tips

When using multiple images on the same page, how do I make each look different?

When a browser sees the same URL again, it tries to load the resource (image, JavaScript or a CSS file, etc) from the browser's cache, avoiding making the same request again.

To make each image random, you can add an extra parameter that will be ignored by this site, but will make your browser think you are requesting a new image. This can be anything, for example:
```
        <img src="https://generative-placeholders.glitch.me/image?width=400&height=300&img=01">
        <img src="https://generative-placeholders.glitch.me/image?width=400&height=300&img=02">
        <img src="https://generative-placeholders.glitch.me/image?width=400&height=300&img=03">
      
```

Have any more questions or suggestions? Feel free to reach out via email or on Twitter!

Created by @fourtonfish View source