Cellular Automata
Conway's Game of Life on a grid of small coloured cells: ten generations per second, cycling hues, and a new population every 50 seconds.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. SVG has 30 effects, including 3 free. Explore the category →
3 usage examples
How it works
The area is split into 6 px cells (centred grid), 30 % of which are drawn alive at the start. On each generation every cell counts its eight neighbours: a live cell survives with 2 or 3, a dead cell is born with exactly 3, every other cell dies or stays empty. The new grid is computed entirely from the old one, and edges wrap around like a torus: whatever leaves on the right comes back on the left.
A generation lasts 100 ms, measured in elapsed time (capped at 50 ms per frame), i.e. ten per second on any screen. The canvas is only redrawn when the generation changes: each live cell becomes a 4 px square with a 2 px gap, coloured hsl(generation × 2 + row + column, 70 %, 55 %), which produces rainbow diagonals that slide over time. After 500 generations (50 s) a new random population starts, because a random soup ends up as still blocks and blinkers.
Grid size comes from the displayed area (multiplied by devicePixelRatio for crisp rendering); a ResizeObserver restarts a fitting population when the area changes size, and nothing starts while it is smaller than one cell. An IntersectionObserver stops computing off screen. The canvas is transparent: the background is that of .fx-0618-root. Every root has its own population, started only once (data-gol-ready) even if the script is pasted twice.
Accessibility
- Label:
role="img"andaria-labelon the canvas. As a page background, or in a waiting area already described by text, switch it toaria-hidden="true". - Reduced motion: under
prefers-reduced-motion: reduce, 40 generations are computed in one go and the grid is shown frozen, with its first stable structures. - Flicker: the most common oscillators switch state on every generation, i.e. 5 back-and-forths per second, on 4 px squares. For flicker-sensitive audiences, raise
GENERATION_MSto 350 to stay under 3 changes per second. - Pausing: no built-in button; toggling the root's
hiddenattribute stops the computation (WCAG 2.2.2) and resumes it at the same generation. - Keyboard: no interactive element in the effect.
Browser compatibility
2D canvas and about 4.3 KB of JavaScript, no dependency. ResizeObserver: Chrome 64, Firefox 69, Safari 13.1; IntersectionObserver: Chrome 51, Firefox 55, Safari 12.1 (MDN data). Measured in Chromium 151, Firefox 153 and WebKit 26.5: 2× density rendering, two independent populations, start after a delayed reveal, frozen grid under reduced motion, no computation off screen.
Without ResizeObserver, the grid only adapts on window resize; without IntersectionObserver, generations keep running off screen. Without JavaScript, the area keeps the root's background.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0618-root">
<canvas class="gol-canvas" role="img" aria-label="Conway's Game of Life: coloured cells being born and dying on a grid"></canvas>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Cell size (JS — CELL) |
6 px (4 px squares) | 4 px gives a fine texture, 10 px readable patterns where gliders and blinkers can be recognised. |
Starting population (JS — DENSITY) |
0.3 | 0.15 leaves a few islands that die out fast, 0.5 a scramble that thins out before organising itself. |
Generation length (JS — GENERATION_MS) |
100 ms | 350 ms or more for a calm pace and fewer than 3 blinks per second, 50 ms for fast evolution. |
Renewal (JS — RESTART_AFTER) |
500 generations | Infinity lets the population die out or freeze on its own; 200 restarts a busy soup more often. |
Colours (JS — fillStyle line in draw()) |
hsl(generation × 2 + row + column, 70 %, 55 %) | A fixed hue such as 'hsl(170, 70%, 55%)' gives a sober single-colour grid. |
Background (CSS — background of .fx-0618-root) |
#0a0a0f | The canvas is transparent: this colour is the only one that matters, light backgrounds included. |
Height (CSS — --gol-height) |
300px | Any fixed height, or 100% inside a parent of known height. |
FAQ
seed() draws cells at random. For a pattern, replace that draw with the list of cells to switch on (row, column) inside seed(), and set RESTART_AFTER to Infinity so it is not wiped.RESTART_AFTER (500 generations at 10 per second) starts a fresh soup before that happens.
