Generative Placeholders

Generative Placeholders

Use generative art as your image placeholders.

Basic usage

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

Hint: Click the preview to generate a new image.

Choose the style, tweak the look

Cellular automata

  • style=cellular-automata: a pattern made up of colored cells (this is the default style)
  • cells=X: number of cells on each line
  • colors=X: color palette (see available palettes)
Example generative placeholder image
<img src="https://generative-placeholders.glitch.me/image?width=600&height=300&style=cellular-automata&cells=10">
Example generative placeholder image
<img src="https://generative-placeholders.glitch.me/image?width=600&height=300&style=cellular-automata&cells=50">

Triangles

  • style=triangles: colorful triangle mesh
  • gap=X: controls the size of the triangles
  • colors=X: color palette (see available palettes)
Example generative placeholder image
<img src="https://generative-placeholders.glitch.me/image?width=600&height=300&style=triangles&gap=100">
Example generative placeholder image
<img src="https://generative-placeholders.glitch.me/image?width=600&height=300&style=triangles&gap=30">

Mondrian

Example generative placeholder image in the style of Piet Mondrian
<img src="https://generative-placeholders.glitch.me/image?width=600&height=300&style=mondrian">

Tiles

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

Cubic Disarray

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

Joy Division

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

123

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">

Circles

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

Resources

Questions and tips

Need help or want to share feedback or suggestions? Feel free to reach out via email or on Twitter!

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">
  

I need bigger images

The maximum image size is 2000x2000 pixels. If you need images larger than that, consider remixing this project and removing the conditions inside the routes/image.js file on lines 50 and 57.

Adding title and alt attributes

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

Available palettes

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 the colors parameter.

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