SVG : courbe de Bézier cubique animée

Le code de la page (extraits)

... <head> <meta http-equiv ="Refresh" content ="10" > ... <body> <h1>SVG : courbe de Bézier cubique animée</h1> <svg width="50%" height="auto" viewBox ="0 0 300 300"> <path style ="fill : none ; stroke-width : 2 ; stroke : red ;" > <animate ...="d" ... ="XML" from= "M 0,150 C 100,0 200,300 300,150" to = "M 0,150 C 100,100 200,200 300,150" begin="0s" dur="5s" id = "a1"/> <animate ...="d" ... ="XML" from= "M 0,150 C 100,100 200,200 300,150" to = "M 0,150 C 100,0 200,300 300,150" begin="a1.end" dur="5s" fill = "freeze"/> </path> </svg>

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".

Code HTML :
<meta http-equiv ="Refresh" content ="10" > : la page est rechargée automatiquement tous les 10 secondes.

Le code SVG :
Le conteneur path contient deux animations qui durent chacune 5 secondes et qui s'enchaînent. La première identifiée a1 démarre au chargement de la page et la deuxième démarre dès que la première est terminée (begin = "a1.end").
Les deux animations portent sur l'attribut d.
Ensuite la page est rechargée donc le cycle reprend ...

La première animation consiste à "aplatir la courbe" car les ordonnées des points d'inflexion se rapprochent (de 0 à 100 pour le premier et 300 à 200 pour le second point).
La deuxième animation consister à creuser le courbe car c'est l'inverse : les ordonnées des points d'inflexi>on s'éloignent (de 100 à 0 pour le premier et 200 à 300 pour le second point).

Retour menu