Softonic

Pembangkit Blok SVG

Langkah 1 / 2
Berikutnya

Bentuk blob mulai menggantikan lingkaran sempurna sekitar tahun 2018 sebagai “latar belakang bulat yang ramah” dalam desain antarmuka modern, berupa gambar di belakang ilustrasi tokoh utama, masker avatar, atau bintik-bintik warna pada halaman pendaratan. Generator ini membuat bentuk blob dari pergerakan acak di sekitar lingkaran, lalu meratakan poligon tersebut menggunakan kurva Bezier kuadratik sehingga terbentuk bentuk organik yang sedikit bergoyang sesuai keinginan desainer. Pengguna dapat mengatur jumlah titik kontrol (tingkat kompleksitas), intensitas pergerakan acak (kontras), serta nilai seed acak, kemudian menyalin file SVG hasilnya.

Cara pembuatan blob

  1. 1

    Pilih warna dan tingkat kompleksitas

    Kompleksitas menentukan jumlah titik kontrol (3–12). Semakin banyak titik, semakin banyak pula tonjolan yang muncul.

  2. 2

    Atur kontras

    Kontras mengatur sejauh mana setiap titik menyimpang dari jari-jari dasar: kontras rendah berarti bentuk hampir bulat, sedangkan kontras tinggi menunjukkan bentuk yang sangat terbelah (lobed).

  3. 3

    Pilih benih

    “Seed” adalah angka acak yang menentukan bentuk blob tersebut. Seed yang sama menghasilkan blob yang identik; jika seed berbeda, hasilnya akan berubah secara acak menjadi blob baru.

  4. 4

    Salin SVG

    Anda akan mendapatkan satu elemen `<path>` dalam kotak berukuran 400×400. Letakkan elemen tersebut di mana pun format SVG didukung.

Anatomi Jalur Blob

Generator tersebut mendistribusikan N titik secara merata di sekitar kotak berukuran 400×400 (pusat: 200, 200; jari-jari dasar: 130), mengubah setiap nilai jari-jari dengan nilai ±contrast, kemudian menghubungkan setiap pasangan titik menggunakan kurva Bezier kuadratik.

M x₀ y₀ Q x₁ y₁ midx midy Q x₂ y₂ midx midy ... Z

midx, midy merupakan titik tengah antara titik saat ini dan titik berikutnya; dengan menempatkan ujung setiap kurva di titik tersebut, poligon dibentuk menjadi bentuk yang harmonis dan alami.

Daftar parameter singkat

Pengaturan Rentang Efek
Kompleksitas 3–12 Jumlah lobus; angka 5–7 merupakan nilai optimal untuk UI.
Kontrol 0–100 Amplitudo langkah acak; nilai 30–60 terlihat lebih wajar.
# Benih 1–9999 Deterministik; benih yang sama menghasilkan hasil yang seragam dalam setiap eksekusi.
Warna kode heksadesimal Isi tunggal, tanpa garis. Tambahkan fill-opacity secara manual jika diperlukan.

Di mana fitur blobs bekerja terbaik

  • Hiasan latar belakang, ditempatkan di belakang judul dan pada sudut kosong bagian utama.
  • Masker Avatar, gunakan jalur tersebut sebagai clip-path untuk bingkai potret organik.
  • Akcent ilustrasi, bercak warna merek yang terletak di bawah ikon atau angka.
  • Masker gambar, menggunakan CSS mask-image, komponen ini memotong foto ke dalam bagian-bagian terpisah yang berbentuk alami.

Tips

  • Gunakan bentuk tanpa garis untuk latar belakang; penggunaan garis akan membuatnya terlihat seperti stiker. Untuk efek morphing animasi, generasikan dua blob dengan kompleksitas yang sama namun menggunakan seed yang berbeda, kemudian animasikan atribut d menggunakan pustaka seperti flubber atau svg-morpheus. – Susun tampilan SVG secara inline alih-alih menggunakan <img src=blob.svg>; hal ini memungkinkan Anda mengubah warna isi menggunakan variabel CSS saat eksekusi.
  • Pertahankan bounding box, tetapi hapus kode width="400" height="400" secara eksplisit jika Anda ingin objek tersebut dapat diskalakan ke kontainer apa pun.

Pertanyaan yang Sering Diajukan

Biji tersebut menginisialisasi objek srand() dari PHP sebelum proses langkah acak dimulai. Biji yang sama berarti urutan pemanggilan rand() yang sama, pergeseran titik yang sama, serta jalur yang identik.

Ya, tetapi hanya jika kedua jalur memiliki jumlah perintah dan jumlah titik yang sama. Pertahankan tingkat kompleksitasnya identik, lalu ubah nilai seed saja untuk memperoleh pasangan yang cocok untuk interpolasi. Gunakan pustaka tweening seperti GSAP MorphSVG atau flubber untuk animasi utama.

Ganti fill="#hex" pada jalur dengan fill="url(#gradient-id)", lalu tambahkan definisi <linearGradient> atau <radialGradient> di dalam blok <defs>. Sifat khusus CSS juga dapat digunakan jika Anda menempelkan kode SVG secara inline.

Filenya bersih, tetapi tidak dikurangi ukuran secara signifikan. Jika Anda memperhatikan ukuran byte, jalankan program ini sekali menggunakan SVGO; biasanya Anda dapat menghilangkan sekitar 20–30% karakter.

Tidak. SVG dihasilkan secara dinamis berdasarkan parameter dalam formulir URL, dan tidak ada data yang dicatat.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Konverter Ukuran File

Konversi antara byte, KB, MB, GB, TB, dan satuan biner IEC (KiB, MiB, GiB, TiB) dengan kombinasi desimal dan biner apa pun yang Anda inginkan.

Pemformat HTML

Format HTML secara lokal di browser dengan inden dua atau empat spasi. HTML tidak diunggah atau divalidasi.

JSON ke YAML

Konversi JSON ke YAML dengan penjelajaran yang tepat, penutupan string yang aman, skalar blok berbaris ganda, serta kunci yang tersortir untuk konfigurasi yang lebih rapi.

Alat ini tersedia dalam bahasa lain