Scalable Vector Graphics (SVG) adalah format gambar yang ditulis dalam XML. Dengan SVG, Anda dapat mengkodekan grafik scalable dua dimensi. Kemudian, Anda dapat menerapkan dan memodifikasinya dalam CSS dan JavaScript.
SVG memungkinkan tiga jenis grafik: bentuk vektor (garis lurus dan kurva di semua arah dan bentuk), gambar, dan teks. Karena berbagai kemampuannya, perancang web beralih ke SVG untuk membuat animasi yang kompleks. Mereka mudah dipasang, tidak kehilangan kualitas saat diubah ukurannya, dan tidak membutuhkan aplikasi pihak ketiga untuk bekerja.
Karena animasi masih semakin populer, sebagian besar tidak mengenalnya. Artikel ini akan menyoroti 20 animasi SVG fantastis yang menunjukkan potensi format ini.
1. Ikon SVG Medis oleh kucing
tautan langsung
- 1. Ikon SVG Medis oleh kucing
- 2. Arahkan oleh SeanMcCaffery
- 3. Tarik ke Bawah untuk Menyegarkan (Pesawat Kertas) oleh Nikolay Talanov
- 4. Just Keep Going oleh Diaco M. Lotfollahi
- 5. Filter SVG Ditambahkan ke Video HTML5
- 6. Puzzle Jigsaw
- 7. Liner Gradient oleh Patrick Young
- 8. Ayo Bepergian dengan jjperezaguinaga
- 9. Jam oleh Mohamad Mohebifar
- 10. Ikon Animasi oleh Luigi De Rosa
- 11. Semua Perangkat di SVG oleh Chris Gannon
- 12. Waterfall oleh Chris Gannon
- 13. Generator Tanaman oleh Blake Bowen
- 14. Ikon yang Dapat Diklik oleh Hamish Williams
- 15. Kue Baru oleh Marco Barría
- 16. Paper Shredder oleh Chris Gannon
- 17. PolyLion Rendah oleh GRAYGHOST
- 18. Hourglass Loader oleh Leela
- 19. Sapi Responsif oleh Sarah Drasner
- 20. Siswa oleh Domany
- Giliranmu
Animasi yang hangat dan halus ini bagus untuk situs web yang terkait dengan kesehatan. Saat Anda mendaftar melalui utas yang berbeda, gambar akan muncul secara halus. Mobil ambulans atau atom akan terbentuk, mata akan terbuka, dan dokter akan melompat keluar. Animasi ini menunjukkan semua kesenangan dan dinamika SVG.
Tautan
2. Arahkan oleh SeanMcCaffery
Animasi universal yang dapat Anda masukkan ke situs web interaktif apa pun. Tampilan perbatasan yang halus saat Anda mengarahkan mouse membuat Anda merasa puas dan mengundang Anda untuk mengklik tautan.
Tautan
3. Tarik ke Bawah untuk Menyegarkan (Pesawat Kertas) oleh Nikolay Talanov
Biasanya, halaman akan disegarkan saat Anda "menariknya". Animasi ini membawa ini ke tingkat yang baru. Saat Anda menarik ke bawah untuk melepaskannya, Anda akan meluncurkan pesawat kertas ke langit. Jika Anda ingin pengunjung sering menyegarkan aplikasi, Anda harus mempertimbangkan untuk menambahkan animasi seperti ini.
4. Just Keep Going oleh Diaco M. Lotfollahi
Animasi SVG yang menunjukkan potensi Scaling Vector. Gerakan akurat tubuh manusia yang mulus sedang menghipnotis.
Tautan
5. Filter SVG Ditambahkan ke Video HTML5
Paul Irish dari tim Google Chrome melihat bagaimana SVG dapat memodifikasi konten di luar grafik vektor. Dia menggabungkan CSS dan SVG untuk membuat filter visual yang luar biasa untuk menunjukkan bahwa animasi SVG dapat menjadi tambahan yang bagus untuk video yang sudah jadi.
Tautan
6. Puzzle Jigsaw
Anda dapat membuat teka-teki jigsaw interaktif luar biasa dengan animasi SVG. Dalam contoh ini, kita dapat memilih satu dari banyak gambar dan melihat bagaimana ia mendekonstruksi ke banyak potongan kecil teka-teki. Anda dapat merekonstruksi juga!
Tautan
7. Liner Gradient oleh Patrick Young
Jika Anda menyukai lampu neon dan font yang indah, Anda akan menikmati animasi ini. Karya ini menunjukkan bagaimana Anda tidak memerlukan garis bergerak untuk animasi yang cemerlang, hanya font yang bagus dan kode warna yang tepat dengan efek gradien.
Tautan
8. Ayo Bepergian dengan jjperezaguinaga
Dua pesawat terbang dan balon udara panas berputar di sekitar landmark terkenal di dunia. Animasi ini penuh warna, optimis, dan menakjubkan. Ini menunjukkan semua yang dapat Anda lakukan jika Anda terampil dalam SVG.
Tautan
9. Jam oleh Mohamad Mohebifar
Animasi SVG sederhana dari jam bergerak yang menunjukkan waktu saat ini. Gerakan penunjuk dan desain minimalis yang menenangkan membuat keajaiban untuk animasi ini.
Tautan
10. Ikon Animasi oleh Luigi De Rosa
Jika Anda mengarahkan kursor ke ikon-ikon ini, Anda akan memicu animasi, yang sederhana namun efektif. Anda dapat melihat bahwa Anda tidak perlu melakukan keajaiban untuk membuat ikon animasi yang mengesankan.
11. Semua Perangkat di SVG oleh Chris Gannon
Animasi sekali pakai yang mencakup semua perangkat pintar yang kami gunakan dengan cara paling kreatif. Desktop akan berubah menjadi laptop, laptop menjadi tablet, kemudian menjadi smartphone.
Tautan
12. Waterfall oleh Chris Gannon
Satu lagi oleh Chris Gannon, ini adalah demonstrasi rapi dari air terjun berbusa. Pergerakan airnya rapi, dan Anda bisa melihat tetesan kecil cipratan air meninggalkan batas animasi untuk membuat semuanya tampak lebih realistis.
Tautan
13. Generator Tanaman oleh Blake Bowen
Sekarang ini adalah sesuatu yang lain. Ketika Anda mengklik tombol 'Buat', Anda akan melihat tanaman tumbuh dan tumbuh. Tetapi setiap kali Anda mengklik, pola yang berbeda akan terbentuk.
Tautan
14. Ikon yang Dapat Diklik oleh Hamish Williams
SVG interaktif lain yang memicu animasi setelah Anda mengkliknya. Yang ini akan memulai animasi "Kirim" setelah Anda mengkliknya.
Tautan
15. Kue Baru oleh Marco Barría
Animasi menarik yang menunjukkan pembuatan kue lapis demi lapis. Ini adalah animasi SVG mengesankan yang cocok untuk kartu ulang tahun.
16. Paper Shredder oleh Chris Gannon
Jika Anda menikmati menonton penghancuran kertas, Anda akan menikmati animasi ini yang menggambarkan penghancuran kertas mesin dengan kertas tanpa batas kali dalam urutan yang mulus.
Tautan
17. PolyLion Rendah oleh GRAYGHOST
Ini adalah ilustrasi dan animasi yang menakjubkan yang menggambarkan kepala singa muncul dan menghilang dalam bentuk poligon animasi.
Tautan
18. Hourglass Loader oleh Leela
Animasi efektif lain yang hanya menggunakan SVG. Setiap 5 detik, jam pasir akan terbalik dan memulai siklus baru.
Tautan
19. Sapi Responsif oleh Sarah Drasner
Ini adalah animasi interaktif lucu yang memungkinkan Anda mengklik seekor sapi dan menyeretnya mengelilingi bulan sementara astronot yang bingung melihatnya.
20. Siswa oleh Domany
Seorang siswa yang antusias tampaknya siap belajar! Ini adalah animasi yang bagus di mana halaman buku berubah dengan rapi. Tidak ada berkedip dari siswa, tetapi ini masih merupakan animasi yang rapi untuk menyimpulkan daftar ini.
Tautan
Giliranmu
Apa animasi SVG favorit Anda yang tidak termasuk dalam daftar ini? Bagikan pilihan Anda di komentar di bawah!
