Generative Placeholders

Generative Placeholders

Use generative art as your image placeholders.

How to use

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

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.

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

Example generative placeholder image

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

Example generative placeholder image

<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

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

  • gap: controls the size of the triangles

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

Resources

Questions and tips

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