Scalable Vector Graphics (SVG) er et billedformat skrevet i XML. Med SVG kan du kode en to-dimensionel skalerbar grafik. Derefter kan du implementere og ændre dem i CSS og JavaScript.

SVG tillader tre typer grafik: vektorformer (lige og buede linjer i alle retninger og figurer), billeder og tekst. På grund af sine forskellige muligheder vender webdesignere sig til SVG for at lave komplekse animationer. De er lette at installere, mister ikke kvaliteten, når de ændres, og kræver ikke, at nogen tredjepartsapps fungerer.

Da animationer stadig vokser i popularitet, er de fleste ikke bekendt med dem. Denne artikel vil fremhæve 20 fantastiske SVG-animationer, der viser potentialet i dette format.

1. Medicinske SVG-ikoner af kittoner

Denne varme og glatte animation er fantastisk til ethvert sundhedsrelateret websted. Mens du lister gennem de forskellige tråde, vises billederne subtilt. Ambulancebilen eller atomet konstruerer, øjet åbner, og lægen springer ud. Denne animation viser SVG's sjov og dynamik.

Link

2. Hold markøren af ​​SeanMcCaffery

Universal animation, som du kan lægge til ethvert interaktivt websted. Det subtile udseende på grænserne, når du holder musepekeren efterlader dig en tilfredsstillende fornemmelse og inviterer dig til at klikke på linket.

Link

3. Træk ned til forfriskning (papirplan) af Nikolay Talanov

Normalt opdateres sider, når du "trækker ned" på dem. Denne animation bringer dette til et nyt niveau. Når du trækker ned for at frigøre det, starter du et papirfly i himlen. Hvis du vil have dine besøgende til at opdatere din app ofte, skal du overveje at tilføje en animation som denne.

4. Just Keep Going af Diaco M. Lotfollahi

En SVG-animation, der viser potentialet i skaleringsvektoren. Den glatte nøjagtige bevægelse af den menneskelige krop er hypnotiserende.

Link

5. SVG-filtre tilføjet til HTML5-video

Paul Irish fra Google Chrome-teamet kiggede på, hvordan SVG kan ændre indhold uden for vektorgrafik. Han kombinerede CSS og SVG for at lave fantastiske visuelle filtre for at vise, at SVG-animation kan være en fin tilføjelse til en færdiggjort video.

Link

6. Puslespil

Du kan lave fantastiske interaktive puslespil med SVG-animation. I dette eksempel kan vi vælge et af mange billeder og se, hvordan det dekonstruerer til mange små stykker af puslespillet. Du kan også rekonstruere det!

Link

7. Liner Gradient af Patrick Young

Hvis du er i neonlys og smukke skrifttyper, vil du nyde denne animation. Dette arbejde viser, hvordan du ikke har brug for bevægelige linjer til en strålende animation, bare en fantastisk skrifttype og korrekt farvekode med gradienteffekt.

Link

8. Lad os rejse af jjperezaguinaga

To fly og en varmluftsballon, der drejer sig om populære vartegn i verden. Denne animation er farverig, optimistisk og blæst. Det viser alt, hvad du kan gøre, hvis du er dygtig i SVG.

Link

9. Ur af Mohamad Mohebifar

En simpel SVG-animation af et bevægeligt ur, der viser det aktuelle klokkeslæt. Pegernes beroligende bevægelse og minimalistiske design gør vidundere for denne animation.

Link

10. Animerede ikoner af Luigi De Rosa

Hvis du holder musepekeren over disse ikoner, udløser du animationerne, som er enkle, men effektive. Du kan se, at du ikke behøver at gøre vidundere for at gøre et imponerende animeret ikon.

11. Alle enheder i SVG af Chris Gannon

En animation med én gang, der går over alle de smarte enheder, vi bruger på den mest kreative måde. Skrivebordet bliver til en bærbar computer, en bærbar computer til en tablet og derefter til en smartphone.

Link

12. Vandfald af Chris Gannon

En anden af ​​Chris Gannon, dette er en pæn demonstration af en skummende vandfaldbund. Bevægelsen af ​​vandet er pæn, og du kan se små dråber af det stænkende vand forlade animationens grænser for at få alt til at se mere realistisk ud.

Link

13. Plantegenerator af Blake Bowen

Nu er denne noget andet. Når du klikker på knappen 'Opret', vil du se planter stige og vokse. Men hver gang du klikker, dannes forskellige mønstre.

Link

14. Klikbare ikon af Hamish Williams

En anden interaktiv SVG, der udløser en animation, når du klikker på den. Denne starter "Send" -animationen, når du klikker på den.

Link

15. Ny kage af Marco Barría

Interessant animation, der viser fremstillingen af ​​en kage lag for lag. Det er en imponerende SVG-animation, der er velegnet til et fødselsdagskort.

16. Paper Shredder af Chris Gannon

Hvis du kan lide at se papirudskæring, vil du nyde denne animation, der viser en maskine, der makulerer papir efter papir ubegrænsede tider i en sømløs rækkefølge.

Link

17. Lav PolyLion af GRAYGHOST

Dette er en betagende illustration og animation, der viser et løvehoved, der vises og forsvinder i form af animerede polygoner.

Link

18. Hourglass Loader af Leela

En anden effektiv animation, der kun bruger SVG. Hvert 5. sekund vil timeglasset vende på hovedet og starte en ny cyklus.

Link

19. Responsiv ko af Sarah Drasner

Dette er en sjov interaktiv animation, der giver dig mulighed for at klikke på en ko og trække den rundt om månen, mens en forvirret astronaut ser på den.

20. Studerende af Domany

En entusiastisk studerende ser ud til at være klar til at lære! Det er en fantastisk animation, hvor bogssiderne drejer pænt. Ingen blink fra den studerende, men dette er stadig en perfekt ryddig animation at afslutte denne liste.

Link

Din tur

Hvad er dine foretrukne SVG-animationer, der ikke er inkluderet på denne liste? Del dine valg i kommentarerne nedenfor!