Generator SVG Blob

Apa itu SVG blob generator?

SVG blob generator membuat bentuk organik tertutup dengan mengambil titik-titik di sekeliling lingkaran, lalu menghubungkannya dengan kurva Bézier yang halus. Hasilnya adalah siluet yang lembut dan cair, seperti yang biasa kamu lihat di belakang hero halaman pemasaran, di sekitar foto profil, atau sebagai blob latar berwarna di landing page.

Blob berada di titik tengah antara geometri dan keacakan. Ubah jumlah titik untuk mendapatkan bentuk seperti jelly bean (3-4), kerikil (5-6), atau acak-acakan (10+). Geser slider keacakan untuk mengubahnya dari hampir bulat sampai sangat terdistorsi. Tekan tombol dadu kapan saja untuk mengacak seed baru.

Semuanya berjalan di browser kamu. Ekspor sebagai potongan SVG yang siap ditempel, file .svg yang bisa diunduh, atau nilai clip-path CSS yang bisa langsung kamu terapkan ke elemen HTML apa pun untuk memotongnya menjadi bentuk blob.

Yang kamu pelajari saat membuat blob

• Kurva Bézier kubik memberi blob kehalusannya. Setiap pasangan titik yang bersebelahan punya dua titik kontrol, yang dihitung supaya garis singgungnya tetap menyambung di setiap sambungan.
• Spline Catmull-Rom (yang dipakai di sini) menghitung titik kontrol itu secara otomatis dari titik-titik di sekitarnya, jadi kamu tidak perlu menyetel titik kontrol manual agar kurvanya tetap halus.
• clip-path: path(...) di CSS bisa menerapkan bentuk blob ke elemen apa pun, entah gambar, div, atau video, tanpa memengaruhi kotak tata letaknya.
• Blob yang dirender sebagai SVG bisa diperbesar tanpa batas dan tanpa pecah, tidak seperti PNG, dan ukurannya hanya beberapa ratus byte.

Cara membuat blob langkah demi langkah

1. 1

   Pilih jumlah titik

   Sedikit titik (3-5) menghasilkan blob seperti jelly bean. Lebih banyak titik (8-12) menghasilkan bentuk tidak beraturan seperti kerikil.

2. 2

   Atur keacakan

   0% adalah lingkaran. 50% memberi lengkungan blob yang lembut. 100% memberi siluet dramatis yang sangat terdistorsi.

3. 3

   Pilih warna atau gradient

   Pakai satu warna isi, atau aktifkan Gradient lalu pilih dua warna dan satu sudut. Cocok dengan pola bagian hero yang populer.

4. 4

   Acak dan ekspor

   Tekan dadu untuk mengacak seed baru. Kalau sudah puas, salin SVG-nya, salin clip-path CSS-nya, atau unduh file .svg-nya.

Tempat blob paling cocok dipakai

Cara umum memakai blob, dan hal yang perlu diperhatikan.

Contoh blob untuk dicoba

<section class="hero">  <svg class="blob" viewBox="0 0 400 400" aria-hidden="true">    <path d="M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z"          fill="#7fb2ff"/>  </svg>  <h1>Welcome to Coddy</h1></section>

.hero { position: relative; }.hero .blob { position: absolute; inset: 0; width: 60%; opacity: 0.4; z-index: 0; }.hero h1 { position: relative; z-index: 1; }

.avatar {  width: 240px;  height: 240px;  object-fit: cover;  clip-path: path('M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z');}

<div class="backdrop">  <svg class="blob blob-a" viewBox="0 0 400 400">…</svg>  <svg class="blob blob-b" viewBox="0 0 400 400">…</svg></div>

.backdrop .blob { position: absolute; opacity: 0.5; filter: blur(60px); }.blob-a { top: -10%; left: -10%; width: 50%; }.blob-b { bottom: -10%; right: -10%; width: 60%; }

Kesalahan umum saat memakai SVG blob

• Lupa viewBox dan memberi <svg> lebar/tinggi tetap. Bentuknya tidak akan menyesuaikan ukuran layar, jadi pakai viewBox ditambah lebar/tinggi di CSS.
• Menganimasikan path besar yang berisi warna di setiap frame. Rasterisasi path itu berat; pakai transform/opacity atau buramkan lebih dulu dengan filter CSS supaya GPU yang mengerjakannya.
• Menyalin <svg> inline ke Tailwind/Bootstrap dan mewarisi display: inline, bukan block. Celah baseline bawaannya menyisakan beberapa piksel di bawah bentuknya.
• Memakai blob sebagai bentuk tombol dan lupa bahwa event mouse tetap terpicu di seluruh kotak pembatasnya, bukan di garis lengkungnya. Taruh <button> sungguhan di dalamnya kalau kamu butuh deteksi klik yang tepat.
• Menumpuk banyak blob tidak transparan dengan blur tinggi di ponsel. Total biaya repaint-nya bisa menurunkan framerate secara nyata di perangkat kelas bawah.

FAQ SVG Blob Generator