Scalable Vector Graphics (SVG) is een afbeeldingsindeling geschreven in XML. Met SVG kunt u een tweedimensionale schaalbare afbeelding coderen. Vervolgens kunt u ze implementeren en wijzigen in CSS en JavaScript.
SVG biedt drie soorten afbeeldingen: vectorvormen (rechte en gebogen lijnen in alle richtingen en vormen), afbeeldingen en tekst. Vanwege de verschillende mogelijkheden wenden webontwerpers zich tot SVG om complexe animaties te maken. Ze zijn eenvoudig te installeren, verliezen geen kwaliteit wanneer het formaat wordt gewijzigd en vereisen geen apps van derden om te werken.
Omdat animaties nog steeds populairder worden, zijn de meeste er niet bekend mee. Dit artikel belicht 20 fantastische SVG-animaties die het potentieel van dit formaat laten zien.
1. Medische SVG-pictogrammen door kittons
Snelle links
- 1. Medische SVG-pictogrammen door kittons
- 2. Beweeg door SeanMcCaffery
- 3. Trek omlaag om te vernieuwen (Paper Plane) door Nikolay Talanov
- 4. Just Keep Going van Diaco M. Lotfollahi
- 5. SVG-filters toegevoegd aan de HTML5-video
- 6. Puzzel
- 7. Liner Gradient door Patrick Young
- 8. Let's Travel door jjperezaguinaga
- 9. Clock van Mohamad Mohebifar
- 10. Geanimeerde pictogrammen door Luigi De Rosa
- 11. Alle apparaten in SVG door Chris Gannon
- 12. Waterfall van Chris Gannon
- 13. Plant Generator door Blake Bowen
- 14. Klikbaar pictogram van Hamish Williams
- 15. Nieuwe cake door Marco Barría
- 16. Paper Shredder door Chris Gannon
- 17. Low PolyLion van GRAYGHOST
- 18. Zandloperlader van Leela
- 19. Responsive Cow van Sarah Drasner
- 20. Student van Domany
- Jouw beurt
Deze warme en soepele animatie is geweldig voor elke gezondheidsgerelateerde website. Terwijl u door de verschillende threads bladert, worden de afbeeldingen subtiel weergegeven. De ambulance-auto of het atoom construeert, het oog gaat open en de dokter springt eruit. Deze animatie toont alle plezier en dynamiek van SVG.
Koppeling
2. Beweeg door SeanMcCaffery
Universele animatie die u op elke interactieve website kunt plaatsen. Het subtiele uiterlijk van de randen wanneer u zweeft, geeft u een bevredigend gevoel en nodigt u uit om op de link te klikken.
Koppeling
3. Trek omlaag om te vernieuwen (Paper Plane) door Nikolay Talanov
Meestal worden pagina's vernieuwd wanneer u erop "trekt". Deze animatie brengt dit naar een nieuw niveau. Wanneer je naar beneden trekt om het los te laten, lanceer je een papieren vliegtuigje in de lucht. Als u wilt dat uw bezoekers uw app vaak vernieuwen, kunt u overwegen een dergelijke animatie toe te voegen.
4. Just Keep Going van Diaco M. Lotfollahi
Een SVG-animatie die het potentieel van de schaalvector laat zien. De soepele, nauwkeurige beweging van het menselijk lichaam is hypnotiserend.
Koppeling
5. SVG-filters toegevoegd aan de HTML5-video
Paul Irish van het Google Chrome-team keek naar hoe SVG inhoud buiten vectorafbeeldingen kan wijzigen. Hij combineerde CSS en SVG om verbazingwekkende visuele filters te maken om te laten zien dat SVG-animatie een prima aanvulling kan zijn op een kant-en-klare video.
Koppeling
6. Puzzel
Je kunt geweldige interactieve puzzels maken met SVG-animatie. In dit voorbeeld kunnen we een van de vele afbeeldingen kiezen en zien hoe het deconstrueert tot veel kleine stukjes van de puzzel. Je kunt het ook reconstrueren!
Koppeling
7. Liner Gradient door Patrick Young
Als je van neonlichten en prachtige lettertypen houdt, zul je deze animatie leuk vinden. Dit werk laat zien hoe je geen bewegende lijnen nodig hebt voor een briljante animatie, alleen een geweldig lettertype en de juiste kleurcode met verloopeffect.
Koppeling
8. Let's Travel door jjperezaguinaga
Twee vliegtuigen en een luchtballon draaien rond populaire bezienswaardigheden van de wereld. Deze animatie is kleurrijk, optimistisch en verbluffend. Het toont alles wat u kunt doen als u bekwaam bent in SVG.
Koppeling
9. Clock van Mohamad Mohebifar
Een eenvoudige SVG-animatie van een bewegende klok die de huidige tijd toont. De rustgevende beweging van de wijzers en het minimalistische ontwerp doen wonderen voor deze animatie.
Koppeling
10. Geanimeerde pictogrammen door Luigi De Rosa
Als u over deze pictogrammen zweeft, worden de animaties geactiveerd, die eenvoudig maar effectief zijn. Je kunt zien dat je geen wonderen hoeft te doen om een indrukwekkend geanimeerd pictogram te maken.
11. Alle apparaten in SVG door Chris Gannon
Een one-take-animatie die over alle slimme apparaten gaat die we op de meest creatieve manier gebruiken. De desktop verandert in een laptop, laptop in een tablet en vervolgens in een smartphone.
Koppeling
12. Waterfall van Chris Gannon
Nog een exemplaar van Chris Gannon, dit is een nette demonstratie van een schuimende watervalbodem. De beweging van het water is netjes en je kunt kleine druppels opspattend water zien die de randen van de animatie verlaten om alles realistischer te laten lijken.
Koppeling
13. Plant Generator door Blake Bowen
Nu is deze iets anders. Als u op de knop 'Maken' klikt, ziet u de planten opkomen en groeien. Maar elke keer dat u klikt, worden er verschillende patronen gevormd.
Koppeling
14. Klikbaar pictogram van Hamish Williams
Nog een interactieve SVG die een animatie activeert zodra je erop klikt. Deze start de animatie "Verzenden" zodra u erop klikt.
Koppeling
15. Nieuwe cake door Marco Barría
Interessante animatie die het maken van een cake laag voor laag laat zien. Het is een indrukwekkende SVG-animatie die geschikt is voor een verjaardagskaart.
16. Paper Shredder door Chris Gannon
Als u het leuk vindt om papiervernietiging te bekijken, zult u genieten van deze animatie die een machine papier per papier onbeperkte tijden in een naadloze volgorde afbeeldt.
Koppeling
17. Low PolyLion van GRAYGHOST
Dit is een verbluffende illustratie en animatie die een leeuwenkop voorstelt die verschijnt en verdwijnt in de vorm van geanimeerde polygonen.
Koppeling
18. Zandloperlader van Leela
Nog een effectieve animatie die alleen SVG gebruikt. Elke 5 seconden zal de zandloper ondersteboven keren en een nieuwe cyclus starten.
Koppeling
19. Responsive Cow van Sarah Drasner
Dit is een grappige interactieve animatie waarmee je op een koe kunt klikken en deze rond de maan kunt slepen terwijl een verbijsterde astronaut ernaar kijkt.
20. Student van Domany
Een enthousiaste student lijkt klaar om te leren! Het is een geweldige animatie waarbij de boekpagina's netjes draaien. Geen knipperen van de student, maar dit is nog steeds een perfect opgeruimde animatie om deze lijst af te sluiten.
Koppeling
Jouw beurt
Wat zijn je favoriete SVG-animaties die niet in deze lijst zijn opgenomen? Deel uw keuzes in de reacties hieronder!
