Orbiting Circles

Un élément parcourt un chemin courbe personnalisé et peut pivoter pour le suivre.

Ajoute une animation « Motion Path » (aussi appelée animate along path) sur [où].
Un petit élément doit parcourir un itinéraire courbe personnalisé à un rythme lent et régulier, en pivotant pour faire face à sa direction de déplacement.
Utilise un itinéraire fermé pour que la boucle se répète sans saut, et fais en sorte que l’itinéraire s’adapte à son conteneur au lieu de garder une taille fixe.

Le texte est disposé autour d’un cercle qui tourne en continu.

Ajoute « Spinning Text » (aussi appelé circular text ou text on circle) sur [où].
Les lettres doivent être réparties uniformément autour d’un cercle qui tourne lentement et régulièrement, sans saut quand la boucle recommence.
Donne le texte une seule fois aux lecteurs d’écran comme du texte normal, et arrête la rotation si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Des particules tournent en spirale autour d’un centre comme un tourbillon.

Ajoute un arrière-plan « Vortex » (aussi appelé swirling particles) sur [où].
De petites particules doivent tourner en spirale vers l’intérieur autour d’un point central comme un tourbillon, apparaître en fondu au bord et s’estomper en atteignant le centre, en un mouvement fluide et continu.
Garde un nombre de particules modéré, mets en pause hors de l’écran et arrête le tourbillon si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une Terre 3D en rotation, avec des repères ou des arcs, s’intègre à la mise en page.

Ajoute un « 3D Globe » (aussi appelé interactive globe) sur [où].
Un globe portant quelques repères doit tourner lentement et régulièrement sur son axe, les repères tournant avec lui : calme et continu.
Garde-le décoratif avec une alternative texte pour les informations qu’il montre, mets-le en pause hors écran et arrête la rotation si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une forme vectorielle se transforme en douceur en une autre.

Ajoute un « Shape Morph » (aussi appelé path morphing ou SVG morph) sur [où].
Une forme doit se transformer en douceur en une autre, par exemple un pentagone qui se resserre en étoile, ses points glissant à leur place à un rythme régulier et posé.
Donne aux deux formes le même nombre de points correspondants pour que la transformation reste nette et sans scintillement, et joue-la une fois par changement d’état plutôt qu’en boucle.

Un filtre SVG déforme du texte ou des formes avec un bruit animé.

Ajoute un effet de survol « SVG Displacement Distortion » (aussi appelé displacement map effect) sur [où].
Pendant le survol, le texte ou la forme doit onduler et trembler comme vu à travers de l’eau en mouvement, avec une apparition douce, puis redevenir net quand le pointeur s’en va.
N’applique le filtre de distorsion que lorsque l’effet est actif pour qu’il ne coûte rien au repos, et montre le même effet au focus clavier.

Une forme de masque balaie la surface ou suit le pointeur pour dévoiler le contenu en dessous.

Ajoute un effet de survol « SVG Mask Reveal » (aussi appelé clip-path reveal ou spotlight mask) sur [où].
Pendant le survol, un masque circulaire doit s’agrandir depuis le centre et dévoiler le contenu en dessous, puis se refermer quand le pointeur s’en va : fluide et assez rapide.
Garde les deux calques exactement à la même taille pour que rien ne bouge, et montre le même dévoilement au focus clavier et au toucher.