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