Trois animaux
Une forme SVG se transforme fluidement en une autre. Les paths partagent le même nombre de points — le browser interpole entre eux. Cliquez sur un animal ou laissez le cycle automatique.
La forme
se souvient
CSS interpole les coordonnées SVG d'une forme à l'autre. Chaque animal est un ensemble de courbes de Bézier partageant exactement le même nombre de points de contrôle.
Cycle automatique — 3 secondes
Mêmes points,
formes différentes
La propriété CSS d (path data) est animable nativement dans les navigateurs modernes via transition: d. La contrainte : les deux paths doivent avoir exactement le même nombre de commandes et de points.
Cas d'usage
Logo qui se transforme au chargement, icônes d'état (play → pause → stop), illustration animée répondant à une action, mascotte expressive changeant d'émotion.