The postage stamp background
Backgrounds, SVG, Hover
NewFree
Back to the library
The Truchet tile background
An animated background in the minimal style, to put behind a heading: a maze of thin ink curves on warm white paper, made of Truchet tiles nobody sees. The pointer turns the tiles it brushes a quarter turn, on a spring, and the curves join up into new paths; every few seconds a wave starts from a corner and turns them all, one after another, lighting them in vermilion for a moment.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tessel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the background: square tiles nobody sees, each holding two thin quarter circles that join its sides two by two;
together they draw a maze of continuous curves. The pointer turns the tiles it brushes a quarter turn, and every
few seconds a wave runs across from a corner and turns them all in sequence -->
<main class="pagina" data-pagina>
<canvas class="fondo" aria-hidden="true" data-fondo></canvas>
<header class="testa">
<p class="marchio">Tessel</p>
<p class="testa__nota">Landscape & urban planning</p>
</header>
<section class="eroe">
<div class="blocco" data-blocco>
<p class="occhiello" data-entra>Streets, parks and the paths between them</p>
<h1 class="titolo">
<span class="riga"><span class="riga__dentro" data-riga>Every path</span></span>
<span class="riga"><span class="riga__dentro" data-riga>meets another.</span></span>
</h1>
<div class="azione" data-entra>
<a class="pillola" href="#">
<span class="pillola__scritta" data-testo="See the plans">See the plans</span>
<svg class="pillola__freccia" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8h10.5M9 3.8 13.2 8 9 12.2" /></svg>
</a>
</div>
</div>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
20 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The Truchet tile background” from Animorio and fit it into my siteWhat it does
A warm white page, the background of an invented landscape and urban planning studio, Tessel. Behind everything, on a canvas, a grid of square tiles nobody sees: in each, two thin ink quarter circles join its sides two by two, and together they make a maze of curves that never end, with rings, waves and little trefoils. At the opening the tiles are born from the middle towards the edges, each turned a quarter, and a spring sets them in place: the maze closes like a drawing finding its joins. In the middle the heading, Every path meets another., rises from its line gaining weight and softness; around it the curves thin out and leave the paper clean. Passing with the pointer, every tile it brushes turns a quarter clockwise, with a hair too much and the return, and goes vermilion for a moment: behind the pointer stays a trail of curves joining into new paths. Every five seconds a wave starts from a corner of the page and turns every tile it meets, one after another, and its front lights up in vermilion as it crosses the sheet. When nobody moves the pointer, a fake pointer strolls across the page.
How it works
Truchet tiles
A tile is a square with two quarter circles whose radius is half the side, centred on two opposite corners: each joins the middles of two neighbouring sides. Turned a quarter, it joins the other two sides. However you turn them, the curves run from tile to tile without breaks, because every side always has a curve at its middle. Each tile's starting direction comes from a seeded generator (SEED), so the maze is the same on every visit.
One stroke per colour
There are hundreds of tiles: to draw them fast there is a single path per group. Each tile has an angle that follows its spring, and the two arcs are drawn centred on the corners turned by that angle (arc from its angle to its angle plus a quarter). Around the heading and the header the tiles have a transparency measured with a superellipse and a feather: they go into five transparency groups, one path and one stroke per group, plus one for the tiles lit in the accent.
The quarter turn on a spring
Turning a tile means adding a quarter turn to its target angle; the real angle chases it with a spring integrated by hand on GSAP's ticker (SPRING: stiffness and friction), which goes a hair past and comes back. The pointer turns a tile when it enters it: the tile under it and those whose centre is within REACH pixels, each at most once every 0.4 seconds.
The waves and the fake pointer
A repeating GSAP timeline takes a number from 0 to 1 in three waves per round, one every WAVE_EVERY seconds, from three different corners: the wave's radius is worked out in the drawing, and the tiles its front passes in that frame turn and light up. The same timeline moves a fake pointer along a Lissajous curve, followed by a soft spring; the real pointer replaces it while it moves, and the fake one returns after 2.4 seconds. An IntersectionObserver switches everything off outside the screen.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
TILE | script.js | 44 | The side of a tile, in px (a little more on a phone). |
LINE | script.js | 1.25 | The thickness of the curves, in px. |
REACH | script.js | 30 | How far the pointer turns the tiles it brushes, in px (the tile under it always turns). |
WAVE_EVERY | script.js | 5 | How many seconds between waves (three per round). |
TRAVERSA | script.js | 3.2 | How many seconds the wave takes to cross the whole page. |
SPRING | script.js | [170, 13] | The spring of the quarter turn: how stiff and how damped it is (less friction, more swing). |
SEED | script.js | 7 | The seed of the starting pattern: another number, another maze. |
When to use it
As the background of the first screen of a landscape, urban planning or architecture studio, a design agency, a maps or transport service, a conference about cities; in general behind a short heading when you want a living but calm motif that recalls streets and paths. The colour of the curves and the accent are set in the CSS.
On phones
The same animations with the sizes adapted: the tiles are a little bigger, the heading smaller and the clean area follows it. The finger turns the tiles while it touches and drags; when it lifts the fake pointer comes back.
With reduced motion
The maze is still: no turns, no waves, no birth from the middle. The heading, the small line and the pill fade in.
Pitfalls
- A canvas arc starts from wherever the pen is: without a moveTo at its start, each arc would join the previous one with a straight line across the tiles. Every arc has its own moveTo.
- With hundreds of tiles one stroke per tile weighs on a phone: the tiles are grouped by transparency (five groups) and each group is a single path.
- A pointer resting inside a tile must not turn it on every frame: a tile only turns when the pointer enters a new cell, and at most once every 0.4 seconds.
- The tiles the pointer turns stay turned: the maze slowly changes and the round never comes back identical, so the preview video has a fixed length.
Libraries
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 6.9 KB; the libraries: GSAP 28 KB.
Testing
Tested on 21 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
