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

Das 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: