Geometric Tessellation
A mosaic of gradient tiles with randomly picked directions; a slow pulse runs through the grid one tile after another.
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 HTML only holds an empty .gtz-grid container. On load, the script visits every .fx-0610-root on the page and builds data-cols × data-rows tiles inside it (8 × 6 = 48 by default). Each tile gets two variables: its index --gtz-i and an angle --gtz-angle drawn between 0 and 360°. The tile's ::before paints a linear-gradient in that direction, from indigo #6366f1 to transparent at 70%, so no two neighbours look alike and the pattern changes on every load.
The gtzPulse animation takes each tile from 30% to 100% opacity and from 80% to 100% of its size, then back, over 4 seconds. The start time is computed in CSS: calc(var(--gtz-i) * var(--gtz-step) - 100 * var(--gtz-speed)). With 0.05 s between two tiles, the pulse moves in reading order, left to right then row by row. Subtracting 100 cycles makes every delay negative, so the wave is already running when the grid appears: no tile sits fully lit and then drops during the first seconds.
The script keeps no state and puts nothing on window: two mosaics on one page each get their own tiles and angles. It flags the root with data-gtz-ready so pasting the code twice does not fill it twice. Sizes come from the CSS grid, which spans the parent's width over the --gtz-height height (300 px by default).
Accessibility
- Decoration hidden from screen readers: the grid carries
aria-hidden="true". If the mosaic stands for a loading state, announce it next to it with text in anaria-live="polite"region ("Loading projects"). - Reduced motion: under
prefers-reduced-motion: reduce, the animations are paused (animation-play-state: paused). Thanks to the negative delays, the mosaic freezes on a frame where tiles keep different opacities instead of 48 identical squares. - No interaction: nothing is clickable or hoverable, the mosaic never takes focus and stays out of the way of keyboard navigation.
- Contrast: tiles drop to 30% opacity. Text placed on top needs its own background (card, strip); do not rely on the mosaic to make it stand out.
Browser compatibility
CSS Grid, CSS variables and calc() inside animation-delay, no canvas and no library. Minimum versions taken from MDN compatibility data (Grid: Chrome 57, Firefox 52, Safari 10.1). Measured in Chromium 151, Firefox 153 and WebKit 26.5: 48 tiles per copy, two independent copies, nothing overflowing at 390 px.
Without JavaScript the grid stays empty and only the root background shows. Without CSS Grid the tiles have no height and the area stays empty.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0610-root" data-cols="8" data-rows="6">
<div class="gtz-grid" aria-hidden="true"></div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
data-cols / data-rows (root) |
8 / 6 | Number of columns and rows (1 to 40). The grid shares the available width and height, so tiles stretch to match their ratio. |
--gtz-color |
#6366f1 | Start colour of every gradient; the other end is always transparent and lets --gtz-bg through. |
--gtz-bg |
#0a0a0f | Root background, visible between tiles and in their transparent part. A light background with a mid colour gives a skeleton-loader look. |
--gtz-gap |
2px | Inset of each gradient inside its cell: 0 makes tiles touch, 6 px draws a strong grid. |
--gtz-speed |
4s | Length of one full pulse (dim → lit → dim). |
--gtz-step |
0.05s | Offset between two consecutive tiles. 0 pulses the whole grid together; 0.2 s stretches the wave. |
--gtz-height |
300px | Height of the mosaic; the width always follows the parent. |
FAQ
Math.random() on every load. For a fixed pattern, replace that value with something derived from the index, such as (i * 47) % 360.
