← The Power of SVG · prototype pédagogique
Un seul curseur t pilote trois éléments en même temps : une forme
(interpolée avec Flubber), une ligne (courbure + épaisseur) et un point (taille +
position). C'est le principe d'une famille de police variable : une valeur d'axe,
plusieurs propriétés qui bougent ensemble et racontent la même histoire.
Un seul input[type=range] produit une valeur t entre 0 et 1.
Chaque élément a sa propre fonction de mappage : l'interpolateur Flubber pour la forme,
un simple lerp (interpolation linéaire) pour la courbure et l'épaisseur de
la ligne, un autre lerp pour le rayon et la position du point. Le liant entre
les trois, c'est qu'ils lisent tous la même variable — pas une technique commune.
// fonction utilitaire, le cœur de toute interpolation "simple" function lerp(a, b, t) { return a + (b - a) * t; } // la même variable t pilote les trois éléments function update(t) { // 1. la forme : Flubber gère une vraie transformation de tracé shapePath.setAttribute("d", shapeInterpolator(t)); // 2. la ligne : deux propriétés numériques suffisent const bend = lerp(0, 140, t); linePath.setAttribute("d", `M40,200 Q200,${200 - bend} 360,200`); linePath.setAttribute("stroke-width", lerp(3, 26, t)); // 3. le point : deux autres propriétés numériques dot.setAttribute("cx", lerp(70, 330, t)); dot.setAttribute("r", lerp(14, 70, t)); }
Pour l'atelier : c'est la structure à copier si votre identité doit décliner un seul geste (par exemple "l'intensité du danger" dans un jeu) sur plusieurs éléments d'UI en même temps — un logo qui se déforme, une jauge qui s'épaissit, un indicateur qui grossit — sans que l'utilisateur ait à régler chaque élément séparément.