SVG : courbes quadratiques animées

L'oeil cligne : se ferme lentement puis s'ouvre lentement et le cycle reprend ...

Le code SVG de la page

<svg width="50%" height="50%" viewBox ="0 0 400 200"> <circle cx = '50%' cy = '50%' r= '40' fill ='skyblue'/> <circle cx = '50%' cy = '50%' r= '6' fill ='black'/> <path d="M 100,100 Q 200,5 300,100" id ='courbe1' style = "stroke:black; stroke-width:4px; fill:none;"/> <path d="M 100,100 Q 200,195 300,100" id ='courbe2' style = "stroke:black; stroke-width:4px; fill:none;"/> </svg>

Le script de la page

var courbe1 = document.querySelector('#courbe1'); var courbe2 = document.querySelector('#courbe2'); y1 = 1 ; y2 = 199; delta = 1 ; var courbe1_d; var courbe2_d; setInterval(animate,100); function animate() { if (y1 > 30) delta*=-1; if (y1 < 0) delta*=-1; y1 = y1 + delta ; y2 = y2 - delta ; courbe1_d = "M 100,100 Q 200," + y1 + " 300,100" ; courbe2_d = "M 100,100 Q 200," + y2 + " 300,100" ; courbe1.setAttribute('d', courbe1_d) ; courbe2.setAttribute('d', courbe2_d) ;

Commentaire du code

Pour bien comprendre le code SVG de cette page je vous conseille de revoir auparavant la page sur les courbes quadratiques dans le tutoriel "Dessiner avec 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 chaque courbe quadratique.
On se contente de modifier les ordonnées des points d'inflexion des deux courbes (variables y1 et y2).
Tantôt la variable delta est positive et alors l'écart entre les ordonnées diminue donc les courbes s'aplatissent et tantôt delta est négatif et l'écart entre les deux ordonnées augmente et les courbes se creusent.

Retour menu