Scalable Vector Graphics (SVG) ist ein in XML geschriebenes Bildformat. Mit SVG können Sie zweidimensional skalierbare Grafiken codieren. Anschließend können Sie sie in CSS und JavaScript implementieren und ändern.
SVG ermöglicht drei Arten von Grafiken: Vektorformen (gerade und gekrümmte Linien in alle Richtungen und Formen), Bilder und Text. Aufgrund seiner vielfältigen Funktionen wenden sich Webdesigner an SVG, um komplexe Animationen zu erstellen. Sie sind einfach zu installieren, verlieren nicht an Qualität, wenn die Größe geändert wird, und erfordern keine Anwendungen von Drittanbietern, um zu funktionieren.
Da Animationen immer beliebter werden, sind sie den meisten nicht vertraut. In diesem Artikel werden 20 fantastische SVG-Animationen vorgestellt, die das Potenzial dieses Formats zeigen.
1. Medizinische SVG Icons von Kittons
Schnellzugriff
- 1. Medizinische SVG Icons von Kittons
- 2. Hover von SeanMcCaffery
- 3. Zum Aktualisieren nach unten ziehen (Paper Plane) von Nikolay Talanov
- 4. Mach einfach weiter mit Diaco M. Lotfollahi
- 5. Zum HTML5-Video hinzugefügte SVG-Filter
- 6. Puzzle
- 7. Liner Gradient von Patrick Young
- 8. Lassen Sie uns mit jjperezaguinaga reisen
- 9. Uhr von Mohamad Mohebifar
- 10. Animierte Icons von Luigi De Rosa
- 11. Alle Geräte in SVG von Chris Gannon
- 12. Wasserfall von Chris Gannon
- 13. Plant Generator von Blake Bowen
- 14. Clickable Icon von Hamish Williams
- 15. Neuer Kuchen von Marco Barría
- 16. Aktenvernichter von Chris Gannon
- 17. Low PolyLion von GRAYGHOST
- 18. Hourglass Loader von Leela
- 19. Responsive Cow von Sarah Drasner
- 20. Student von Domany
- Du bist dran
Diese warme und geschmeidige Animation eignet sich hervorragend für alle gesundheitsbezogenen Websites. Während Sie die verschiedenen Themen auflisten, erscheinen die Bilder auf subtile Weise. Das Krankenwagenauto oder das Atom wird gebaut, das Auge wird geöffnet und der Arzt wird herausspringen. Diese Animation zeigt den ganzen Spaß und die Dynamik von SVG.
Verknüpfung
2. Hover von SeanMcCaffery
Universelle Animation, die Sie auf jede interaktive Website stellen können. Das subtile Erscheinungsbild der Ränder beim Schweben verleiht Ihnen ein zufriedenstellendes Gefühl und lädt Sie ein, auf den Link zu klicken.
Verknüpfung
3. Zum Aktualisieren nach unten ziehen (Paper Plane) von Nikolay Talanov
Normalerweise werden die Seiten aktualisiert, wenn Sie darauf klicken. Diese Animation bringt dies auf ein neues Level. Wenn Sie es loslassen, starten Sie ein Papierflugzeug in den Himmel. Wenn Ihre Besucher Ihre App häufig aktualisieren sollen, sollten Sie eine solche Animation hinzufügen.
4. Mach einfach weiter mit Diaco M. Lotfollahi
Eine SVG-Animation, die das Potenzial des Skalierungsvektors zeigt. Die sanfte, präzise Bewegung des menschlichen Körpers ist hypnotisierend.
Verknüpfung
5. Zum HTML5-Video hinzugefügte SVG-Filter
Paul Irish vom Google Chrome-Team untersuchte, wie SVG Inhalte außerhalb von Vektorgrafiken ändern kann. Er kombinierte CSS und SVG zu erstaunlichen visuellen Filtern, um zu zeigen, dass SVG-Animation eine gute Ergänzung zu einem fertigen Video sein kann.
Verknüpfung
6. Puzzle
Mit der SVG-Animation können Sie erstaunliche interaktive Puzzles erstellen. In diesem Beispiel können wir eines von vielen Bildern auswählen und sehen, wie es in viele kleine Puzzleteile zerlegt wird. Sie können es auch rekonstruieren!
Verknüpfung
7. Liner Gradient von Patrick Young
Wenn Sie Neonlichter und schöne Schriftarten mögen, wird Ihnen diese Animation gefallen. Diese Arbeit zeigt, wie Sie keine beweglichen Linien für eine brillante Animation benötigen, sondern nur eine großartige Schriftart und einen richtigen Farbcode mit Verlaufseffekt.
Verknüpfung
8. Lassen Sie uns mit jjperezaguinaga reisen
Zwei Flugzeuge und ein Heißluftballon drehen sich um beliebte Sehenswürdigkeiten der Welt. Diese Animation ist farbenfroh, optimistisch und umwerfend. Es zeigt alles, was Sie tun können, wenn Sie sich in 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 sind Wunder für diese Animation.
Verknüpfung
10. Animierte Icons von Luigi De Rosa
Wenn Sie mit der Maus über diese Symbole fahren, werden die Animationen ausgelöst, die einfach, aber effektiv sind. Sie können sehen, dass Sie keine Wunder tun müssen, um ein beeindruckendes animiertes Symbol zu erstellen.
11. Alle Geräte in SVG von Chris Gannon
Eine einmalige Animation, die alle intelligenten Geräte, die wir verwenden, auf kreativste Weise durchläuft. Der Desktop verwandelt sich in einen Laptop, einen Laptop in ein Tablet und dann in ein Smartphone.
Verknüpfung
12. Wasserfall von Chris Gannon
Eine andere von Chris Gannon, dies ist eine saubere Demonstration eines schäumenden Wasserfallbodens. Die Bewegung des Wassers ist ordentlich und Sie können kleine Tropfen des Spritzwassers sehen, die die Ränder der Animation verlassen, um alles realistischer erscheinen zu lassen.
Verknüpfung
13. Plant Generator von Blake Bowen
Jetzt ist dies etwas anderes. Wenn Sie auf die Schaltfläche "Erstellen" klicken, sehen Sie, wie Pflanzen aufgehen und wachsen. Aber jedes Mal, wenn Sie klicken, bilden sich unterschiedliche Muster.
Verknüpfung
14. Clickable Icon von Hamish Williams
Eine weitere interaktive SVG-Datei, die eine Animation auslöst, sobald Sie darauf klicken. Dieser startet die "Send" -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 zuschauen, wie Papier zerkleinert wird, können Sie sich an dieser Animation erfreuen, in der eine Maschine in nahtloser Folge unbegrenzt oft Papier für Papier zerkleinert.
Verknüpfung
17. Low PolyLion von GRAYGHOST
Dies ist eine atemberaubende Illustration und Animation, die einen Löwenkopf zeigt, der in Form von animierten Polygonen erscheint und verschwindet.
Verknüpfung
18. Hourglass 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. Responsive Cow 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 verwirrter Astronaut sie ansieht.
20. Student von Domany
Ein begeisterter Schüler scheint lernbereit zu sein! Es ist eine großartige Animation, bei der die Buchseiten ordentlich umblättern. Kein Blinzeln seitens 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 deine Lieblings-SVG-Animationen, die nicht in dieser Liste enthalten sind? Teilen Sie Ihre Auswahl in den Kommentaren unten!
