<svg height="300px" width="600px">
<!-- Größe des Grafikbereichs-->
<path d="M 100 110 s 100 120 300 0" fill="none" stroke="#F7B109" stroke-width="20">
<animate attributename="d" begin="5s" dur="10s" fill="freeze" from="M 100 110 s 100 120 300 0" to="M 100 120 s 200 200 300 0"> </animate>
</path>
<!-- Das Grinsen
M = Moveto hier setzt der "Zeichenstift" auf M (großgeschrieben) ist eine absolute Angabe x, y; m (kleingeschrieben) eine relative Angab x, y das Koordinatensystem rechnet Pixel von links oben.
s = Bezierkurve, definiert werden der Punkt des Winkels xy und der Endpunkt xy
"Aus dem letzten Kontrollpunkt und Punkt des vorherigen kubischen Bézierkurvensegmentes wird eine stetig differenzierbare Fortsetzung des Pfades berechnet. Ist das vorherige Segment keine kubische Bézierkurve, so wird der fehlende Kontrollpunkt als identisch mit dem Ausgangspunkt angenommen. Angabe von weiteren Kontrollpunkten und Punkten führt zu einem Kurvenzug. Die Anzahl der (Kontroll-)Punkte muss immer exakt stimmen." (wikibooks)
stroke = Kontur, stroke-width = Breite der Kontur
fill = Füllung -->
<circle cx="200px" cy="50px" fill="#F7B109" r="10px" stroke="#F7B109" stroke-width="1">
<!-- die Augen - circle definiert einen Kreis cx, cy ist die Position der Kreismitte, r der Radius-->
<set attributename="r"
to="20px"
begin="10s" />
<set attributename="r"
to="25px"
begin="50s" />
<!-- Die Animation vergrößert den Radius, set ändert das Attribut -->
</circle>
<circle cx="300px" cy="50px" fill="#F7B109" r="10px" stroke="#F7B109" stroke-width="1">
<set attributename="r"
to="20px"
begin="10s" />
<set attributename="r"
to="25px"
begin="50s" />
<!-- Das zweite Auge -->
</circle>
</svg>
Ein svg Tutorial finden Sie bei wikibooks.