20 fantastische Beispiele für SVG-Animationen

Scalable Vector Graphics (SVG) ist ein in XML geschriebenes Bildformat. Mit SVG können Sie eine zweidimensionale skalierbare Grafik codieren. Anschließend können Sie sie in CSS und JavaScript implementieren und ändern.

SVG erlaubt drei Arten von Grafiken: Vektorformen (gerade und gekrümmte Linien in alle Richtungen und Formen), Bilder und Text. Aufgrund seiner vielfältigen Möglichkeiten wenden sich Webdesigner an SVG, um komplexe Animationen zu erstellen. Sie sind einfach zu installieren, verlieren bei Größenänderungen nicht an Qualität und benötigen keine Apps von Drittanbietern, um zu funktionieren.

Da Animationen immer beliebter werden, sind sie den meisten nicht vertraut. Dieser Artikel stellt 20 fantastische SVG-Animationen vor, die das Potenzial dieses Formats zeigen.

1. Medizinische SVG-Icons von Kittons

Diese warme und sanfte Animation eignet sich hervorragend für jede gesundheitsbezogene Website. Während Sie die verschiedenen Threads durchgehen, werden die Bilder subtil erscheinen. Der Krankenwagen oder das Atom bauen, das Auge öffnet sich und der Arzt springt heraus. Diese Animation zeigt den ganzen Spaß und die Dynamik von SVG.

Verknüpfung

2. Bewegen Sie die Maus über SeanMcCaffery

Universelle Animation, die Sie auf jeder interaktiven Website platzieren können. Das subtile Erscheinen der Ränder beim Bewegen der Maus hinterlässt ein befriedigendes Gefühl und lädt Sie ein, auf den Link zu klicken.

Verknüpfung

3. Pull Down to Refresh (Papierflieger) von Nikolay Talanov

Normalerweise werden Seiten aktualisiert, wenn Sie sie „herunterziehen“. Diese Animation bringt dies auf eine neue Ebene. Wenn Sie nach unten ziehen, um es freizugeben, starten Sie ein Papierflugzeug in den Himmel. Wenn Sie möchten, dass Ihre Besucher Ihre App häufig aktualisieren, sollten Sie eine Animation wie diese hinzufügen.

4. Mach einfach weiter von Diaco M. Lotfollahi

Eine SVG-Animation, die das Potenzial des Skalierungsvektors zeigt. Die reibungslose, präzise Bewegung des menschlichen Körpers ist hypnotisierend.

Verknüpfung

5. SVG-Filter zum HTML5-Video hinzugefügt

Paul Irish vom Google Chrome-Team untersuchte, wie SVG Inhalte außerhalb von Vektorgrafiken ändern kann. Er kombinierte CSS und SVG, um erstaunliche visuelle Filter zu erstellen, um zu zeigen, dass SVG-Animation eine gute Ergänzung zu einem fertigen Video sein kann.

Verknüpfung

6. Puzzle

Sie können erstaunliche interaktive Puzzles mit SVG-Animation erstellen. In diesem Beispiel können wir eines von vielen Bildern auswählen und sehen, wie es sich in viele kleine Puzzleteile zerlegt. Sie können es auch rekonstruieren!

Verknüpfung

7. Liner Gradient von Patrick Young

Wenn Sie auf Neonlichter und schöne Schriftarten stehen, werden Sie diese Animation genießen. Diese Arbeit zeigt, dass Sie für eine brillante Animation keine sich bewegenden Linien benötigen, sondern nur eine großartige Schriftart und den richtigen Farbcode mit Verlaufseffekt.

Verknüpfung

8. Lass uns reisen von jjperezaguinaga

Zwei Flugzeuge und ein Heißluftballon, die sich um beliebte Wahrzeichen der Welt drehen. Diese Animation ist farbenfroh, optimistisch und überwältigend. Es zeigt alles, was Sie tun können, wenn Sie sich mit SVG auskennen.

Verknüpfung

9. Uhr von Mohamad Mohebifar

Eine einfache SVG-Animation einer sich bewegenden Uhr, die die aktuelle Uhrzeit anzeigt. Die beruhigende Bewegung der Zeiger und das minimalistische Design wirken Wunder für diese Animation.

Verknüpfung

10. Animierte Ikonen von Luigi De Rosa

Wenn Sie mit der Maus über diese Symbole fahren, werden die Animationen ausgelöst, die einfach, aber effektiv sind. Sie sehen, dass Sie keine Wunder vollbringen müssen, um ein beeindruckendes animiertes Symbol zu erstellen.

11. Alle Geräte in SVG von Chris Gannon

Eine One-Take-Animation, die alle intelligenten Geräte, die wir verwenden, auf kreativste Weise durchgeht. Der Desktop wird zum Laptop, der Laptop zum Tablet und schließlich zum Smartphone.

Verknüpfung

12. Wasserfall von Chris Gannon

Ein weiteres von Chris Gannon, dies ist eine schöne Demonstration eines schäumenden Wasserfallbodens. Die Bewegung des Wassers ist ordentlich, und Sie können sehen, wie kleine Tropfen des Spritzwassers die Grenzen der Animation verlassen, um alles realistischer erscheinen zu lassen.

Verknüpfung

13. Pflanzengenerator von Blake Bowen

Das ist jetzt etwas anderes. Wenn Sie auf die Schaltfläche „Erstellen“ klicken, sehen Sie Pflanzen aufsteigen und wachsen. Aber jedes Mal, wenn Sie klicken, bilden sich andere Muster.

Verknüpfung

14. Anklickbares Symbol von Hamish Williams

Ein weiteres interaktives SVG, das eine Animation auslöst, sobald Sie darauf klicken. Dieser startet die „Senden“-Animation, sobald Sie darauf klicken.

Verknüpfung

15. Neuer Kuchen von Marco Barría

Interessante Animation, die die Herstellung eines Kuchens Schicht für Schicht zeigt. Es ist eine beeindruckende SVG-Animation, die für eine Geburtstagskarte geeignet ist.

16. Aktenvernichter von Chris Gannon

Wenn Sie gerne beim Zerkleinern von Papier zuschauen, werden Sie diese Animation genießen, die eine Maschine darstellt, die Papier für Papier unbegrenzt oft in einer nahtlosen Abfolge zerkleinert.

Verknüpfung

17. Low PolyLion von GRAYGHOST

Dies ist eine überwältigende Illustration und Animation, die einen Löwenkopf darstellt, der in Form von animierten Polygonen erscheint und verschwindet.

Verknüpfung

18. Sanduhr-Loader von Leela

Eine weitere effektive Animation, die nur SVG verwendet. Alle 5 Sekunden dreht sich die Sanduhr um und beginnt einen neuen Zyklus.

Verknüpfung

19. Reagierende Kuh von Sarah Drasner

Dies ist eine lustige interaktive Animation, mit der Sie auf eine Kuh klicken und sie um den Mond ziehen können, während ein verblüffter Astronaut sie ansieht.

20. Student von Domany

Ein begeisterter Schüler scheint bereit zu lernen! Es ist eine großartige Animation, bei der die Buchseiten ordentlich umgeblättert werden. Kein Blinzeln des Schülers, aber dies ist immer noch eine perfekt aufgeräumte Animation, um diese Liste abzuschließen.

Verknüpfung

Du bist dran

Was sind Ihre Lieblings-SVG-Animationen, die nicht in dieser Liste enthalten sind? Teilen Sie Ihre Auswahl in den Kommentaren unten!