SVG : courbes quadratiques animées

Ci-dessous une image SVG animée est insérée :

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

Le code SVG dans la page (extraits)

... <meta http-equiv ="Refresh" content ="10" > <style> path{ stroke:black; stroke-width:4px; fill:none; } ... <svg width="50%" height="auto" viewBox ="0 0 400 200"> <circle cx = '50%' cy = '50%' r= '40' fill ='skyblue'/> <circle cx = '50%' cy = '50%' r= '6' fill ='black'/> <path> <animate attributeName="d" from= "M 100,100 Q 200,0 300,100" attributeType ="XML" id ='a1' to = "M 100,100 Q 200,30 300,100" begin="0s" dur="5s"/> <animate attributeName="d" from= "M 100,100 Q 200,30 300,100" attributeType ="XML" to = "M 100,100 Q 200,0 300,100" begin="a1.end" dur="5s"/> </path> <path> <animate attributeName="d" from= "M 100,100 Q 200,200 300,100" attributeType ="XML" id ='a2' to = "M 100,100 Q 200,170 300,100" begin="0s" dur="5s" /> <animate attributeName="d" from= "M 100,100 Q 200,170 300,100" attributeType ="XML" to = "M 100,100 Q 200,200 300,100" begin="a2.end" dur="5s" fill ="freeze" /> </path> </svg>

Il y a une grande nouveauté dans le code HTML !
<meta http-equiv ="Refresh" content ="10" >
Ce qui veut dire que la page est actualisée automatiquement toutes les 10 secondes.

Chaque balise path devient un conteneur (balise double) qui contient deux fois la balise animate. Il s'agit de deux animations qui durent chacune 5 secondes et qui s'enchaînent.
Chaque animation porte sur l'attribut d.
Dans chaque conteneur pathles contenus des attributs from et to sont presque identiques. Seul l'ordonnée du point aimant change.
L'animation consiste en effet à rapprocher les ordonnées des points d'inflexion durant 5 secondes donc les courbes "s'aplatissent" puis à éloigner les ordonnées des points d'inflexion durant les 5 secondes suivantes donc les courbes se creusent.
Donc l'animation programmée par le fichier SVG dure 10 secondes. Mais comme au bout de 10 secondes la page est rechargée ...
Retour menu