← The Power of SVG · prototype pédagogique

Un espace à plusieurs axes

Trois sliders, trois axes indépendants — exactement le principe d'une police variable multi-axes (wght, wdth...). Ici les deux premiers axes sont purement paramétriques (une formule géométrique, pas besoin de Flubber), le troisième est une simple rotation. Chaque axe modifie une chose et une seule ; c'est leur combinaison qui crée la richesse.

0.30
0.35

position dans
l'espace poids ×
largeur

0°

axe libre,
indépendant
de la forme

Comment ça marche

La forme n'est pas dessinée à la main : elle est générée par une formule (une approximation classique du cercle par 4 courbes de Bézier, où kappa contrôle à quel point les côtés bombent). En faisant varier kappa (poids) et le rayon horizontal rx (largeur) indépendamment, on obtient un vrai espace de dessin continu à deux dimensions — sans jamais appeler Flubber, puisqu'il n'y a qu'une seule topologie de forme à faire varier.

voir le code essentiel 
// la forme est calculée, pas dessinée à la main
function petalPath(rx, kappa, cx, cy, ry) {
  return `
    M ${cx},${cy - ry}
    C ${cx + kappa*rx},${cy - ry} ${cx + rx},${cy - kappa*ry} ${cx + rx},${cy}
    C ${cx + rx},${cy + kappa*ry} ${cx + kappa*rx},${cy + ry} ${cx},${cy + ry}
    C ${cx - kappa*rx},${cy + ry} ${cx - rx},${cy + kappa*ry} ${cx - rx},${cy}
    C ${cx - rx},${cy - kappa*ry} ${cx - kappa*rx},${cy - ry} ${cx},${cy - ry} Z`;
}

// chaque slider ne touche qu'à SA variable
weightSlider.oninput = () => draw();  // -> kappa
widthSlider.oninput  = () => draw();  // -> rx
rotSlider.oninput    = () => {         // axe indépendant : juste une rotation CSS
  shapePath.style.transform = `rotate(${rotSlider.value}deg)`;
};

function draw() {
  const kappa = 0.05 + (weightSlider.value / 100) * 0.95;
  const rx    = 60 + (widthSlider.value / 100) * 110;
  shapePath.setAttribute("d", petalPath(rx, kappa, 200, 200, 140));
}

Pour l'atelier : c'est cette approche (formule + paramètres) qu'il faut utiliser pour des axes purement quantitatifs (poids, largeur, vitesse, intensité...). Réservez Flubber (exemple précédent) aux axes qualitatifs, quand la forme d'arrivée a une structure vraiment différente — un rond qui devient une étoile, par exemple — et qu'aucune formule simple ne relie les deux états.