Latar Belakang dan Pola SVG Gratis | SVG Backgrounds

• Menyediakan 48 jenis latar belakang dan pola SVG ringan, dan pengguna dapat menerapkannya ke proyek web hanya dengan copy-paste
• Tiap desain bisa bebas diubah warna, ukuran, blend mode-nya, dan sebagian mendukung efek animasi seperti rotasi dan perpindahan
• Semua grafis merupakan desain orisinal SVGBackgrounds.com, dan dapat digunakan untuk proyek pribadi maupun komersial
• Namun, tidak boleh disertakan dalam produk pesaing dan atribusi (Attribution) wajib dicantumkan
• Sumber daya gratis yang memudahkan desainer web dan developer membuat latar belakang yang disesuaikan dengan brand

---

Gambaran umum latar belakang dan pola SVG gratis

• SVGBackgrounds.com menyediakan set latar belakang dan pola SVG yang bisa digunakan gratis
  • Pengguna dapat membuat latar belakang kustom dengan menyesuaikan warna, blend, ukuran, dan lain-lain di dalam situs
  • Sebagian desain mencakup fitur transformasi visual seperti zoom, rotasi, dan perpindahan
• Setiap latar belakang adalah desain orisinal SVGBackgrounds.com dan bisa langsung diterapkan ke website atau antarmuka aplikasi
• Grafis yang disediakan dapat diunduh dalam format kode inline CSS, SVG, dan PNG

Cara penggunaan

• Pengguna dapat melihat cara penerapan melalui halaman demo yang menunjukkan lokasi penyisipan kode CSS
• Latar belakang dapat diintegrasikan dengan mudah menggunakan metode copy and paste
• Situs ini menyediakan berbagai opsi penyesuaian seperti palet warna, skala, dan blend mode

Lisensi dan syarat penggunaan

• Saat menggunakan grafis, pengguna harus menyetujui perjanjian lisensi SVGBackgrounds.com
  • Dapat digunakan untuk proyek pribadi maupun komersial
  • Tidak boleh disertakan dalam produk pesaing atau dijual kembali
  • Untuk penggunaan gratis, atribusi (Attribution) wajib dicantumkan
• Pelanggan berbayar bisa mendapatkan manfaat penggunaan tanpa batas dan bebas atribusi

Pembuat dan komunitas

• Situs ini dikelola oleh Matt, yang merilis sumber daya gratis dan berbayar baru setiap bulan
  • Pengguna dapat menerima latar belakang terbaru dan notifikasi pembaruan melalui langganan email
• Pembuat menyarankan berbagai cara pemberian kredit kepada pengguna, seperti tautan HTML, berbagi di media sosial, dan dukungan (Buy me a coffee)

Sumber daya dan alat tambahan

• Selain latar belakang, SVGBackgrounds.com juga menyediakan berbagai elemen grafis seperti ikon SVG, ilustrasi, tombol, kursor, dan shape divider
• Melalui alat seperti SVG to CSS converter dan Shape Divider Generator, developer dapat mengonversi atau membuat SVG sendiri
• Melalui rilisan terbaru dan blog, situs ini terus merilis set desain baru dan pembaruan produk

[GN⁺]

Komentar Hacker News

• Latar belakang ini benar-benar keren. Namun, alih-alih tombol klik untuk menyalin, akan lebih baik jika ditambahkan <textarea> yang menampilkan CSS
  Di beberapa browser atau bagi sebagian pengguna, akses clipboard diblokir demi keamanan, jadi tidak ada alternatif saat fitur salin tidak berfungsi

  • Masukan yang bagus. Dulu memang pernah seperti itu, dan sepertinya tidak akan sulit untuk kembali ke cara tersebut atau menambahkan tombol tampilkan kode

• Pola atap oranye sangat saya sukai. Namun di Firefox, sebagian tidak tampil dengan benar — pusaran biru dan hijau masing-masing hanya dirender sebagai satu persegi dan satu heksagon
  Saya juga penasaran bagaimana cara menggunakan latar seperti ini tanpa mengganggu konten. Pola yang detail sering kali terasa mengalihkan perhatian secara visual

  • Umumnya latar ditempatkan di seluruh dokumen, lalu overlay dengan opasitas yang diatur ditambahkan di atasnya untuk menampilkan isi utama. Di PC layar penuh hasilnya cocok, tetapi di mobile ruangnya terbatas sehingga sulit menampilkan latar dengan cukup baik
  • Saya cek di Firefox dan sebenarnya berfungsi, tetapi efeknya baru terlihat setelah slider di bagian atas digerakkan. Sepertinya akan lebih baik jika arah efeknya dibalik, jadi saya akan memikirkannya lagi
  • Masalah “persegi biru dan heksagon hijau” akan teratasi jika slidernya digerakkan

• Saya suka antarmuka pergantian latar dan panel penyesuaian parameter. Dulu saya pernah bereksperimen dengan pola prosedural memakai SVG/canvas/webgl, dan melihat ini membuat saya ingin memaketkan ulang cara presentasinya

  • Terima kasih. Setelah beberapa kali merancang UI untuk manipulasi grafis, versi ini terasa sangat banyak dipoles. Ada batasan karena saya ingin menampilkan latar seluas mungkin, tetapi justru itu memungkinkan pilihan yang kreatif. Saya cukup puas dengan hasilnya

• Notifikasi bahwa “Anda punya akses ke latar belakang” menghabiskan 1/3 layar mobile dan tidak ada cara untuk menutupnya. Saya penasaran alasannya

  • Hanya menampilkan “Anda punya akses. Selamat menikmati!”, tetapi setelah saya telusuri, akses seperti ini biasanya tampaknya bernilai sekitar $120 per tahun
  • Masukan yang bagus. Karena saat thumbnail diklik tombol pratinjau berubah menjadi UI manipulasi latar, saya berpikir untuk mendesain ulang bagian ini

• Saat kursor diarahkan, terasa aneh karena bagian yang ingin saya lihat justru diburamkan atau tertutup

  • Alasan arahnya dibuat seperti itu adalah karena dengan satu klik pengguna bisa melihat tampilan penuh, dan pada status hover tidak banyak pratinjau tambahan yang bisa ditampilkan. Tujuan utama hover adalah memperjelas bahwa elemen tersebut dapat berinteraksi

• Tidak ada satu pun yang meniru efek <blink />. Saya menuntut pengembalian dana (candaan)

• Jika plugin Dark Reader diaktifkan, pratinjaunya tidak berfungsi

• Saya sangat suka pola segitiganya. Apakah mungkin itu terinspirasi oleh Rule 30?

  • Saya baru pertama kali mendengar Rule 30. Syukurlah tautannya ke Wikipedia, dan konsepnya cukup menarik serta merupakan ide yang menginspirasi. Terima kasih sudah membagikannya

• Sekitar setahun lalu saat membuat ulang portofolio saya, saya menemukan situs ini dan memakai salah satu latarnya di header. Terima kasih banyak

  • Senang mendengarnya berguna. Syukurlah kalau memang membantu

• Latar belakangnya benar-benar keren. Saya ingin mencobanya di game solitaire saya
  Namun di mobile, setelah pratinjau lalu scroll, gambarnya hilang dan harus dimuat ulang agar muncul lagi. Selain itu, akan bagus jika tiap pola punya nama

  • Aneh juga. Saya akan berterima kasih jika Anda mengirimkan info perangkat atau browser lewat formulir kontak. Sebagai informasi, setiap latar memang punya nama, tetapi di mobile disembunyikan karena ruang layar terbatas