Die Webdesignerin

Gesammelte Lieblingsseiten – schönes Webdesign.

SVG-Animations-Experiment mit SMIL

| Keine Kommentare

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
Susanne

Autor: Susanne

Als Web- und Grafikdesignerin bin ich immer auf der Suche nach Inspiration und neuen Ideen. Ich surfe im Internet und finde interessante Seiten. Besonders schöne Websites und aktuelle eigene Web-Projekte stelle ich hier kurz vor.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.