20 fantastycznych przykładów animacji SVG

Skalowalna grafika wektorowa (SVG) to format obrazu napisany w XML. Dzięki SVG możesz kodować dwuwymiarową, skalowalną grafikę. Następnie możesz je zaimplementować i zmodyfikować w CSS i JavaScript.

SVG pozwala na trzy rodzaje grafiki: kształty wektorowe (linie proste i zakrzywione we wszystkich kierunkach i kształtach), obrazy i tekst. Ze względu na różne możliwości projektanci stron internetowych zwracają się do SVG, aby tworzyć złożone animacje. Są łatwe w instalacji, nie tracą jakości po zmianie rozmiaru i nie wymagają do działania żadnych aplikacji innych firm.

Ponieważ animacje wciąż zyskują na popularności, większość z nich nie jest zaznajomiona z nimi. W tym artykule przedstawimy 20 fantastycznych animacji SVG, które pokazują potencjał tego formatu.

1. Medyczne ikony SVG według kittonów

Ta ciepła i płynna animacja jest świetna na każdą stronę internetową związaną ze zdrowiem. Podczas przeglądania różnych wątków obrazy będą się pojawiać subtelnie. Zbuduje się karetka lub atom, oko się otworzy, a lekarz wyskoczy. Ta animacja pokazuje całą zabawę i dynamikę SVG.

Połączyć

2. Najedź przez SeanMcCaffery

Uniwersalna animacja, którą możesz umieścić na dowolnej interaktywnej stronie internetowej. Subtelny wygląd obramowań po najechaniu kursorem daje satysfakcję i zachęca do kliknięcia linku.

Połączyć

3. Ściągnij w dół, aby odświeżyć (samolot papierowy) Nikołaja Talanova

Zwykle strony odświeżają się, gdy je „przeciągasz”. Ta animacja przenosi to na nowy poziom. Kiedy pociągniesz w dół, aby go uwolnić, wystrzelisz w niebo papierowy samolot. Jeśli chcesz, aby odwiedzający często odświeżali Twoją aplikację, rozważ dodanie takiej animacji.

4. Po prostu kontynuuj, Diaco M. Lotfollahi

Animacja SVG, która pokazuje potencjał wektora skalowania. Gładki, dokładny ruch ludzkiego ciała hipnotyzuje.

Połączyć

5. Filtry SVG dodane do wideo HTML5

Paul Irish z zespołu Google Chrome przyjrzał się, jak SVG może modyfikować treści poza grafiką wektorową. Połączył CSS i SVG, aby stworzyć niesamowite filtry wizualne, aby pokazać, że animacja SVG może być świetnym dodatkiem do gotowego wideo.

Połączyć

6. Układanka

Możesz tworzyć niesamowite interaktywne puzzle z animacją SVG. W tym przykładzie możemy wybrać jeden z wielu obrazków i zobaczyć, jak rozkłada się na wiele małych elementów układanki. Ty też możesz go zrekonstruować!

Połączyć

7. Gradient liniowy autorstwa Patricka Younga

Jeśli lubisz neony i piękne czcionki, spodoba ci się ta animacja. Ta praca pokazuje, że nie potrzebujesz żadnych ruchomych linii, aby uzyskać genialną animację, wystarczy świetna czcionka i odpowiedni kod koloru z efektem gradientu.

Połączyć

8. Podróżujmy przez jjperezaguinaga

Dwa samoloty i balon na ogrzane powietrze krążące wokół popularnych zabytków świata. Ta animacja jest kolorowa, optymistyczna i oszałamiająca. Pokazuje wszystko, co możesz zrobić, jeśli jesteś biegły w SVG.

Połączyć

9. Zegar Mohamada Mohebifara

Prosta animacja SVG poruszającego się zegara, która pokazuje aktualny czas. Kojący ruch wskaźników i minimalistyczny design robią cuda w tej animacji.

Połączyć

10. Animowane ikony autorstwa Luigi De Rosa

Jeśli najedziesz na te ikony, uruchomisz animacje, które są proste, ale skuteczne. Widać, że nie trzeba czynić cudów, aby stworzyć imponującą animowaną ikonę.

11. Wszystkie urządzenia w SVG autorstwa Chrisa Gannona

Animacja w jednym ujęciu, która w najbardziej kreatywny sposób przechodzi przez wszystkie inteligentne urządzenia, z których korzystamy. Pulpit zamieni się w laptopa, laptop w tablet, a potem w smartfon.

Połączyć

12. Wodospad autorstwa Chrisa Gannona

Kolejny autorstwa Chrisa Gannona, to zgrabna demonstracja spienionego dna wodospadu. Ruch wody jest czysty i widać małe krople rozpryskującej się wody opuszczające granice animacji, aby wszystko wyglądało bardziej realistycznie.

Połączyć

13. Generator roślin autorstwa Blake Bowen

Teraz ten jest czymś innym. Po kliknięciu przycisku „Utwórz” zobaczysz, jak rośliny rosną i rosną. Ale za każdym razem, gdy klikniesz, uformują się różne wzory.

Połączyć

14. Klikalna ikona autorstwa Hamisha Williamsa

Kolejny interaktywny plik SVG, który po kliknięciu uruchamia animację. Ten zainicjuje animację „Wyślij” po kliknięciu.

Połączyć

15. Nowe ciasto Marco Barría

Ciekawa animacja przedstawiająca tworzenie ciasta warstwa po warstwie. To imponująca animacja SVG odpowiednia na kartkę urodzinową.

16. Niszczarka do papieru autorstwa Chrisa Gannona

Jeśli lubisz oglądać rozdrabnianie papieru, spodoba ci się ta animacja, która przedstawia maszynę rozdrabniającą papier po papierze nieograniczoną liczbę razy w płynnej sekwencji.

Połączyć

17. Low PolyLion firmy GREYGHOST

Jest to oszałamiająca ilustracja i animacja przedstawiająca pojawianie się i znikanie głowy lwa w postaci animowanych wielokątów.

Połączyć

18. Ładowarka klepsydrowa autorstwa Leela

Kolejna efektywna animacja wykorzystująca tylko SVG. Co 5 sekund klepsydra odwróci się do góry nogami i rozpocznie nowy cykl.

Połączyć

19. Responsive Cow autorstwa Sarah Drasner

To zabawna interaktywna animacja, która pozwala kliknąć na krowę i przeciągnąć ją po księżycu, podczas gdy zdumiony astronauta patrzy na nią.

20. Student autorstwa Domany

Entuzjastyczny uczeń wydaje się gotowy do nauki! To świetna animacja, w której strony książki ładnie się przewracają. Uczeń nie mrugnął okiem, ale jest to nadal idealnie uporządkowana animacja na zakończenie tej listy.

Połączyć

Twoja kolej

Jakie są twoje ulubione animacje SVG, których nie ma na tej liście? Podziel się swoimi wyborami w komentarzach poniżej!