Geometric Tessellation
Mosaïque de carreaux en dégradé dont l'orientation est tirée au hasard ; une pulsation lente traverse la grille case après case.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. SVG comprend 30 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le HTML ne contient qu'un conteneur vide .gtz-grid. Au chargement, le script parcourt chaque .fx-0610-root de la page et y crée data-cols × data-rows carreaux (8 × 6 = 48 par défaut). Chaque carreau reçoit deux variables : son rang --gtz-i et un angle --gtz-angle tiré entre 0 et 360°. Le pseudo-élément ::before du carreau peint un linear-gradient dans cette direction, de l'indigo #6366f1 vers le transparent à 70 % : aucune case ne ressemble à sa voisine, et le motif change à chaque chargement.
L'animation gtzPulse fait passer chaque carreau de 30 % à 100 % d'opacité et de 80 % à 100 % de sa taille, puis l'inverse, en 4 secondes. Le départ est calculé en CSS : calc(var(--gtz-i) * var(--gtz-step) - 100 * var(--gtz-speed)). Avec 0,05 s d'écart entre deux cases, la pulsation glisse dans l'ordre de lecture, de gauche à droite puis ligne par ligne. Le retrait de 100 cycles rend tous les délais négatifs : la vague est déjà en place à l'affichage, aucune case ne reste allumée puis s'éteint d'un coup pendant les premières secondes.
Le script ne garde rien en mémoire et ne pose rien sur window : deux mosaïques dans la même page ont chacune leurs carreaux et leurs angles. Il marque la racine avec data-gtz-ready pour ne pas la remplir deux fois si le code est collé deux fois. Les dimensions viennent de la grille CSS, qui remplit la largeur du parent sur la hauteur --gtz-height (300 px par défaut).
Accessibilité
- Décor masqué aux lecteurs d'écran : la grille porte
aria-hidden="true". Si la mosaïque signale un chargement, annoncez-le à côté, par un texte dans une zonearia-live="polite"(« Chargement des projets »). - Mouvement réduit : sous
prefers-reduced-motion: reduce, les animations sont mises en pause (animation-play-state: paused). Grâce aux délais négatifs, la mosaïque se fige sur une image où les carreaux gardent des opacités différentes, au lieu de 48 cases identiques. - Aucune interaction : rien ne se clique ni ne se survole, la mosaïque ne prend jamais le focus et ne gêne pas la navigation au clavier.
- Contraste : les carreaux descendent à 30 % d'opacité. Un texte posé dessus doit avoir son propre fond (carte, bandeau) ; ne comptez pas sur la mosaïque pour le faire ressortir.
Compatibilité navigateur
CSS Grid, variables CSS et calc() dans animation-delay, sans canvas ni bibliothèque. Versions minimales relevées dans les données de compatibilité MDN (Grid : Chrome 57, Firefox 52, Safari 10.1). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : 48 carreaux par copie, deux copies indépendantes, rien qui déborde à 390 px.
Sans JavaScript, la grille reste vide : seul le fond de la racine s'affiche. Sans CSS Grid, les carreaux n'ont plus de hauteur et la zone reste vide.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0610-root" data-cols="8" data-rows="6">
<div class="gtz-grid" aria-hidden="true"></div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
data-cols / data-rows (racine) |
8 / 6 | Nombre de colonnes et de rangées (1 à 40). La grille se partage la largeur et la hauteur disponibles ; les carreaux s'étirent donc selon le rapport des deux. |
--gtz-color |
#6366f1 | Couleur de départ de chaque dégradé ; l'autre extrémité est toujours transparente et laisse voir --gtz-bg. |
--gtz-bg |
#0a0a0f | Fond de la racine, visible entre les carreaux et dans leur partie transparente. Un fond clair avec une couleur moyenne donne un rendu de squelette de chargement. |
--gtz-gap |
2px | Retrait de chaque dégradé dans sa case : 0 colle les carreaux, 6 px dessine un quadrillage marqué. |
--gtz-speed |
4s | Durée d'une pulsation complète (éteint → allumé → éteint). |
--gtz-step |
0.05s | Écart entre deux cases consécutives. 0 fait pulser toute la grille ensemble ; 0,2 s étire la vague. |
--gtz-height |
300px | Hauteur de la mosaïque ; la largeur suit toujours le parent. |
FAQ
Math.random() à chaque chargement. Pour un motif fixe, remplacez cette valeur par un calcul tiré du rang, par exemple (i * 47) % 360.
