Morphing de formes avec Flubber.js

Comment ça marche

flubber.interpolate() prend deux tracés SVG (deux path d="...") et renvoie une fonction : on lui passe un nombre entre 0 et 1, elle renvoie le tracé intermédiaire correspondant. Tout le travail — triangulation, correspondance des points, gestion des formes de complexité différente — se fait sous le capot. Ensuite, n'importe quel type d'entrée (souris, drag, slider, boucle d'animation) peut piloter cette même valeur t.

// 1. deux formes extrêmes, en tant que chaînes "d" de path SVG
const shapeA = "M200,55 C275,55 345,100..."; // le blob
const shapeB = "M200,50 L235,151 L342,153..."; // l'étoile

// 2. Flubber construit l'interpolateur une seule fois
const interpolator = flubber.interpolate(shapeA, shapeB, {
  maxSegmentLength: 2 // plus la valeur est basse, plus c'est lisse
});

// 3. n'importe quel input peut piloter t (0 à 1)
function setT(t) {
  path.setAttribute("d", interpolator(t));
}

// exemple : le curseur pilote t
stage.addEventListener("mousemove", (e) => {
  const rect = stage.getBoundingClientRect();
  const t = (e.clientX - rect.left) / rect.width;
  setT(Math.min(1, Math.max(0, t)));
});

Pour l'atelier : remplacez shapeA et shapeB par les deux extrêmes de votre propre illustration (exportées en SVG depuis Figma ou Illustrator). Contrairement à une interpolation classique de points d'ancrage, Flubber n'exige pas que les deux tracés aient la même structure — c'est ce qui le rend beaucoup plus rapide à prendre en main qu'une vraie police variable pour prototyper l'idée.