20+ Harika Animasyonlu SVG Paketi

Yayınlanan: 2015-11-16

SVG (veya Ölçeklenebilir Vektör Grafikleri), iki boyutlu vektörler içeren ve geliştiricilerin dinamik ve hareketli harika grafikler ve grafik uygulamalar oluşturmasına olanak tanıyan XML tabanlı bir dosya biçimidir.

İçindekiler gizle
SVG POP Watch – Duyarlı Animasyonlu SVG İzleme Motoru
Animasyonlu SVG Çizimleri Paketi
Hareketli 3D Metin Stilleri – SVG
Hareketli SVG Hava Durumu Simgeleri
6 Paket SEO SVG Simgesi
StarshineJS – SVG Hareketli Köpüklü Yıldızlar HTML Efekti
Hareketli SVG Tarayıcı Simgeleri
Enliven' em Premium Eklentisi: Web Promosyon Simgeleri
Trigonlar – Soyut SVG Görüntüleri Oluşturun ve Canlandırın
Cyclo – SVG Yükleyici Kiti
Dairesel HTML5 Ön Yükleyici
Duyarlı Müzisyenler Animasyonu
Animasyonlu SVG Simgesi Mega Paketi
Katlanır Yükleyici Hareketli SVG
Flatimation SVG – Hareketli Bir SVG Simge Seti
Retro SVG Kamera Fotoğraf Slayt Gösterisi
16 Animasyonlu SEO Simgesi
Aşırı duygusal Menü: jQuery Eklentisi
40 Hareketli SVG Sosyal Medya Simgesi
İşaretler ve Logolar ile Hareketli SVG Küresi
Gear HTML5 Ses Oynatıcı
JavaScript ile 3D Pasta Grafik
SVG'nin Gücünü Kullanan Harika Web Sitelerine Örnekler
Cavalier: Mükemmelliğin Fatihi
Toplu iğne
Poignee de ana erkeksi
Toplu iğne
iFly50
ARK: Star Citizen Starmap
Depremleri Garip Tutun
30u
QED Grubu
Melanie Daveid
WWF Fransa – Dünya Saati Paris
Nerisson
Tek Tasarım Şirketi
MIDORI AOYAMA

SVG, bir metin düzenleyicide veya CSS / JS ile kodla değiştirilebilen güçlü bir görüntü formatıdır ve web tasarımında giderek daha fazla kullanılmaktadır.

SVG'nin en büyük artılarından biri, tüm ekran çözünürlüklerinde keskin görünebilmesidir. Çok küçük dosya boyutları içerebilir ve kolayca düzenlenebilir ve değiştirilebilir. SVG görüntüleri, kullanılan görüntülerin boyutu ve son tasarımınızla etkileşim biçimleri söz konusu olduğunda çok daha fazla özgürlük sunar.

Bu XML tabanlı vektör görüntü formatı, web geliştiricileri ve web tasarımcıları için işleri kolaylaştırır, bu nedenle size ilham vermek için burada 22 harika animasyonlu SVG paketi toplamaya karar verdik. Bu premium SVG paketleri, web sitelerine simgeler ve hareketli metinler eklemekten saatler, hareketli grafikler ve daha fazlasını eklemeye kadar farklı amaçlara hizmet eder.

Bu animasyonlu SVG paketlerini web tasarım koleksiyonunuza ekleyin ve bir sonraki web sitesi projeniz için hazır olun!

Not Ayrıca, SVG'lerin web tasarımlarında nasıl kullanılacağına dair bazı örnekleri aşağıya ekledik.

SVG POP Watch – Duyarlı Animasyonlu SVG İzleme Motoru

Toplu iğne

SVG POP Watch, projeniz veya site ekibiniz için mükemmeldir. Görünümünü kolayca değiştirebilirsiniz, retinaya hazır ve duyarlı animasyonlu SVG saat motoruna sahiptir. Kendi tasarımınızı da kolayca ekleyebilirsiniz. Bu SVG saati birçok harika özellikle birlikte gelir, bu yüzden kontrol ettiğinizden emin olun!

Animasyonlu SVG Çizimleri Paketi

Animasyonlu SVG Çizimleri Paketi Toplu iğne

Bu gerçekten güzel ve hareketli bir SVG illüstrasyon paketidir. Snap.SVG JavaScript kitaplığı kullanılarak oluşturulmuşlardır ve projelerinizde harika görünürler.

Hareketli 3D Metin Stilleri – SVG

Animasyonlu 3B Metin Stilleri - SVG Önizlemesi - CodeCanyon Toplu iğne

Bu set, 10 benzersiz 3D animasyonlu metin stili içerir. HTML metni kullanırlar; bu, Google'ın onu diğer HTML metinleri gibi okuduğu anlamına gelir. Bu paketin içerdiği stiller gerçekçi, düz ve izometriktir.

Hareketli SVG Hava Durumu Simgeleri

Hareketli SVG Hava Durumu Simgeleri Toplu iğne

Bu hareketli düz hava simgeleri güzel bir şekilde tasarlandı. Her birinin kendine özgü animasyonu vardır ve bunları kullanarak web tasarım projelerinizi kesinlikle daha yaratıcı ve çekici hale getireceksiniz.

6 Paket SEO SVG Simgesi

SVG Simgesi Hareketli SVG Paketleri Toplu iğne

Bu paket 6 SEO SVG animasyonlu simge içerir. Web sitenizi etkileşimli hale getirmek için bunları kullanabilir ve web tasarım projelerinize entegre edebilirsiniz.

StarshineJS – SVG Hareketli Köpüklü Yıldızlar HTML Efekti

StarshineJS Hareketli SVG Paketleri Toplu iğne

Animasyonlu HTML efektiyle HTML öğelerinize parlaklık, seksi veya çizgi ışıklar ekleyebilirsiniz. Yerleşimlerini, boyutunu, rengini ve çok daha fazlasını kolayca ayarlayabilirsiniz.

Hareketli SVG Tarayıcı Simgeleri

Hareketli SVG Simgeleri Toplu iğne

Bu animasyonlu SVG simgeleri, tam olarak web sitenizin ihtiyaç duyduğu şeydir. Müşterilerinize uygulamanızın, temanızın veya oyununuzun tüm büyük tarayıcılarda mükemmel şekilde çalıştığını söylemenin mükemmel bir yoludur.

Enliven' em Premium Eklentisi: Web Promosyon Simgeleri

Hareketli SVG Simgeleri Paketleri Toplu iğne

Bu paket 50 web tanıtım ikonu içerir. Bu, Enliven'em için bir eklentidir. Her simge, toplamda 250 SVG dosyası alacağınız anlamına gelen 5 arka plan varyasyonu ile birlikte gelir.

Trigonlar – Soyut SVG Görüntüleri Oluşturun ve Canlandırın

Trigonlar Hareketli SVG Paketleri Toplu iğne

Bu, isteğe bağlı animasyonlarla modern ve şık bir SVG görüntüsü oluşturmanıza yardımcı olacak çok esnek bir JS betiğidir. Bu set, mükemmel web tasarım projesini yapmak için kullanabileceğiniz 30 yerleşik animasyon efekti içerir.

Cyclo – SVG Yükleyici Kiti

Cyclo - SVG Yükleyici Kiti Toplu iğne
Bu setle ön yükleyicileriniz harika görünecek! İşte yalnızca SVG'de yapılmış 33 yükleme animasyonu efekti.

Dairesel HTML5 Ön Yükleyici

Dairesel HTML5 Ön Yükleyici Toplu iğne

Bu, normal bir kullanıcı deneyimi ile web sitenizin içeriğine sorunsuz bir yolculuk arasında geçiş yapacak dairesel bir HTML5 ön yükleyicisidir.

Duyarlı Müzisyenler Animasyonu

Duyarlı Müzisyenler Animasyon Animasyonlu SVG Paketleri Toplu iğne

Bu paket, birkaç animasyonlu SVG müzisyeni ve orijinal vektör dosyalarını içerir. Ayrıca bir demo paketiniz var, bir müzisyen paketi. Bu paket çok iyi belgelenmiştir.

Animasyonlu SVG Simgesi Mega Paketi

Toplu iğne

Animasyonlu SVG Icon Mega Pack, vektör sanatınızı canlandıracak. Tek yapmanız gereken resminizi kaydetmek, HTML'nize bir kod satırı eklemek ve hazırsınız!

Katlanır Yükleyici Hareketli SVG

Katlanır Yükleyici Hareketli SVG Toplu iğne

Katlanır Yükleyici SVG animasyonu, ön yükleyici sayfanız için mükemmeldir. Güvenle kullanın!

Flatimation SVG – Hareketli Bir SVG Simge Seti

Flatimation Hareketli SVG Paketleri Toplu iğne

Flatimations SVG animasyonlu simge seti, web sitenizi daha eğlenceli ve yaratıcı hale getirecek. Bu göz alıcı simgeler, herhangi bir cihazda ve tarayıcıda harika görünecek.

Retro SVG Kamera Fotoğraf Slayt Gösterisi

Retro Animasyonlu SVG Paketleri Toplu iğne

Bu Retro SVG Kamera fotoğraf Slayt Gösterisi, düz tasarımdan ilham almıştır. Retro ama çağdaş görünüyor ve görüntüleri canlandırmak ve görüntülemek için harika bir yol.

16 Animasyonlu SEO Simgesi

Hareketli SVG Simgeleri Paketleri Toplu iğne

Web sitenizi hayata geçirecek bu 16 hareketli SEO ikonuna sahip olmaya ve kullanmaya ne dersiniz? Tamamen ölçeklenebilir vektör grafikleridir ve her cihazda ve tarayıcıda harika görünürler.

Aşırı duygusal Menü: jQuery Eklentisi

Aşırı duygusal Menü jQuery Eklentisi Toplu iğne

Bu eklenti, öğeler olarak çevreler içeren aşırı duygusal bir menü oluşturmanıza yardımcı olacaktır. SVG filtreleri kullanır, 6 menü stili içerir, birçok özelleştirilebilir seçenek ve çok daha fazlası ile birlikte gelir.

40 Hareketli SVG Sosyal Medya Simgesi

Hareketli SVG Paketleri Sosyal Medya Simgeleri Toplu iğne

İşte web sitenizin ziyaretçilerini sosyal medya sayfalarınıza yönlendirmenin mükemmel bir yolu olan gerçekten harika bir animasyonlu SVG simgeleri seti.

İşaretler ve Logolar ile Hareketli SVG Küresi

Hareketli SVG Logoları Toplu iğne

Bu, hem mobil hem de masaüstü cihazlarda iyi çalışan, işaretçileri ve logoları olan gerçekten harika bir animasyonlu SVG küresi. Bir konumu görselleştirmenin mükemmel bir yoludur.

Gear HTML5 Ses Oynatıcı

Teçhizat Hareketli SVG Paketleri Toplu iğne

Artık müziğinizi yaratıcı bir şekilde kolayca sergileyebilirsiniz. Bu Gear Player, kesinlikle seveceğiniz çok ilgi çekici bir kullanıcı arayüzü sunar.

JavaScript ile 3D Pasta Grafik

JavaScript ile 3D Pasta Grafik Toplu iğne

Bu 3D Pasta Grafiği JavaScript, SVG ve VML alternatifinde geliştirilmiştir. Kolayca özelleştirebilir, konumunu, yüksekliğini, yarıçapını, efsane niteliklerini, metin boyutunu ve çok daha fazlasını değiştirebilirsiniz.

SVG'nin Gücünü Kullanan Harika Web Sitelerine Örnekler

Cavalier: Mükemmelliğin Fatihi

Cavalier svg web sitesi Toplu iğne

Bu oyun serisi, animasyon ve grafikler için SVG kullanılarak oluşturulmuştur. Posture & Balance, yenilikçi teknolojilerle tasarlanmış Cavalier adlı bir platform için oluşturulmuş ilk oyundur.

Poignee de ana erkeksi

Poignee svg web sitesi Toplu iğne

Bu hareketli ve fotoğrafik yeni web sitesi, Fransa merkezli grafik tasarım ve dijital yaratıcı stüdyo Poignee de main virile için oluşturuldu. Sonuç inanılmaz!

iFly50

iFly50 svg web sitesi Toplu iğne

FLY KLM Magazine ellinci baskısını kutlarken, nihai seyahat koleksiyonu için canlı bir şekilde canlandırılan bir site tasarladı. Bu şekilde, Dünya'nın en güzel 50 büyüleyici yeri sunuldu.

ARK: Star Citizen Starmap

svg web sitesiYıldız haritası Toplu iğne

İnanılmaz bir ARK arayüzü kullanan bu web sitesi, bir uzay aracı üreticisi olan Robert's Space Industries'i “Star Citizen” oyunu içinde sunuyor. Bu, Star Citizen vatandaşlarını koruyabileceğiniz, kendi uzay aracınızın bilgileri, güncellemeleri ve satın alımları için bir portaldır.

Depremleri Garip Tutun

svg kullanan Deprem web sitelerini tutun Toplu iğne

Keep Earthquakes Weird, Portland nüfusunu bir deprem durumunda hazırlamak amacıyla oluşturulmuş, çarpıcı SVG grafik efektleriyle oluşturulmuş bir platformdur. İçerik çok eğitici.

30u

30u svg web sitesi Toplu iğne

30u, stile dikkat eden ve bazı ilginç SVG özelliklerini kullanan geliştiriciler tarafından oluşturulan bir sitede ayakkabı satan bir e-mağazadır.

QED Grubu

QED-Grubu svg web sitesi Toplu iğne

QED GROUP sitesinde, size harika bir navigasyon deneyimi sunacak harika düşündürücü çizimler var. Sitenin düzeni şık ve akıllıdır.

Melanie Daveid

Melanie Daveid svg web sitesi Toplu iğne

Melanie Daveid'in web sitesi, internette bulunabilecek en güzel portföy sitelerinden biridir. Site, yumuşak geçişler ve muhteşem el çizimleri içeriyor

WWF Fransa – Dünya Saati Paris

WWF Fransa svg web sitesi Toplu iğne

Bu animasyonlu site WWF Fransa için oluşturuldu ve 19 Mart'ta Dünya Saati için Eyfel Kulesi'nin ışıklarının kapatılacağını duyurmak için kullanıldı.

Nerisson

Nerisson svg web sitesi Toplu iğne

Nerisson namı diğer Jimmy Raheriarisoa, web/mobil tasarım, illüstrasyon ve hareket tasarımında uzmanlaşmış bir Fransız sanat yönetmenidir. Bu, güzel çizimler ve grafik özellikleri ile harika bir portföy sitesidir.

Tek Tasarım Şirketi

One Design svg web sitesi Toplu iğne

One Design Company, tasarımcılar, geliştiriciler, proje yöneticileri, yazarlar ve sanatçılardan oluşan deneyimli ve hevesli bir ekiptir. Siteleri, net SVG görüntülerine dayanan canlı ve etkileşimli bir sitedir.

MIDORI AOYAMA

MIDORI AOYAMA svg web sitesi Toplu iğne

Midori Aoyama, Tokyo merkezli bir DJ ve yapımcıdır. Kendi partisi “EUREKA!”yı kurdu. bu hala Japonya'daki en iyi house müzik partilerinden biri. Onun sitesi de yenilikçi, ilginç bir SVG örneği ve bir kullanıcı olarak bundan nasıl yararlanabileceğinizi.