Ölçeklenebilir Vektör Grafikleri (SVG), XML ile yazılmış bir görüntü biçimidir. SVG ile iki boyutlu ölçeklenebilir bir grafik kodlayabilirsiniz. Ardından, bunları CSS ve JavaScript'te uygulayabilir ve değiştirebilirsiniz.
SVG üç tür grafiğe izin verir: vektör şekilleri (tüm yönlerde ve şekillerde düz ve eğri çizgiler), resimler ve metin. Web tasarımcıları, çeşitli yetenekleri nedeniyle karmaşık animasyonlar yapmak için SVG'ye başvuruyor. Kurulumu kolaydır, yeniden boyutlandırıldığında kaliteyi kaybetmez ve herhangi bir üçüncü taraf uygulamasının çalışmasını gerektirmez.
Animasyonlar hala popülerlik içinde büyüdüğü için, çoğu onlara aşina değil. Bu makalede, bu biçimin potansiyelini gösteren 20 muhteşem SVG animasyonu vurgulanacaktır.
1. tıbbi SVG Simgeler tarafından kittons
Bu sıcak ve pürüzsüz animasyon, sağlıkla ilgili herhangi bir web sitesi için mükemmeldir. Farklı iş parçacıkları listelediğinizde, görüntüler kurnazca görünür. Ambulans arabası veya atom inşa edilecek, göz açılacak ve doktor dışarı atlayacak. Bu animasyon SVG'nin tüm eğlence ve dinamizmini göstermektedir.
bağlantı
2. Fareyle SeanMcCaffery tarafından
Herhangi bir etkileşimli web sitesine koyabileceğiniz evrensel animasyon. Fareyle üzerine geldiğinizde sınırların ince görünümü sizi tatmin edici bir his bırakır ve sizi bağlantıyı tıklamaya davet eder.
bağlantı
3. Yenilemek için Aşağı Çekin (Kağıt Düzlem) Nikolay Talanov
Genellikle, sayfaları "aşağı çektiğinizde" yenilenir. Bu animasyon bunu yeni bir seviyeye taşıyor. Serbest bırakmak için aşağı çektiğinizde, gökyüzüne bir kağıt uçak fırlatacaksınız. Ziyaretçilerinizin uygulamanızı sık sık yenilemelerini istiyorsanız, bunun gibi bir animasyon eklemeyi düşünmelisiniz.
4. Diaco M. Lotfollahi'nin Devam Etmesine Devam Edin
Ölçeklendirme Vektörünün potansiyelini gösteren bir SVG animasyonu. İnsan vücudunun düzgün doğru hareketi hipnotize edicidir.
bağlantı
5. HTML5 Video'ya SVG Filtreleri Eklendi
Google Chrome ekibinden Paul Irish, SVG'nin vektör grafikleri dışındaki içeriği nasıl değiştirebileceğini inceledi. SVG animasyonunun hazır bir videoya iyi bir ek olabileceğini göstermek için şaşırtıcı görsel filtreler yapmak için CSS ve SVG'yi birleştirdi.
bağlantı
6. Yapboz
SVG animasyonuyla inanılmaz etkileşimli yapboz bulmacalar yapabilirsiniz. Bu örnekte, birçok resimden birini seçebilir ve bulmacanın birçok küçük parçasına nasıl yapısöktüğünü görebiliriz. Siz de yeniden inşa edebilirsiniz!
bağlantı
7. Liner Gradient Patrick Young tarafından
Neon ışıkları ve güzel yazı tiplerine giriyorsanız, bu animasyonun tadını çıkaracaksınız. Bu çalışma, mükemmel bir animasyon, sadece harika bir yazı tipi ve degrade efekti olan uygun renk kodu için nasıl herhangi bir hareketli satıra ihtiyacınız olmadığını gösterir.
bağlantı
8. Hadi Seyahat edelim jjperezaguinaga
İki uçak ve dünyanın popüler simge yapıları etrafında dönen bir sıcak hava balonu. Bu animasyon renkli, iyimser ve akıl almaz. SVG konusunda becerikliyseniz, yapabileceğiniz her şeyi gösterir.
bağlantı
9. Saat Mohamad Mohebifar tarafından
Geçerli saati gösteren hareketli bir saatin basit bir SVG animasyonu. İşaretçilerin yatıştırıcı hareketi ve minimalist tasarım bu animasyon için harikalar yaratıyor.
bağlantı
10. Luigi De Rosa'nın Hareketli Simgeleri
Bu simgelerin üzerine gelirseniz, basit ancak etkili animasyonları tetiklersiniz. Etkileyici bir animasyon simgesi oluşturmak için harikalar yapmak zorunda olmadığınızı görebilirsiniz.
11. SVG'deki Tüm Cihazlar - Chris Gannon
Kullandığımız tüm akıllı cihazları en yaratıcı şekilde ele alan tek seferlik bir animasyon. Masaüstü bir dizüstü bilgisayara, dizüstü bir tablete, daha sonra bir akıllı telefona dönüşecek.
bağlantı
12. Şelale Chris Gannon tarafından
Chris Gannon'dan bir diğeri, bu köpüklü bir şelale tabanının düzgün bir gösterisidir. Suyun hareketi düzgün ve her şeyin daha gerçekçi görünmesi için animasyonun sınırlarından çıkan küçük sıçrayan su damlaları görebilirsiniz.
bağlantı
13. Bitki Jeneratörü Blake Bowen
Şimdi bu başka bir şey. "Oluştur" düğmesini tıkladığınızda bitkilerin yükseldiğini ve büyüdüğünü göreceksiniz. Ancak her tıkladığınızda farklı desenler oluşur.
bağlantı
14. Tıklanabilir Simge Hamish Williams tarafından
Bir animasyonu tıkladıktan sonra tetikleyen başka bir etkileşimli SVG. Bu, tıkladıktan sonra “Gönder” animasyonunu başlatır.
bağlantı
15. Marco Barría'dan Yeni Pasta
Bir pasta katman katman yapımını gösteren ilginç animasyon. Doğum günü kartı için uygun etkileyici bir SVG animasyonu.
16. Kağıt Öğütücü Chris Gannon
Kağıt parçalamayı izlemekten hoşlanıyorsanız, kağıdı kesintisiz bir sırayla kağıtla parçalayan bir makineyi tasvir eden bu animasyonun keyfini çıkaracaksınız.
bağlantı
17. GRAYGHOST tarafından Düşük PolyLion
Bu, bir aslanın başını animasyonlu çokgenler şeklinde görünen ve kaybolan akıllara durgunluk veren bir illüstrasyon ve animasyon.
bağlantı
18. kum saati yükleyici Leela tarafından
Yalnızca SVG kullanan bir başka etkili animasyon. Her 5 saniyede bir, kum saati ters dönecek ve yeni bir döngü başlatacaktır.
bağlantı
19. Duyarlı İnek Sarah Drasner
Şaşkın bir astronot ona bakarken bir ine tıklayıp ayın etrafında sürüklemenizi sağlayan komik bir interaktif animasyon.
20. Domany tarafından öğrenci
Hevesli bir öğrenci öğrenmeye hazır görünüyor! Kitap sayfalarının düzgün bir şekilde döndüğü harika bir animasyon. Öğrenciden göz kırpmak yok, ancak bu hala bu listeyi sonuçlandırmak için mükemmel bir düzen.
bağlantı
Senin sıran
Bu listede yer almayan favori SVG animasyonlarınız neler? Aşağıdaki yorumlarda seçtiklerinizi paylaşın!