SVG-Animations-Experiment mit SMIL

Jetzt bin ich auf den Geschmack gekommen – endlich! Schlanke Animationen von SVG-Grafiken mit SMIL. Ein sehr schöner Beitrag auf meiner Lieblings-Lern-Website CSS-Tricks hat mir geholfen.

Mein erster Versuch:

Die SVG-Grafik ist hier nur der I-Punkt.

Und so sieht der Code dazu aus:

<svg width="200" height="50">
  <circle id="red-circle" r="3" cx="161" cy="3" fill="#e31b11" />
  
  <animate 
           xlink:href="#red-circle"
           attributeName="cy"
           values=" 1; 15; 1; 15; 4; 15; 6; 15; 8; 15; 8; 15; 8; 15"
           keyTimes="0; 0.15; 0.3; 0.35; 0.4; 0.5; 0.6; 0.7; 0.75; 0.8; 0.85; 0.9; 0.95; 1" 
           dur="1s"
           begin="0s; 5s; 9s; 17s;"
           end="2s; 8s; 15s; 25s;"	  
           fill="freeze"
		   restart="whenNotActive"		   
           id="circ-anim"/>
</svg>

Links zum Lernen:
CSS-Tricks
Learning SVG
Dokumentation auf W3 zu SVG Animate

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.