Sammlung von SVG-Beispielen und Dateien 1


Anschubsen: Bewegungen bei Mouse-Over

Das SVG-Logo bewegt sich beim Überfahren mit der Maus horizontal oder vertikal und wird mit einer genau definierten Rückholkraft wieder in die ursprüngliche Position gezogen.

Logo: Manfred Baierl
Animation: Niklas Gustavson


Bewegungen einzelner Teile mit anschließendem Mouse-Over-Link

Die Blume setzt sich aus vier einzeln animierten Teilen zusammen und bietet danach 4 Links zu weiteren Beispielen moderner Blumensträuße. Die SVG-Datei ist nur ca. 6 KB groß.

Entwurf und Animation: Manfred Baierl

 

 

Kombinierte Digital- und Analog-Uhr

Werbe-Version für eine FachzeitschriftDas Skript liest die System-Zeit Ihres Rechners aus und veranlasst dann mit Animationsbefehlen, dass sich die Zeiger drehen.

JavaScript und Idee: Jonathan Chetwynd, Modifikation: Frieder Sahler
Design, Code-Vereinfachung and Modifikation: Manfred Baierl


Mathe-Experiment mit einfachen, zufälligen Entscheidungen

Nach Pascal/Pachinko gewinnt auf Dauer immer die Mitte. Hier hat jeder Ball die Entscheidung links oder rechts. Klicken Sie [Starten] und beobachten Sie, wo die Bälle die Matrix verlassen.

JavaScript und Idee: www.svgcomposer.com
Design: Manfred Baierl

In neuem Fenster öffnen


Fussballfeld in Originalgröße

Durch das universelle Maßstabssystem mittels Viewbox können auch sehr große Entfernungsangaben in SVG-Dateien eingebunden werden. Hier als Beispiel das Grundraster eines Fußballfeldes in den Originalmaßen, wie von der FIFA für Europa- und Weltmeisterschaften vorgegeben (100 x 64 Meter).

Idee: Manfred Baierl

In neuem Fenster öffnen

 

 

Lerndateien für Sonderzeichen: Das Deleaturzeichen heißt "entfällt"

Alle reden davon, fast niemand kann es richtig zeichnen: Das Korrekturzeichen für den Fall der Streichung, des Entfallens und des Löschens. Nehmen Sie sich 3 Minuten Zeit und lernen es einfach mit unserer animierten Grafik:
Deleatur-Zeichen
At-Zeichen (@)
Et-Zeichen (&)
Violinschlüssel

Übrigens: Das kleine GIF-Bild links ist mehr als doppelt so groß wie die vollständige, animierte SVG-Datei (7 KB / 3 KB)

Idee und Realisierung: Manfred Baierl


Seekranker Elefant

Durch den animierten Horizont wirkt bei längerer Betrachtung der so genannte Differente Vertikaleffekt. Dieser ist verantwortlich für manche Sinkflüge von Ryan-Air oder die berüchtigte Seekrankheit.

Idee: Manfred Baierl / Umriss nach Nicu Buculei

In neuem Fenster öffnen

 

 

Deutschlandfahne einmal anders

Wenn die drei Farben nacheinander statt untereinander angezeigt und dazu noch weich überblendet werden, bekommt das hoheitliche Zeichen einen gewissen Charme, frei nach dem Motto: Von schwarzer Vergangenheit über rote Socken zu strahlenden Landschaften.

Idee und Realisierung: Manfred Baierl


Skalierbare Grafiken als SVG-Dateien

Klicken Sie auf das Bild, um es in einem eigenen Fenster anzuzeigen:
 

 

Weiter zum nächsten Kapitel:
Was machen die Großen?