SVG : courbe de Bézier cubique animée avec JavaScript

Le code SVG de la page

<svg width="50%" height="50%" viewBox ="0 0 300 300"> <path d="M 0,150 C 100,0 200,300 300,150" style ="fill : none ; stroke-width : 2 ; stroke : red ;" /> </svg>

Le script de la page

var courbe = document.querySelector('path'); var y1 = 0 ; var y2 = 300; var delta = 1 ; var courbe_d; setInterval(animate,50); function animate() { if (y1 > 100) delta*=-1; if (y1 < 0) delta*=-1; y1 = y1 + delta ; y2 = y2 - delta ; courbe_d = "M 0,150 C 100," + y1 +" 200,"+y2+" 300,150" courbe.setAttribute('d', courbe_d) ; }

Commentaire du code

Pour bien comprendre le code SVG de cette page je vous conseille de revoir auparavant la page sur les courbes de Bezier cubiques dans le tutoriel "Dessiner avec SVG".

Ce même thème est traité avec le SMIL (les balises d'animation de SVG).

Le principal attribut de la balise path est d (d comme description (du chemin)).
Ici la programmation consiste à modifier la valeur de l'attribut d de la courbe de Bézier cubique.
On se contente de faire varier les ordonnées des deux points d'inflexion ( utilisation des variables y1 et y2).
y1 varie de 0 à 100 tandis que y2 varie de 300 à 200 puis c'est l'inverse.
Tantôt la variable delta est positive et alors l'écart entre les ordonnées diminue donc la courbe s'aplatit et tantôt delta est négatif et l'écart entre les deux ordonnées augmente donc la courbe se creuse.

Retour menu