Blob Morph

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.

Les formes proches fusionnent comme des gouttes liquides grâce à un filtre de flou et de contraste.

Ajoute un « Gooey Effect » (aussi appelé goo effect ou metaballs) sur [où].
Au survol, de petites gouttes doivent se détacher de la forme principale en s’étirant comme un liquide avant de se libérer, puis revenir et fusionner en douceur quand le pointeur s’en va.
Applique le filtre de flou et de contraste uniquement au petit groupe de formes, pas à toute la page, et montre le même effet au focus clavier et au toucher.

Une icône, comme le menu hamburger, se transforme en une autre (X) grâce à des barres qui pivotent et se déplacent.

Ajoute un « Icon Morph » (aussi appelé hamburger to X ou menu icon morph) sur [où].
À chaque appui, les barres du haut et du bas doivent d’abord glisser ensemble vers le milieu puis pivoter pour former un X pendant que la barre centrale disparaît en fondu ; un nouvel appui inverse le tout : rapide et vif.
Fais-en un vrai bouton bascule dont le libellé accessible et l’état déplié changent avec lui, et garde la taille de l’icône fixe pour que rien ne bouge autour.

Un tracé SVG semble se dessiner le long de son chemin grâce à l’animation du décalage des tirets.

Ajoute une animation « Line Drawing » (aussi appelée path drawing ou self-drawing SVG) sur [où].
Chaque trait doit sembler se dessiner tout seul, en douceur, le long de son chemin du début à la fin, et un second trait, comme une coche, suit juste après le premier.
Joue-la une seule fois à l’entrée à l’écran plutôt qu’en boucle, et affiche les lignes entièrement tracées si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).