Ö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!