Blob tanpa SVG sama sekali
Gratis, tanpa daftar, berjalan di peramban Anda.
Ketika Anda ingin bentuk organik tetapi tidak bisa — atau lebih suka tidak — menambahkan SVG: pustaka komponen yang markahnya bukan kendali Anda, templat surel, blok CMS yang membuang elemen tak dikenal.
Resepnya
| Bentuk | Kerikil |
|---|---|
| Ekspor sebagai | border-radius CSS |
| Ukuran | 104 B |
Langkah demi langkah
- Pindah ke generator blob dan pilih Kerikil.
- Pilih border-radius CSS dari baris ekspor.
- Salin deklarasinya ke elemen mana pun yang sudah punya lebar dan tinggi.
- Sesuaikan keacakannya dan salin ulang sampai siluetnya pas — hanya ada empat sudut untuk digarap.
Yang akan Anda salin
.blob {
width: 320px;
height: 320px;
border-radius: 46% 52.2% 40.5% 40% / 49.8% 56.1% 39.1% 45%;
}Lebih rinci
Ketahui apa yang Anda korbankan. Blob border-radius punya empat sudut, masing-masing seperempat busur elips, jadi ia hanya bisa berupa persegi panjang membulat yang ditarik-tarik — ia tidak bisa punya enam cuping bagaimanapun angkanya dipilih. Yang Anda dapat sebagai gantinya nyata: satu properti, tanpa markah tambahan, dan ia bertransisi serta beranimasi dengan mulus, yang tidak dilakukan jalur SVG tanpa kerja yang jauh lebih banyak.
Pertanyaan
Bentuk mana yang sebaiknya jadi titik awal untuk Blob tanpa SVG sama sekali?
Kerikil, diekspor sebagai border-radius CSS. Pasangan itulah yang menjadi dasar halaman ini, dan pratinjau di atas adalah bentuk itu persis — tetapi ia titik awal, bukan aturan. Semua penggeser tetap aktif begitu Anda membukanya.
Berapa banyak tambahannya ke halaman?
Sekitar 104 bita untuk kombinasi ini. Itu lebih kecil daripada satu ikon dan sama sekali tidak butuh permintaan jaringan, karena bentuknya adalah markah, bukan berkas gambar.
Apakah akan jalan di ponsel?
Ya. Pembatas gelombang disetel untuk melar mengikuti wadahnya alih-alih mempertahankan rasio aspek, dan itulah yang membuat satu bentuk bisa membentang di lebar layar mana pun tanpa bilah hitam. Blob mempertahankan proporsinya, karena blob yang dimelarkan hanyalah elips.
Setiap angka dan setiap bentuk di halaman ini dihasilkan dengan menjalankan generatornya saat build, jadi semuanya menggambarkan alat yang sebentar lagi Anda pakai, bukan versi yang pernah ada.