Generator Pola SVG
Buat pola latar SVG yang dapat diulang dengan bentuk pilihan, warna latar depan dan latar belakang, serta skala yang dapat disesuaikan, lalu salin SVG atau CSS dan unduh berkasnya.
Generator Pola SVG — Pilih bentuk pola seperti titik, kisi, garis, garis diagonal, atau papan catur, atur warna latar depan dan latar belakang, dan sesuaikan skala ubin serta ketebalan garis. Pratinjau langsung mengubinkan pola di sebuah kotak, dan markup SVG siap pakai atau aturan CSS background ditampilkan untuk disalin dengan satu klik atau diunduh. Semuanya berjalan sepenuhnya di browser Anda; tidak ada warna, kode, atau berkas yang pernah dikirim ke server.
Apa itu Generator Pola SVG?
Generator Pola SVG adalah alat gratis dalam browser untuk desainer web dan pengembang front-end yang membutuhkan latar yang ringan dan dapat diulang tanpa membuka editor grafis. Anda memilih pola dari menu tarik-turun (titik, kisi, garis, diagonal, papan catur), mengatur warna latar depan untuk bentuk dan warna latar belakang untuk ubin, serta menggunakan kolom angka skala dan ketebalan untuk mengontrol ukuran ubin dan ketebalan goresan. Hasilnya adalah satu ubin yang digambar sebagai SVG yang tajam, dirancang untuk berulang tanpa sambungan, sehingga ukuran berkas tetap mungil dan pola membesar tanpa menjadi buram. Gunakan sakelar Format untuk mengalihkan keluaran yang dapat disalin antara markup SVG mentah dan aturan CSS background-image, lalu salin atau unduh berkas .svg untuk situs, kartu, bagian hero, dan mockup antarmuka.
Cara menggunakan Generator Pola SVG
- Pilih pola dari menu tarik-turun: Titik, Kisi, Garis, Diagonal, atau Papan Catur.
- Ketik atau pilih warna latar depan untuk bentuk dan warna latar belakang untuk ubin.
- Atur kolom angka Skala (ukuran ubin dalam piksel) dan Ketebalan (radius titik atau ketebalan garis).
- Buka Pengaturan dan gunakan sakelar Format untuk mengalihkan keluaran antara SVG dan CSS.
- Amati pratinjau langsung mengubinkan pola, lalu salin SVG atau CSS, atau klik Unduh untuk menyimpan berkas .svg.
Contoh
Latar polkadot
Pilih Titik, atur skala kecil seperti 24px dan ketebalan 3, dengan warna titik terang di atas ubin berlatar gelap untuk mendapatkan tekstur polkadot dengan jarak yang merata.
Kisi cetak biru
Pilih Kisi dengan skala 40px dan ketebalan tipis 1px, warna garis samar di atas latar biru pekat, untuk latar halaman bergaya cetak biru teknis.
Garis diagonal CSS
Pilih Diagonal, ubah sakelar Format ke CSS, dan salin aturan background-image yang dihasilkan dengan background-repeat: repeat langsung ke lembar gaya Anda.
Pertanyaan yang sering diajukan
- Pola apa saja yang bisa saya buat?
- Lima pola yang dapat diulang: titik, kisi, garis, garis diagonal, dan papan catur. Masing-masing digambar sebagai satu ubin SVG kecil yang berulang tanpa sambungan, sehingga tetap tajam pada ukuran berapa pun dan menjaga berkas tetap mungil.
- Apa yang dikontrol oleh Skala dan Ketebalan?
- Skala adalah ukuran satu ubin dalam piksel, yang menentukan seberapa jauh jarak antar bentuk yang berulang. Ketebalan adalah radius titik atau ketebalan garis di dalam ubin. Ketebalan dibatasi secara otomatis relatif terhadap skala agar pola tidak pernah memenuhi ubin secara berlebihan.
- Apa perbedaan antara keluaran SVG dan CSS?
- SVG memberi Anda markup mentah untuk berkas .svg mandiri atau penggunaan inline. CSS memberi Anda aturan background-image yang menggunakan data URI ditambah background-repeat: repeat, siap ditempel ke lembar gaya. Gunakan sakelar Format di Pengaturan untuk beralih di antara keduanya.
- Bisakah saya memilih warna secara visual alih-alih mengetik HEX?
- Ya. Klik chip warna di samping kolom latar depan atau latar belakang untuk membuka pemilih warna bawaan browser Anda, atau ketik nilai HEX seperti #4f86f7 secara langsung. Pratinjau dan keluaran diperbarui saat Anda mengubahnya.
- Apakah warna atau berkas saya diunggah ke suatu tempat?
- Tidak. Pola dibangun sepenuhnya di browser Anda sebagai string SVG, dan unduhan dibuat secara lokal sebagai Blob. Tidak ada warna, kode, atau berkas yang pernah dikirim ke server, jadi alat ini bekerja luring dan menjaga pekerjaan Anda tetap pribadi.
Alat terkait
Kode ke Gambar
Ubah cuplikan kode menjadi gambar dengan penyorotan sintaksis di browser Anda, dengan 20+ bahasa, tema dan latar kustom, nomor baris, serta ekspor PNG atau SVG.
Pemeriksa Kontras Warna
Periksa kontras WCAG 2.1 dan skor APCA Lc antara warna teks dan latar belakang, lihat lencana AA, AAA, dan 3:1, lalu terapkan warna lolos terdekat.
Pencampur Warna
Campurkan dua warna HEX pada rasio yang dipilih dalam ruang warna RGB atau Lab dan baca warna tengah hasilnya sebagai sampel dan nilai HEX yang dapat disalin.
Generator Gradasi Warna
Ubah satu warna HEX dasar menjadi skala OKLCH, HSL, atau RGB dengan langkah yang bisa diatur, petunjuk kontras WCAG per langkah, dan ekspor ke CSS, Tailwind, dan JSON.