Scalable Vector Graphics (SVG) är ett bildformat skrivet i XML. Med SVG kan du koda en tvådimensionell skalbar grafik. Sedan kan du implementera och ändra dem i CSS och JavaScript.
SVG tillåter tre typer av grafik: vektorformer (raka och böjda linjer i alla riktningar och former), bilder och text. På grund av sina olika funktioner vänder webbdesigners sig till SVG för att göra komplexa animationer. De är lätta att installera, förlorar inte kvaliteten när de ändras i storlek och kräver inte att några tredjepartsappar fungerar.
Eftersom animationer fortfarande växer i popularitet är de flesta inte bekanta med dem. Den här artikeln kommer att belysa 20 fantastiska SVG-animationer som visar potentialen i detta format.
1. Medicinsk SVG-ikoner av kattungar
snabblänkar
- 1. Medicinsk SVG-ikoner av kattungar
- 2. Hover av SeanMcCaffery
- 3. Dra ner till Refresh (Paper Plane) av Nikolay Talanov
- 4. Just Keep Going av Diaco M. Lotfollahi
- 5. SVG-filter Tillagda i HTML5-videon
- 6. Pussel
- 7. Liner Gradient av Patrick Young
- 8. Låt oss resa av jjperezaguinaga
- 9. Clock av Mohamad Mohebifar
- 10. Animerade ikoner av Luigi De Rosa
- 11. Alla enheter i SVG av Chris Gannon
- 12. Vattenfall av Chris Gannon
- 13. Plant Generator av Blake Bowen
- 14. Klickbar ikon av Hamish Williams
- 15. Ny tårta av Marco Barría
- 16. Paper Shredder av Chris Gannon
- 17. Low PolyLion av GRAYGHOST
- 18. Timglaslastare av Leela
- 19. Responsive Cow av Sarah Drasner
- 20. Student av Domany
- Din tur
Denna varma och smidiga animering är utmärkt för alla hälsorelaterade webbplatser. När du listar igenom de olika trådarna, kommer bilderna att visas subtilt. Ambulansbilen eller atomen kommer att konstruera, ögat öppnas och läkaren hoppar ut. Denna animering visar SVG: s alla nöjen och dynamik.
Länk
2. Hover av SeanMcCaffery
Universell animering som du kan lägga till vilken interaktiv webbplats som helst. Det subtila utseendet på gränserna när du svävar lämnar dig med en tillfredsställande känsla och inbjuder dig att klicka på länken.
Länk
3. Dra ner till Refresh (Paper Plane) av Nikolay Talanov
Vanligtvis kommer sidor att uppdateras när du “drar ner” på dem. Denna animering ger detta till en ny nivå. När du drar ner för att släppa det kommer du att starta ett pappersplan i himlen. Om du vill att dina besökare ska uppdatera din app ofta bör du överväga att lägga till en animering som denna.
4. Just Keep Going av Diaco M. Lotfollahi
En SVG-animation som visar potentialen för skalningsvektorn. Den mjuka exakta rörelsen i människokroppen är hypnotiserande.
Länk
5. SVG-filter Tillagda i HTML5-videon
Paul Irish från Google Chrome-teamet tittade på hur SVG kan modifiera innehåll utanför vektorgrafik. Han kombinerade CSS och SVG för att göra fantastiska visuella filter för att visa att SVG-animering kan vara ett bra komplement till en färdig video.
Länk
6. Pussel
Du kan göra fantastiska interaktiva pussel med SVG-animering. I det här exemplet kan vi välja en av många bilder och se hur den dekonstruerar till många små pusselbitar. Du kan också rekonstruera det!
Länk
7. Liner Gradient av Patrick Young
Om du använder neonljus och vackra teckensnitt, kommer du att njuta av denna animering. Detta arbete visar hur du inte behöver några rörliga linjer för en lysande animation, bara ett bra teckensnitt och korrekt färgkod med gradienteffekt.
Länk
8. Låt oss resa av jjperezaguinaga
Två flygplan och en varmluftsballong som kretsar kring populära landmärken i världen. Denna animering är färgglad, optimistisk och sinnesblåsande. Det visar allt du kan göra om du är skicklig i SVG.
Länk
9. Clock av Mohamad Mohebifar
En enkel SVG-animation av en rörlig klocka som visar aktuell tid. Pekarnas lugnande rörelse och minimalistisk design gör underverk för denna animering.
Länk
10. Animerade ikoner av Luigi De Rosa
Om du håller muspekaren över dessa ikoner utlöser du animationerna, som är enkla men effektiva. Du kan se att du inte behöver göra underverk för att göra en imponerande animerad ikon.
11. Alla enheter i SVG av Chris Gannon
En animering med ett tag som går över alla smarta enheter som vi använder på det mest kreativa sättet. Skrivbordet förvandlas till en bärbar dator, bärbar dator till en surfplatta och sedan till en smartphone.
Länk
12. Vattenfall av Chris Gannon
En annan av Chris Gannon, detta är en snygg demonstration av en skummande vattenfallsbotten. Vattnets rörelse är snygg, och du kan se små droppar av det stänkande vattnet som lämnar animeringens gränser för att allt ska se mer realistiskt ut.
Länk
13. Plant Generator av Blake Bowen
Nu är den här något annat. När du klickar på knappen "Skapa" ser du växter växa och växa. Men varje gång du klickar kommer olika mönster att bildas.
Länk
14. Klickbar ikon av Hamish Williams
En annan interaktiv SVG som utlöser en animering när du klickar på den. Den här kommer att initiera "Skicka" -animationen när du klickar på den.
Länk
15. Ny tårta av Marco Barría
Intressant animering som visar skapandet av en kaka lager för lager. Det är en imponerande SVG-animation som passar för ett födelsedagskort.
16. Paper Shredder av Chris Gannon
Om du gillar att titta på pappersstrimling kommer du att njuta av denna animering som visar en maskin som strimlar papper efter papper obegränsade gånger i en sömlös sekvens.
Länk
17. Low PolyLion av GRAYGHOST
Detta är en iögonfallande illustration och animering som visar ett lejonhuvud som visas och försvinner i form av animerade polygoner.
Länk
18. Timglaslastare av Leela
En annan effektiv animation som bara använder SVG. Var 5: e sekund vänder timglaset upp och ner och startar en ny cykel.
Länk
19. Responsive Cow av Sarah Drasner
Detta är en rolig interaktiv animering som låter dig klicka på en ko och dra den runt månen medan en förvirrad astronaut tittar på den.
20. Student av Domany
En entusiastisk student verkar redo att lära sig! Det är en fantastisk animation där boksidorna vänder snyggt. Ingen blinkning från eleven, men det är fortfarande en perfekt snygg animering att avsluta listan.
Länk
Din tur
Vilka är dina favorit-SVG-animationer som inte ingår i den här listan? Dela dina val i kommentarerna nedan!
