20 Contoh Animasi SVG yang Fantastis

Scalable Vector Graphics (SVG) adalah format gambar yang ditulis dalam XML. Dengan SVG, Anda dapat membuat kode grafik skalabel dua dimensi. Kemudian, Anda dapat menerapkan dan memodifikasinya dalam CSS dan JavaScript.

SVG memungkinkan tiga jenis grafik: bentuk vektor (garis lurus dan melengkung ke segala arah dan bentuk), gambar, dan teks. Karena berbagai kemampuannya, desainer web beralih ke SVG untuk membuat animasi yang kompleks. Mereka mudah dipasang, tidak kehilangan kualitas saat diubah ukurannya, dan tidak memerlukan 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 kittons

Animasi yang hangat dan halus ini sangat bagus untuk situs web yang berhubungan dengan kesehatan. Saat Anda mendaftar melalui utas yang berbeda, gambar akan muncul secara halus. Mobil ambulans atau atom akan membangun, mata akan terbuka, dan dokter akan melompat keluar. Animasi ini menunjukkan semua kesenangan dan dinamisme SVG.

Tautan

2. Arahkan kursor ke SeanMcCaffery

Animasi universal yang dapat Anda masukkan ke situs web interaktif apa pun. Tampilan tepi yang halus saat Anda mengarahkan kursor membuat Anda merasa puas dan mengundang Anda untuk mengeklik tautannya.

Tautan

3. Tarik ke Bawah untuk Menyegarkan (Pesawat Kertas) oleh Nikolay Talanov

Biasanya, halaman akan disegarkan saat Anda "menariknya" ke bawah. Animasi ini membawa ini ke tingkat yang baru. Ketika Anda menarik ke bawah untuk melepaskannya, Anda akan meluncurkan pesawat kertas ke langit. Jika Anda ingin pengunjung Anda sering me-refresh aplikasi Anda, Anda harus mempertimbangkan untuk menambahkan animasi seperti ini.

4. Teruskan saja oleh Diaco M. Lotfollahi

Animasi SVG yang menunjukkan potensi Scaling Vector. Gerakan akurat yang halus dari tubuh manusia 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 yang menakjubkan dengan animasi SVG. Dalam contoh ini, kita dapat memilih salah satu dari banyak gambar dan melihat bagaimana gambar itu didekonstruksi menjadi banyak potongan kecil teka-teki. Anda dapat merekonstruksinya juga!

Tautan

7. Gradien Liner 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 brilian, hanya font yang bagus dan kode warna yang tepat dengan efek gradien.

Tautan

8. Ayo Bepergian dengan jjperezaguinaga

Dua pesawat terbang dan balon udara berputar di sekitar landmark populer dunia. Animasi ini penuh warna, optimis, dan menakjubkan. Ini menunjukkan semua yang dapat Anda lakukan jika Anda ahli dalam SVG.

Tautan

9. Jam oleh Mohamad Mohebifar

Animasi SVG sederhana dari jam bergerak yang menunjukkan waktu saat ini. Gerakan pointer yang menenangkan dan desain minimalis memberikan keajaiban untuk animasi ini.

Tautan

10. Ikon Animasi oleh Luigi De Rosa

Jika Anda mengarahkan kursor ke 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, lalu menjadi smartphone.

Tautan

12. Air Terjun oleh Chris Gannon

Satu lagi oleh Chris Gannon, ini adalah demonstrasi yang rapi dari dasar air terjun yang berbusa. Pergerakan airnya rapi, dan Anda bisa melihat tetesan kecil air yang memercik meninggalkan batas animasi untuk membuat semuanya tampak lebih realistis.

Tautan

13. Pembangkit Listrik oleh Blake Bowen

Sekarang yang satu ini adalah sesuatu yang lain. Ketika Anda mengklik tombol 'Buat', Anda akan melihat tanaman tumbuh dan berkembang. 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 yang mengesankan yang cocok untuk kartu ulang tahun.

16. Penghancur Kertas oleh Chris Gannon

Jika Anda menikmati menonton pencacahan kertas, Anda akan menikmati animasi ini yang menggambarkan mesin pencacah kertas demi kertas dalam waktu tak terbatas dalam urutan yang mulus.

Tautan

17. PolyLion Rendah oleh GRAYGHOST

Ini adalah ilustrasi dan animasi menakjubkan yang menggambarkan kepala singa muncul dan menghilang dalam bentuk poligon animasi.

Tautan

18. Hourglass Loader oleh Leela

Animasi efektif lainnya 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 sapi dan menyeretnya mengelilingi bulan sementara astronot yang kebingungan melihatnya.

20. Siswa oleh Domany

Seorang siswa yang antusias tampak siap untuk belajar! Ini adalah animasi yang bagus di mana halaman buku berputar dengan rapi. Tidak ada kedipan dari siswa, tetapi ini masih merupakan animasi yang sangat 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!