Generator Blob SVG
Hasilkan bentuk blob SVG organik dan acak dari pengaturan kompleksitas dan kontras, regenerasi variasi dengan seed, pratinjau langsung, dan salin SVG atau CSS clip-path.
Generator Blob SVG — Atur berapa banyak titik yang dimiliki bentuk (kompleksitas) dan seberapa tidak beraturan tepinya (kontras), lalu klik Regenerasi untuk mengocok variasi acak baru dari seed berikutnya. Pratinjau langsung menampilkan blob saat kamu menyetelnya, dan kamu memperoleh baik markup SVG lengkap maupun CSS clip-path yang siap ditempel ke stylesheet. Semuanya dihitung di browser kamu dengan generator acak berbasis seed; tidak ada bentuk, warna, atau pengaturan yang pernah meninggalkan perangkatmu.
Apa itu Generator Blob SVG?
Generator Blob SVG adalah alat gratis di browser untuk desainer dan pengembang front-end yang menginginkan bentuk blob yang lembut dan organik untuk latar belakang, bagian hero, avatar, atau aksen dekoratif tanpa menggambarnya secara manual. Kamu mengontrol dua nilai: kompleksitas (jumlah titik jangkar di sekeliling bentuk) dan kontras (seberapa jauh setiap titik menyimpang dari lingkaran sempurna). Sebuah seed dalam state, yang dinaikkan oleh tombol Regenerasi, memungkinkanmu menelusuri variasi tanpa batas sambil menjaga kompleksitas dan kontras tetap. Output dirender sebagai satu jalur Bézier tertutup yang halus, sehingga kamu bisa menyalin markup SVG yang bersih, mengambil aturan CSS clip-path() untuk memasking elemen apa pun, atau mengunduh berkas .svg yang siap pakai. Gunakan untuk membuat dekorasi sesuai merek dengan cepat atau untuk mempelajari bagaimana jalur blob dibangun dari titik-titik di sekeliling lingkaran.
Cara menggunakan Generator Blob SVG
- Buka Pengaturan dan atur kompleksitas (jumlah titik, 3-16) untuk bentuk.
- Atur kontras (0-100) untuk mengontrol seberapa tidak beraturan dan bergelombang tepinya.
- Pilih warna isian dengan chip warna atau dengan mengetik nilai HEX.
- Klik Regenerasi untuk mengocok variasi acak baru dari seed berikutnya hingga kamu menyukai bentuknya.
- Salin markup SVG atau aturan CSS clip-path, atau klik Unduh untuk menyimpan berkas .svg.
Contoh
Blob latar belakang lembut
Atur kompleksitas ke 6 dan kontras ke sekitar 40 untuk blob yang lembut dan membulat, lalu regenerasi beberapa kali hingga kamu menemukan bentuk yang menyenangkan untuk latar belakang hero atau kartu.
Bentuk organik runcing
Naikkan kompleksitas ke 12 dan kontras ke 80 untuk siluet yang lebih bergerigi dan energik, berguna untuk lencana atau ilustrasi yang ceria.
Masker clip-path CSS
Salin aturan clip-path: path('...') yang dihasilkan dan terapkan ke gambar atau div agar elemen dipangkas mengikuti garis luar blob.
Pertanyaan yang sering diajukan
- Apa yang dikontrol oleh kompleksitas dan kontras?
- Kompleksitas adalah jumlah titik jangkar yang ditempatkan secara merata di sekeliling lingkaran (3 hingga 16) — lebih banyak titik membuat garis luar lebih detail. Kontras adalah seberapa jauh setiap titik didorong secara acak ke dalam atau ke luar dari radius dasar (0 hingga 100), sehingga 0 mendekati lingkaran biasa dan 100 sangat tidak beraturan.
- Bagaimana cara kerja tombol Regenerasi?
- Setiap blob dibangun dari seed numerik ditambah kompleksitas dan kontrasmu. Regenerasi menaikkan seed satu dan menghitung ulang bentuknya, sehingga kamu memperoleh variasi acak baru di setiap klik sementara kompleksitas, kontras, dan warna tetap sama.
- Apa perbedaan antara output SVG dan output clip-path?
- Output SVG adalah berkas <svg> yang lengkap dan berdiri sendiri yang dapat kamu sematkan atau unduh. Output clip-path adalah satu aturan CSS yang menggunakan path() yang dapat kamu terapkan ke elemen HTML mana pun untuk memangkasnya menjadi garis luar blob yang sama.
- Bisakah saya mengubah warna dan mengunduh berkasnya?
- Ya. Atur warna isian dengan chip warna atau nilai HEX; pratinjau, SVG, dan unduhan semuanya menggunakannya. Klik Unduh untuk menyimpan berkas blob.svg yang dihasilkan sepenuhnya di browser kamu.
- Apakah bentuk atau pengaturan saya dikirim ke server?
- Tidak. Blob dihasilkan dengan fungsi acak lokal berbasis seed dan semua string SVG dan clip-path dibangun di browser kamu. Tidak ada yang diunggah, jadi alat ini bekerja offline dan pekerjaanmu tetap privat.
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.