Cara menggunakan Generator Blob SVG
- Klik Blob acak baru sampai kamu suka bentuknya.
- Gunakan Kompleksitas untuk menambah atau mengurangi tonjolan, dan Keacakan untuk garis tepi yang lebih bulat atau lebih liar.
- Pilih warna solid, gradien, atau garis tepi saja.
- Unduh sebagai SVG (bisa diperbesar ke ukuran apa pun) atau PNG, atau salin kode SVG ke HTML kamu.
Cara blob dibuat
Generator menempatkan titik-titik di sekeliling lingkaran, lalu menggeser tiap titik ke dalam atau ke luar sebesar nilai acak, dan menghubungkannya dengan kurva tertutup yang halus (segmen Bézier kubik yang melewati setiap titik). Semakin banyak titik, semakin banyak tonjolan; semakin besar keacakan, semakin tidak bulat garis tepinya. Hasilnya berupa satu elemen <path> yang ringan, tajam di ukuran berapa pun, dan mudah diganti warnanya.
Menggunakan blob di website
- Dekorasi background: letakkan SVG secara absolute di belakang section hero, dengan warna lembut atau opacity rendah.
- Masking gambar: gunakan blob sebagai
mask-image, atau ubah path menjadiclip-path: path()untuk memotong foto mengikuti bentuk blob. - Animasi: buat dua blob dengan kompleksitas yang sama, lalu animasikan perpindahan di antara keduanya dengan CSS atau SMIL untuk efek “morphing”.
Butuh bentuk murni CSS? Generator Border Radius membuat blob dengan 8 nilai radius. Untuk pemisah section, coba Generator Wave SVG.
Juga dicari sebagai: membuat bentuk blob, blob generator, generator bentuk organik, blob svg acak, pembuat blob svg, generator shape svg, bentuk abstrak svg.
Tool yang cocok dipakai bersama Generator Blob SVG
- Generator CSS Clip-path — Potong gambar dan elemen menjadi bentuk apa pun: pilih salah satu dari 15 bentuk awal — segitiga, heksagon, bintang, panah, chevron, balon bicara, lingkaran, elips, persegi rounded inset… — lalu geser titiknya di atas contoh atau gambarmu sendiri.
- Generator Gradient CSS — Rancang gradient secara visual — geser titik warna, ubah sudut atau jenisnya, mulai dari preset — lalu salin CSS siap pakai dengan warna solid sebagai fallback.
- Optimizer SVG — Bersihkan SVG hasil ekspor dari Figma, Illustrator, Inkscape, atau Sketch dengan SVGO, lalu cek pratinjau sebelum dan sesudahnya untuk memastikan ikon tetap terlihat benar.
- Konverter SVG ke PNG — Render grafis vektor SVG menjadi gambar PNG yang tajam dengan ukuran persis yang kamu butuhkan, untuk app store, media sosial, email, atau dokumen.
Pertanyaan yang sering diajukan
Bagaimana cara membuat bentuk blob?
Klik Blob acak baru, atur kompleksitas dan keacakan, lalu unduh SVG-nya. Setiap blob berupa satu path halus.
Bolehkah blob digunakan untuk keperluan komersial?
Boleh. Bentuknya dibuat secara acak di perangkat kamu, jadi bisa dipakai di proyek apa pun tanpa perlu mencantumkan atribusi.
Bagaimana cara memasukkan gambar ke dalam blob?
Gunakan SVG sebagai CSS mask (mask-image: url(blob.svg)) pada gambar, atau salin path-nya ke dalam clipPath SVG.
SVG atau PNG?
SVG untuk website, karena tetap tajam di ukuran berapa pun dan ukuran filenya kecil. PNG untuk aplikasi yang tidak menerima SVG, seperti beberapa tool presentasi atau media sosial.
Bisakah saya memasang Generator Blob SVG sebagai aplikasi web dan memakainya offline?
Bisa. Generator Blob SVG adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.