Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. SVG
Webdesign

Kecemerlangan SVG: 10 Contoh Menginspirasi Dari Seluruh Web

by
Length:ShortLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Inspiration: Online Stores Where Products Are Placed Front and Center
A Few Juicy, Inspirational New Websites

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

Scalable vector graphics (SVG) tidak perlu dikenalkan kepada desain web. Mereka bermain dalam skala dengan tajam, bermain dengan baik dalam animasi, mereka adalah format yang ampuh untuk icon dan banyak lagi. Post inspirasi ini adalah bagian dari seri berjalan di Envato Tuts+, mengambil daftar sepuluh website yang memanfaatkan SVG dalam teknologi atau kreatif.

Waark

Waark adalah studio web kreatif yang bangga dalam membuat website dengan desain yang elegan dan fungsiona. Ketika pertama kali dirilis itu mengambil hati komunitas dengan gerakan canggih penuh kejayaan dengan memanfaatkan Canvas dan, tentu saja, SVG.

httpwaaarkcom
waaark.com

Beberapa gerakan favorit saya terjadi pada jenis urutan loading dimana grafik menengah hidup pada memuat halaman dan berlanjut dengan gerakan lembut. Itu juga bagus untuk dicatat bahwa kebanyakan animasi SVG menggunakan librari GreenSock. Pastikan untuk menonton video yang diposting dari I Hate Tomatoes yang menjelaskan secara detail:

Supremo’s Typeterms

Type Terms adalah sebuah cheat sheet typografi bergerak. Jika kamu baru dalam hal typografi, atau hanya ingin menyegarkan pikiran, Type Terms adalah alat yang sempurna untukmu.

httpswwwsupremotvtypeterms
www.supremo.tv/typeterms/

Penggunaan SVG yang sangat menginspirasi untuk mengajarkan tentang terminologi typografi. Tiap karakter dalam pelajaran menarik perhatian dalam istilah diskusi membuatnya mudah mengidentifikasi apa yang sedang disajikan. Sementara saya tidak menganggap situs ini menginspirasi secara teknis, namun saya melihatnya penggunaannya sangat kreatif. Banyak contoh gerakan SVG yang terpisah, menggunakan CSS untuk gerakannya.

Cuberto

Cuberto adalah agen digital creative berbasis di UK dan merupakan sebuah tim dengan mata yang jeli untuk desain dan gerakan. Cara website Cuberto menggunakan SVG sangat menakjubkan; dari gerakan huruf yang sederhana, hingga indikator kecil mouse yang memberikan pandangan bagi pengguna untuk melakukan scroll.

httpcubertocom
cuberto.com

Tiap gerakan huruf 100% SVG. Cuberto memanfaatkan masking untuk membuat tiap karakter membentuk dengan tekstur terpisah. Sebuah situs yang sangat menginspirasi dan kreatif dalam menggunakan SVG dan gerakan. Catatan akhir dan fanatik GreenSock akan bersemangat untuk mengetahui bahwa GSAP digunakan. Menakjubkan.

Horizon

Horizon adalah apa yang mereka hargai sebagai "Realtime JavaScript Backend" yang membantu membangun secara cepat dan menyebarkan menggunakan API sederhana.

httphorizonio
horizon.io

Bagian favorit saya tentang situs ini, dan satu-satunya tempat yang menggunakan SVG, adalah layar yang memiliki pemandangan bergerak. Ini menggunakan GSAP dan serangkaian mask dan clip-path. Aspek lainnya yang sangat saya nikmati dalam menemukannya adalah fakta bahwa kamu dapat memasukkan SVG di dalam sebuah SVG! Luar Biasa!

SVG Porn

Kemana kamu pergi jika kamu menginginkan logo SVG bermutu? Tentu saja SVG Porn! Sebuah koleksi logo bagus untuk pengembang, penerbit dan desainer yang mengcover kategori yang cukup luas.

httpsvgporncom
svgporn.com

Itu sederhana, intuitif, dan langsung ke sasaran. SVG Porn menyediakan ruang untuk logo SVG (termasuk contoh familiar di atas ini) yang terbuka untuk umum dan dioptimasi (menghapus jalur duplikat, tanpa pengelompokan yang berlebihan, rapi, dll) dan tersedia di GitHub.

React Icons

Peralatan khusus ini menunjukkan bagaimana membuat grafis yang dibentuk secara matematis menggunakan SVG, JavaScript dan React.

httpjxnblkcomreact-iconslive-demo
jxnblk.com/react-icons/#live-demo

Menggunakan tiap slider, seorang pengguna dapat memperbarui titik jalur SVG dan bahkan mengganti diameter.

Ini digunakan untuk membuat grafis dengan pixel yang sempurna, yang diturunkan secara matematis yang tidak dapat dicapai oleh kebanyakan aplikasi. Saya menyukai jenis tool ini yang menampilkan kode secara live saat kamu memperbarui dan menjadi hampir seperti sulap saat grafis berubah dan berganti bentuk ketika menggerakkan tiap slider. Benar-benar menginspirasi dan fantastis.

Fleximize Squad

Fleximize adalah sebuah perusahaan yang menawarkan peminjaman keuangan bisnis kecil dengan sebuah misi untuk merevolusi dunia pendanaan bisnis.

Fleximize Squad merupakan sebuah pengalaman yang menyenangkan berbasis sepenuhnya pada animasi SVG. Melalui tiga cerita berbeda yang saling berhubungan, pengguna dapat mengakses cara pintar untuk meminta pinjaman.

httpsfleximizecommission
fleximize.com/mission

Situs menakjubkan ini membawa audio bersama dengan gerakan SVG dan, tentu saja, menggunakan GreenSock. Ini adalah pengalaman yang sangat linier, jadi jangan harapkan untuk menekan tombol kembali dengan monster ini, namun itu tetap merupakan contoh yang fantastis yang akan kamu nikmati seharian dengan inspektor DevTools yang terbuka.

Mo.js

Mo.js merupakan project oleh LegoMushroom adalah sebuah librari untuk membuat animasi dan yang cepat dan mulus untuk web.

Apa yang saya rasa menginspirasi dengan project ini adalah penggunaan fisika dalam gerakan, seperti blur, bouncing, dan masih banyak lagi–ditambah itu open source dan tiap orang dapat berkontribusi untuk membantu mengembangkan code langsung. Apakah saya menyebutkan itu juga mengkombinasikan audio? Periksa langsung project ini!

Demos: https://github.com/legomushroom/mojs#demos

Trulia: Rental Resumé

Trulia adalah sumber real estate mobile dan online yang membuat menemukan sebuah rumah dengan menyediakan kepada pembeli, penyewa dan penjual pandangan yang mereka butuhkan untuk membuat keputusan untuk dimana tinggal.

httpwwwtruliacomrentrental-resume
www.trulia.com/rent/rental-resume

Terkadang gerakan yang paling memuaskan adalah yang halus, dan dalam hal ini itu tepatnya yang menangkap perhatian saya. Animasi SVG ini (didesain oleh Jon Campos, dianimasikan oleh Sarah Drasner) benar-benar menjual ide pada mengirimkan sebuah resume dan berjalan melalui langkah-langkah secara visual tentang betapa mudahnya sebuah form pengajuan. Begitu luar biasa dimana tiap bagiannya SVG dan GreenSock.

SVG Generation

Ingin beberapa pola SVG ampuh untuk project mendatangmu? SVG Generation adalah tempat yang bagus untuk mendapatkan itu dan mengkustomisasinya sebelum kamu mendownload. Buat apapun dari zig-zag rumit, kumparan, kubus, strip dan masih banyak lagi. Bahkan blue jeans:

httpwwwsvgenerationcomrecipesBlue-Jean
www.svgeneration.com/recipes/Blue-Jean

Kustomisasi parameter seperti warna goresan, ukuran dan isi warna. Sebuah project ampuh yang juga open-source di GitHub. Kamu dapat memeriksa pembuat pola SVG ampuh lainnya oleh Philip Rogers dan berdasarkan Galeri Pola CSS3 dari Lea Verou.

Circulus & SVG Coordinate System Viewer

Setiap orang yang mengerti SVG mengenal karya Sara. Saya memilih kedua demo ini karena saya merasa keduanya benar-benar berguna dalam setiap rasa pendidikan dan dalam bentuk project.

Jika kamu kesulitan dalam mengerti apa yang dilakukan oleh atribut viewBox jangan khawatir. Demo ini akan menghilangkan misteri itu dan menunjukkanmu secara realtime bagaimana nilai mempengaruhi hasil. Karya luar biasa Sara!

httpssarasoueidancomdemosinteractive-svg-coordinate-system
sarasoueidan.com/demos/interactive-svg-coordinate-system/

Circulus adalah tool demo real-time lainnya yang juga dapat digunakan untuk meliputi hasil hasil dalam projectmu. Menu lingkaran cukup modern khususnya ketika kamu dapat menyaksikannya dibuat dan dikustomasi tepat di depanmu!

Kesimpulan

SVG ada di sekitar kita dalam website saat ini! Beritahu kami website mana yang menginspirasimu dalam hal kecemerlangan SVG, dan periksa sumber pelajaran dalam Tuts+ berikut untuk mempercepat dirimu:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.