Rotating Gears
Deux engrenages SVG qui s'engrènent vraiment : 12 et 8 dents, chacun tourne sur son axe, en sens inverse, à la bonne vitesse pour que les dents ne se croisent jamais.
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 SVG de 150 × 100 unités contient deux roues dentées dessinées avec le même module (taille de dent) : une grande de 12 dents (rayon primitif 30, centre en 55,50) et une petite de 8 dents (rayon primitif 20, centre en 105,50). Les centres sont espacés de 50 unités, la somme des deux rayons : une dent de la grande roue entre dans un creux de la petite, comme sur un vrai mécanisme. Le trou central fait partie du chemin (fill-rule="evenodd") : c'est un vrai trou, le fond de la page se voit au travers.
Chaque roue est dans un groupe .cogs-gear animé par @keyframes cogsTurn (rotation de 0 à 360°). transform-box: fill-box et transform-origin: center placent l'axe au centre de la roue elle-même : elle tourne sur place. La grande fait un tour en 4 s ; la petite tourne en sens inverse (animation-direction: reverse) en 4 s × 8/12, soit 1,5 fois plus vite, ce qui garde les dents en prise en permanence.
Tout passe par des variables : --cogs-speed règle les deux vitesses d'un coup, --cogs-state (running ou paused) met en pause sans perdre la position, ce qui permet de faire tourner les roues au survol ou pendant une tâche. Aucun JavaScript ; classes et animation préfixées cogs.
Accessibilité
- Décoratif : le SVG porte
aria-hidden="true"etfocusable="false". Utilisé comme indicateur d'activité, accompagnez-le d'un texte dans une zonerole="status"(« Synchronisation… », « À jour ») : c'est ce texte qui informe, pas la rotation. - Mouvement réduit : sous
prefers-reduced-motion: reduce, les deux roues restent immobiles, en prise, à leur position de départ. - Survol et clavier : l'effet ne capte rien lui-même. Pour une icône qui tourne au survol, posez
--cogs-state:pausedsur le bouton etrunningsur:hoveret:focus-within, comme dans le troisième exemple : le clavier obtient le même retour que la souris. - Vitesse : une rotation lente et régulière, sans clignotement.
Compatibilité navigateur
Animations CSS sur des groupes SVG, transform-box: fill-box, variables CSS dans animation et animation-play-state, calc() sur une durée, prefers-reduced-motion. Mesuré dans Chromium, Firefox et WebKit (Playwright) : 0 erreur ; centre de chaque roue suivi pendant 2 s : déplacement 0 px dans les 3 moteurs ; dents jamais superposées sur 80 instants d'un tour ; images figées en mouvement réduit ; deux copies indépendantes.
Sans transform-box (navigateurs plus anciens que ceux listés), les roues tourneraient autour du coin du dessin : elles restent alors affichées mais le mouvement est faux. Sans animations CSS, elles restent immobiles et en prise.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0607-root">
<div class="cogs-stage">
<svg class="cogs-svg" viewBox="0 0 150 100" aria-hidden="true" focusable="false">
<g transform="translate(55 50)">
<g class="cogs-gear cogs-gear--big">
<path fill-rule="evenodd" d="…"/>
</g>
</g>
<g transform="translate(105 50)">
<g class="cogs-gear cogs-gear--small">
<path fill-rule="evenodd" d="…"/>
</g>
</g>
</svg>
</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 |
|---|---|---|
Taille (CSS — --cogs-w / --cogs-h) |
150px / 100px | Taille du dessin ; le repère 150 × 100 garde ses proportions. 100% / auto suit la largeur du parent. |
Couleurs (CSS — --cogs-a / --cogs-b) |
#6366f1 / #8b5cf6 | Grande roue et petite roue. Les trous sont transparents : pas de couleur de fond à accorder. |
Vitesse (CSS — --cogs-speed) |
4s | Un tour de la grande roue ; la petite suit automatiquement à 2/3 de cette durée pour rester en prise. |
Pause / lecture (CSS — --cogs-state) |
running | paused fige les deux roues à leur position, running les relance. Posez-le sur la racine ou sur un parent (bouton, barre d'état). |
Fond et hauteur du bloc (CSS — --cogs-page, --cogs-root-h) |
#0a0a0f / 300px | transparent et 0px pour utiliser les engrenages comme icône ou illustration dans votre mise en page. |
FAQ
transform-box: fill-box : le centre mesuré ne bouge pas d'un pixel dans Chrome, Firefox et Safari (WebKit), et les dents restent en prise sans se chevaucher.--cogs-speed × dents de la petite / dents de la grande, sinon les dents se traversent.--cogs-state: paused sur un parent, puis passez-le à running au début de la tâche et de nouveau à paused à la fin : el.style.setProperty('--cogs-state', 'running'). Les roues repartent de là où elles s'étaient arrêtées, toujours en prise.
