Scalable Vector Graphics (SVG) menghasilkan elemen desain yang serbaguna. Mereka bisa rumit atau sederhana. Anda dapat menggabungkannya dengan animasi dan efek khusus. Dan mereka pada dasarnya responsif.
Tidak mengherankan jika desainer web telah menggunakan format ini. SVG menambahkan tingkat fleksibilitas baru dibandingkan gambar berbasis piksel. Mereka sangat cocok untuk desain modern. Plus, dukungan peramban bersifat universal.
Oleh karena itu, kami melanjutkan pencarian contoh bentuk SVG. Tujuannya adalah untuk menemukan beragam koleksi implementasi. Penasaran tentang apa yang mungkin? Lihatlah delapan contoh action bentuk SVG yang menyenangkan ini.
Bersembunyi
-
Gelombang CSS Sederhana oleh Goodkatz
-
Gambar SVG Diluncurkan oleh Silvia Gioia Florio
-
Transisi Halaman Bentuk SVG oleh Pixelbuilders
-
Elemen UI Cair oleh Aaron Iker
-
Layar Masuk Bunga SVG oleh Meg Wayne
-
Gradien Adaptif SVG oleh Andros Guiradó
-
Navigasi Lengket Mode Campuran oleh Jalin Burton
-
Kit Drum Animasi SVG oleh Josh
-
Menambahkan Bentuk pada Desain Anda
Gelombang CSS Sederhana oleh Goodkatz
Grafik pembagi sangat cocok untuk format SVG. Gambar-gambar ini tetap tajam di setiap layar. Gelombang animasi dalam cuplikan ini menambah sentuhan elegan. Hebatnya lagi, pengguna ponsel dapat menikmati fitur ini tanpa penurunan performa.
Lihat Pena Gelombang CSS Sederhana | Seluler & Lebar penuh oleh Goodkatz
Gambar SVG Diungkap oleh Silvia Gioia Florio
Berikut ini contoh efek masking SVG yang dapat dilakukan. Perhatikan saat poligon jatuh dari pohon ini untuk menampilkan gambar bertopeng. CSS dan JavaScript digunakan untuk menggerakkan animasi. Efek ini dulunya memerlukan Photoshop dan Flash. Tidak perlu lagi alat-alat berat itu.
Lihat Pena Gambar SVG Diungkap oleh Silvia Gioia Florio
Transisi Halaman Bentuk SVG oleh Pixelbuilders
Kita dapat menggunakan SVG untuk membuat transisi halaman yang menarik. Klik menu “hamburger” atau gulir untuk mengeluarkan efek tetesan. Seolah-olah layarnya meleleh tepat di depan mata kita. Dan itu pasti akan menarik perhatian pengguna.
Lihat Pena Transisi Halaman Bentuk SVG oleh Pixelbuilders
Elemen UI Cair oleh Aaron Iker
Elemen biasa seperti tombol radio dan kotak centang juga mendapat manfaat dari SVG. Cuplikan ini menampilkan elemen bentuk umum yang dilengkapi dengan animasi yang apik. Ini menambahkan tampilan yang sangat halus yang jauh lebih maju dari standarnya.
Lihat Pena Elemen UI Cair oleh Aaron Iker
Layar Masuk Bunga SVG oleh Meg Wayne
SVG tidak harus menjadi inti dari sebuah elemen. Itu juga bisa tumbuh subur dalam peran dekoratif. Di sini, satu bentuk diulang dan ditata melalui CSS. Setiap variasi menciptakan kedalaman dan keindahan.
Lihat Pena Layar Masuk Bunga SVG oleh Meg Wayne
Gradien Adaptif SVG oleh Andros Guiradó
Cuplikan ini menggunakan efek filter SVG untuk membuat gradien berisik. Gelombang animasi membentang melintasi area pandang. Ini mungkin merupakan tambahan yang bagus untuk area footer.
Lihat Pena Gradien adaptif SVG oleh Andros Guiradó
Ada beberapa implementasi SVG dalam cuplikan ini. Namun fokus utama kami adalah latar belakang yang melengkung. Ini adalah elemen kunci dalam presentasi. Teks dan video yang ditambahkan digabungkan untuk menciptakan efek yang menakjubkan.
Lihat Pena Nav & Pahlawan Lengket Mode Campuran oleh Jalin Burton
Perangkat Drum Animasi SVG oleh Josh
Mari selesaikan koleksi ini dengan penuh semangat. Tidak punya perlengkapan drum? Anda selalu dapat memainkan set virtual ini. SVG digunakan untuk memberi daya pada grafis. Sementara itu, beberapa suara yang tepat membuat mereka menjadi hidup. Ini dia, Ringo!
Lihat Pena Kit Drum Animasi SVG (Mainkan Saya!) oleh Josh
Menambahkan Bentuk pada Desain Anda
SVG telah menjadi pokok desain web. Formatnya hadir dengan banyak keuntungan. Dan kita dapat menggunakannya untuk menciptakan efek yang dulunya memerlukan peretasan.
Secara keseluruhan, SVG adalah salah satu alat paling ampuh yang kami miliki. Ini menambah banyak kemungkinan untuk desain, pergerakan, dan interaktivitas. Apa yang tidak disukai?
Lihat kami Koleksi CodePen untuk lebih banyak lagi contoh bentuk SVG. Anda mungkin menemukan kasus penggunaan yang sempurna untuk proyek Anda berikutnya.
Atas