Lo sfondo di francobolli da timbrare
Sfondi, SVG, Hover
NuovaGratis
Torna alla libreria
Lo sfondo a tessere di Truchet
Uno sfondo animato nello stile minimal, da mettere dietro a un titolo: un labirinto di curve sottili d’inchiostro su una carta bianco caldo, fatto di tessere di Truchet che non si vedono. Il puntatore gira di un quarto le tessere che sfiora, su una molla, e le curve si ricollegano in percorsi nuovi; ogni pochi secondi un’onda parte da un angolo e le gira tutte, una dopo l’altra, accendendole per un attimo nel vermiglio.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.
<!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
Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.
20 valori da cambiare
Oppure chiedila a Claude Code
Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:
Prendi «Lo sfondo a tessere di Truchet» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo, il fondo di uno studio di paesaggio e urbanistica inventato, Tessel. Dietro a tutto, su un canvas, una griglia di tessere quadrate che non si vedono: in ognuna due quarti di cerchio sottili d’inchiostro uniscono i lati a due a due, e messe insieme fanno un labirinto di curve che non finiscono mai, con anelli, onde e piccoli trifogli. All’apertura le tessere nascono dal centro verso i bordi, ognuna girata di un quarto, e una molla le mette a posto: il labirinto si chiude come un disegno che trova i suoi raccordi. Al centro il titolo, Every path meets another., sale dalla sua riga prendendo peso e morbidezza; intorno le curve si diradano e lasciano la carta pulita. Passando col puntatore, ogni tessera sfiorata gira di un quarto nel verso delle lancette, con un filo di troppo e il ritorno, e per un attimo diventa vermiglio: dietro al puntatore resta una scia di curve che si ricollegano in percorsi nuovi. Ogni cinque secondi un’onda parte da un angolo della pagina e gira tutte le tessere che incontra, una dopo l’altra, e il fronte si accende di vermiglio mentre attraversa il foglio. Quando nessuno muove il puntatore, un puntatore finto passeggia per la pagina.
Come funziona
Le tessere di Truchet
Una tessera è un quadrato con due quarti di cerchio di raggio metà del lato, centrati su due angoli opposti: ognuno unisce le metà di due lati vicini. Girata di un quarto, unisce gli altri due lati. Qualunque modo di girarle, le curve passano da una tessera all’altra senza interruzioni, perché ogni lato ha sempre una curva alla metà. Il verso di partenza di ogni tessera viene da un generatore col seme (SEED), così il labirinto è lo stesso a ogni visita.
Un tratto solo per colore
Le tessere sono centinaia: per disegnarle in fretta si fa un solo path per gruppo. Ogni tessera ha un angolo che segue la sua molla, e i due archi si disegnano col centro negli angoli girati di quell’angolo (arc dal suo angolo più un quarto). Intorno al titolo e alla testata le tessere hanno una trasparenza misurata con una superellisse e una piuma: si mettono in cinque gruppi di trasparenza, un path e uno stroke per gruppo, più uno per le tessere accese nell’accento.
Il quarto di giro sulla molla
Girare una tessera vuol dire aggiungere un quarto di giro al suo angolo di arrivo; l’angolo vero lo insegue con una molla integrata a mano sul ticker di GSAP (SPRING: rigidità e attrito), che va un filo oltre e torna. Il puntatore gira una tessera quando ci entra: la tessera sotto di lui e quelle col centro entro REACH pixel, ognuna al massimo una volta ogni 0,4 secondi.
Le onde e il puntatore finto
Una timeline GSAP a ripetizione porta un numero da 0 a 1 in tre onde per giro, una ogni WAVE_EVERY secondi, da tre angoli diversi: il raggio dell’onda si calcola nel disegno, e le tessere che il fronte supera in quel fotogramma girano e si accendono. La stessa timeline muove un puntatore finto su una curva di Lissajous, seguito da una molla morbida; il puntatore vero lo sostituisce finché si muove, e il finto torna dopo 2,4 secondi. Un IntersectionObserver spegne tutto fuori dallo schermo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TILE | script.js | 44 | Il lato di una tessera, in px (sul telefono un poco di più). |
LINE | script.js | 1.25 | Lo spessore delle curve, in px. |
REACH | script.js | 30 | Fin dove il puntatore gira le tessere che sfiora, in px (la tessera sotto di lui gira sempre). |
WAVE_EVERY | script.js | 5 | Ogni quanti secondi parte un’onda (tre per giro). |
TRAVERSA | script.js | 3.2 | In quanti secondi l’onda attraversa tutta la pagina. |
SPRING | script.js | [170, 13] | La molla del quarto di giro: quanto è rigida e quanto è frenata (meno attrito, più oscilla). |
SEED | script.js | 7 | Il seme del disegno di partenza: un altro numero, un altro labirinto. |
Quando usarla
Come fondo della prima schermata di uno studio di paesaggio, di urbanistica o di architettura, di un’agenzia di design, di un servizio di mappe o di trasporti, di una conferenza sulla città; in generale dietro a un titolo corto quando si vuole un motivo vivo ma calmo, che ricorda strade e sentieri. Il colore delle curve e l’accento si cambiano nel CSS.
Sul telefono
Le stesse animazioni a misure adattate: le tessere sono un poco più grandi, il titolo più piccolo e la zona pulita lo segue. Il dito gira le tessere mentre tocca e trascina; quando si alza torna il puntatore finto.
Con il movimento ridotto
Il labirinto è fermo: niente giri, niente onde, niente nascita dal centro. Il titolo, la riga piccola e la pillola compaiono in dissolvenza.
Trappole
- Un arco del canvas parte dal punto in cui si trova la penna: senza un moveTo al suo inizio, ogni arco si legherebbe al precedente con una riga dritta attraverso le tessere. Ogni arco ha il suo moveTo.
- Con centinaia di tessere uno stroke per tessera pesa sul telefono: le tessere si raggruppano per trasparenza (cinque gruppi) e ogni gruppo è un path solo.
- Un puntatore fermo dentro una tessera non deve farla girare a ogni fotogramma: una tessera gira solo quando il puntatore entra in una cella nuova, e al massimo una volta ogni 0,4 secondi.
- Le tessere girate dal puntatore restano girate: il labirinto cambia piano piano e il giro non torna mai identico, quindi il video dell’anteprima ha una durata fissa.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,9 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 21 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Da fare
Licenza d’uso
Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.
