Skip to content
tileio

Menu

12 layers · 4 free

HTML canvas background animations beyond particles

The 2D canvas is the workhorse of animated backgrounds: one element, a draw loop and as many dots, lines or glyphs as you like, with no WebGL and no library. Particle fields get their own collection; these twelve show what else a canvas loop can do.

Some borrow from print: an ordered Bayer dither, a halftone wave, pencil cross-hatching, procedural wood grain. Some are type and grids: a wall of ASCII picked by brightness, matrix rain in katakana or hex, a field of tiny analog clocks whose hands form patterns, a cursor that types a grid cell by cell. Others are small simulations: caustic light on a pool floor, Conway's Game of Life on LED dots, string art on a circle of pins, a grid floor rushing to the horizon.

Each loop is a few kilobytes. Tune it, then copy the prompt for a plain HTML snippet or a framework component. Caustic Light, Halftone Wave, Perspective Floor and String Art are free.

The 12 layers, in order

  1. A wall of monospace characters picked by brightness, so slow waves roll through the text.

  2. Sunlight through water: bright caustic lines that drift and tangle across a pool floor.

  3. Clock Grid: animated canvas background preview

    Clock Grid

    PRO

    N° 0274 · synchronised clock-hand field

    A wall of tiny analog clocks whose hands follow a slowly changing field and form patterns.

  4. A drifting form shaded in pencil cross-hatching, one diagonal layer per tone.

  5. A two-colour gradient drawn as an old printer would, an ordered Bayer dither.

  6. A grid of dots riding ripples; every pointer move drops a ring that spreads outward.

  7. Dots that grow and shrink along a travelling wave, like a halftone print of a ripple.

  8. Life Matrix: animated canvas background preview

    Life Matrix

    PRO

    N° 0259 · cellular automaton on LED dots

    Conway's Game of Life on an LED matrix, dying cells cooling through a trail colour.

  9. Columns of glyphs falling at their own speeds, bright at the head; katakana or hex.

  10. A grid floor rushing to the horizon in one-point perspective, lines brightening near the camera.

  11. String Art: animated canvas background preview

    String Art

    FREE

    N° 0261 · modular-multiplication string art

    String art on a circle of pins, chords folding into new figures as the multiplier glides.

  12. Procedural growth rings warped by noise into plank-like grain.

Browse the full catalogue: Backgrounds

Questions

How do I put a canvas animation behind my content?

Absolutely position the canvas to fill a relative container, size it to the container times the device pixel ratio, run the draw loop with requestAnimationFrame and put your content above it. The prompt carries those rules and a resize handler.

Is canvas faster than SVG for backgrounds?

For many moving parts, yes: canvas redraws pixels without a DOM node per shape. For a handful of crisp shapes or SVG filters, SVG is simpler. These loops also stop when off-screen and honour reduced motion.

Do I need a library?

No. Every loop here is plain JavaScript on the 2D canvas API with a CONFIG object at the top, so you can edit it later without the AI.

Are they free?

Caustic Light, Halftone Wave, Perspective Floor and String Art are free. Free layers are for personal projects; commercial use needs Pro or Lifetime.

Related collections

All collections