Generator SVG Blob
Buat bentuk blob SVG organik yang halus dengan titik, keacakan, dan seed yang bisa diatur. Isian polos, gradien, atau garis tepi; unduh .svg atau salin data URI CSS.
Pengaturan blob
Pengaturan dan seed yang sama selalu menghasilkan bentuk yang sama.
Pratinjau
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path fill="#8a3ffc" d="M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z"/></svg>
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Cpath fill='%238a3ffc' d='M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z'/%3E%3C/svg%3E");Alat Terkait
Lihat SemuaApa itu Generator SVG Blob?
Menghasilkan bentuk blob organik yang halus sebagai SVG. Atur jumlah titik jangkar, seberapa tidak beraturan bentuknya, dan ukurannya, pilih isian polos, gradien, atau garis tepi, lalu ekspor sebagai file .svg atau data URI CSS.
Cara menggunakan Generator SVG Blob
- Pilih Isian (Polos, Gradien, atau Garis tepi) dan warnanya.
- Atur Titik jangkar, Keacakan, dan Ukuran.
- Klik Acak atau masukkan Seed untuk bentuk tertentu.
- Klik Unduh .svg atau salin kode SVG-nya.
- Atau salin Latar CSS (data URI).
Contoh
Points 4, randomness 0, size 100, solid #8a3ffc
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path fill="#8a3ffc" d="M50,5C65,5 95,35 95,50C95,65 65,95 50,95C35,95 5,65 5,50C5,35 35,5 50,5Z"/></svg>
Kapan menggunakan Generator SVG Blob
Gunakan blob sebagai latar dekoratif, masker gambar, bingkai avatar, atau aksen ilustrasi. Dengan keacakan 0 Anda mendapatkan bentuk yang hampir lingkaran; untuk bentuk geometris yang presisi, gunakan CSS border-radius atau clip-path.
Cara kerja Generator SVG Blob
Titik jangkar ditempatkan merata di sekeliling lingkaran (radius 45% dari ukuran). Jarak setiap titik dari pusat dikurangi sejumlah pseudo-acak ber-seed hingga 60% × keacakan. Spline Catmull-Rom tertutup melalui titik-titik tersebut dikonversi menjadi perintah Bézier kubik, yang menjamin garis tepi halus tanpa patahan. Isian gradien memakai linearGradient SVG dari kiri atas ke kanan bawah.
Kasus Penggunaan Umum
- Bentuk latar dekoratif di landing page
- Masker gambar untuk foto profil
- Aksen ilustrasi dan stiker
- Blob animasi yang berubah bentuk (buat beberapa dengan seed berbeda)
- Placeholder dalam presentasi
Pertanyaan Umum
Bisakah saya membuat ulang blob yang saya sukai?
Bisa. Simpan Seed bersama jumlah titik, keacakan, dan ukurannya; semuanya selalu menghasilkan path yang sama.
Bagaimana cara memakai blob sebagai masker gambar?
Taruh path di dalam <clipPath> SVG atau gunakan SVG yang diunduh dengan CSS mask-image.
Mengapa blob tidak pernah menyentuh tepi?
Radius maksimum adalah 45% dari ukuran, menyisakan margin kecil agar garis tepi dan anti-aliasing tidak terpotong.