Generative Placeholders

Use generative art as your image placeholders.

How to use

Basic usage

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

Hint: Click the preview to generate a new image.

Choose the style

cellular-automata: A pattern made up of colored cells. This is the default style and will be used if no other style is chosen.
mondrian: Art in the style of Piet Mondrian.
triangles: A colorful triangle mesh.
circles: Circles packed together.
tiles: A maze created using the 10 PRINT Commodore 64 generative art program.
cubic-disarray: Inspired by the art of Georg Nees.
joy-division: Inspired by Joy Division's Unknown Pleasures album cover.
123: Inspired by Vera Molnar's Un Deux Trois artwork.

Example cellular automata generative placeholder image

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

Example generative placeholder image in the style of Piet Mondrian

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

Example triangle mesh generative placeholder image

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

Example circle-packing generative placeholder image

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

Example tiling generative placeholder image

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

Example cubic disarray generative placeholder image

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

Example Joy Division generative placeholder image

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

Example generative placeholder image inspired by Vera Molnar's Un Deux Trois artwork

<img src="https://generative-placeholders.glitch.me/image?width=600&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.

See available palettes below.

Note: The Piet Mondrian style uses a preset color scheme.

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

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

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=600&height=300&style=cellular-automata&cells=10">

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

Triangles

gap: controls the size of the triangles

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

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

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=600&height=300&img=01">
        <img src="https://generative-placeholders.glitch.me/image?width=600&height=300&img=02">
        <img src="https://generative-placeholders.glitch.me/image?width=600&height=300&img=03">
      
```
Adding title and alt attributes

If you intend to use the images outside of small demos, be sure to include title and alt attributes.

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

Available palettes

`colors=0`

`colors=1`

`colors=2`

`colors=3`

`colors=4`

`colors=5`

`colors=6`

`colors=7`

`colors=8`

`colors=9`

`colors=10`

`colors=11`

`colors=12`

`colors=13`

`colors=14`

`colors=15`

`colors=16`

`colors=17`

`colors=18`

`colors=19`

`colors=20`

`colors=21`

`colors=22`

`colors=23`

`colors=24`

`colors=25`

`colors=26`

`colors=27`

`colors=28`

`colors=29`

`colors=30`

`colors=31`

`colors=32`

`colors=33`

`colors=34`

`colors=35`

`colors=36`

`colors=37`

`colors=38`

`colors=39`

`colors=40`

`colors=41`

`colors=42`

`colors=43`

`colors=44`

`colors=45`

`colors=46`

`colors=47`

`colors=48`

`colors=49`

`colors=50`

`colors=51`

`colors=52`

`colors=53`

`colors=54`

`colors=55`

`colors=56`

`colors=57`

`colors=58`

`colors=59`

`colors=60`

`colors=61`

`colors=62`

`colors=63`

`colors=64`

`colors=65`

`colors=66`

`colors=67`

`colors=68`

`colors=69`

`colors=70`

`colors=71`

`colors=72`

`colors=73`

`colors=74`

`colors=75`

`colors=76`

`colors=77`

`colors=78`

`colors=79`

`colors=80`

`colors=81`

`colors=82`

`colors=83`

`colors=84`

`colors=85`

`colors=86`

`colors=87`

`colors=88`

`colors=89`

`colors=90`

`colors=91`

`colors=92`

`colors=93`

`colors=94`

`colors=95`

`colors=96`

`colors=97`

`colors=98`

`colors=99`

Created by @fourtonfish View source More projects