Spirograph
Rosace de seize anneaux décentrés : la moitié tourne dans un sens, l'autre moitié dans l'autre, et les deux rosaces se croisent comme au spirographe.
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 script crée data-rings anneaux (16 par défaut) dans le point central .spg-stage. Chaque anneau est un cercle de 120 px (--spg-base) dont le centre est écarté de 50 px (--spg-offset) du centre de la zone, et orienté selon un angle de départ réparti : 0°, 22,5°, 45°… Superposés, ces cercles décentrés dessinent une rosace, la figure que trace un spirographe.
La rotation passe par une seule animation, spgSpin : translate(-50%, -50%) rotate(angle) translateX(écart), l'angle allant du départ à départ + 360°. Comme le cercle est décentré, le faire tourner le fait réellement circuler autour du milieu. Les anneaux pairs tournent dans le sens des aiguilles d'une montre, les impairs en sens inverse (.spg-ring--reverse), tous en 12 s par tour. Il y a donc deux rosaces de huit anneaux qui se croisent : elles se superposent en une rosace à seize pétales, se séparent, tissent des losanges, puis se rejoignent.
Les couleurs vont du bleu au rose : teinte 220° plus 10° par anneau (data-hue, data-hue-step), opacité qui baisse doucement de 0,85 à un peu moins de 0,5. La variable --spg-play passe toute la rosace en pause (paused) ou en marche (running) sans la redessiner. --spg-grow et --spg-drift, à 0 par défaut, rendent les anneaux de tailles et de vitesses différentes.
Accessibilité
- Décor : le conteneur des anneaux porte
aria-hidden="true". Dans un minuteur ou un envoi de fichier, le temps restant et l'état doivent être écrits en texte (role="timer",aria-live). - Mouvement réduit : sous
prefers-reduced-motion: reduce, l'animation est retirée et chaque anneau reste à son angle de départ : la rosace complète est affichée, immobile. - Aucune interaction : rien ne prend le focus, rien ne réagit au pointeur. Le réglage
--spg-playpermet à votre propre bouton de suspendre la rotation. - Mouvement continu : deux groupes qui tournent en sens contraires créent une impression de tourbillon. Sur une page de lecture, préférez une vitesse lente (
--spg-speedde 20 à 30 s) ou une zone qui ne reste pas sous les yeux en permanence.
Compatibilité navigateur
CSS et une dizaine de lignes de JavaScript pour créer les anneaux. Les variables CSS utilisées dans @keyframes et NodeList.forEach fixent les versions minimales relevées dans les données MDN. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : 16 anneaux par copie, rotation visible dans les trois moteurs, deux copies indépendantes, rosace immobile en mouvement réduit.
Sans JavaScript, la zone reste vide. Les navigateurs sans variables CSS n'affichent pas la rosace.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0615-root" data-rings="16">
<div class="spg-stage" 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-rings (racine) |
16 | Nombre d'anneaux (1 à 40), répartis à intervalles égaux. Un nombre pair donne deux rosaces égales qui tournent en sens contraires. |
data-hue / data-hue-step (racine) |
220 / 10 | Teinte du premier anneau et pas de teinte entre deux anneaux (−60 à 60). Un pas de 1 ou 2 donne une rosace presque d'une seule couleur. |
--spg-base |
120px | Diamètre des anneaux. |
--spg-offset |
50px | Distance entre le centre d'un anneau et le centre de la zone. 0 superpose tous les anneaux en un seul cercle qui paraît immobile ; plus grand, la rosace s'ouvre. |
--spg-speed |
12s | Durée d'un tour complet. |
--spg-play |
running | paused fige la rosace là où elle est ; repasser à running la relance. |
--spg-grow / --spg-drift |
0px / 0 | Agrandissement par anneau et écart de vitesse par anneau (0,1 = chaque anneau 10 % plus lent que le précédent). Ils cassent la symétrie de la rosace. |
--spg-line / --spg-height / --spg-bg |
1px / 300px / #0a0a0f | Épaisseur du trait, hauteur de la zone et fond. La rosace reste centrée ; si elle est plus grande que la zone, elle est coupée. |
FAQ
root.style.setProperty('--spg-play', 'paused'), puis 'running' pour repartir. La rosace reprend exactement là où elle s'était arrêtée.
