Generator gelombang dan blob CSS & SVG
Geser beberapa penggeser, dapatkan bentuk, salin kodenya. Gelombang untuk pembatas bagian, blob untuk latar dan masker — diekspor sebagai SVG, latar CSS, clip-path, atau satu border-radius saja. Tidak ada yang diunggah dan tidak ada yang dibuat di server: kurvanya dihitung di halaman ini, itulah sebabnya ia seketika dan sebabnya ia tetap jalan tanpa koneksi.
Gaya
Bentuk
Atur
Keluaran
Tempelkan ini langsung ke proyek Anda. SVG-nya tidak membawa markah pengenal, komentar generator, maupun tautan kembali ke sini.
Mengapa kurva ini tidak punya patahan
Sebagian besar generator semacam ini menempatkan titik kendali Bézier dengan kira-kira — sepertiga jalan menuju titik berikutnya, biasanya — dan hasilnya punya patahan kecil di setiap titik sampel. Anda tidak melihatnya pada gambar kecil dan tidak mungkin melewatkannya begitu bentuknya selebar tiga meter di belakang gambar utama. Yang ini menurunkan setiap titik kendali dari garis singgung spline Catmull-Rom, sehingga kedua ruas kurva yang bertemu di sebuah titik menghitung arah yang *sama* dari dua tetangga yang sama. Kehalusan di sini bukan pengaturan, dan bukan sesuatu yang diperiksa belakangan: ia konsekuensi dari aritmetikanya, dan rangkaian pengujian memastikannya berlaku di setiap sambungan pada ribuan bentuk yang dihasilkan.
CSS yang Anda salin adalah bentuk yang Anda lihat
Dua hal biasanya rusak di antara pratinjau sebuah generator dan CSS yang diberikannya. Pertama, tanda pagar pada warna heksadesimal: di dalam data URI, `#` yang tidak dikodekan mengakhiri URL, peramban membaca sisanya sebagai fragmen, dan latarnya diam-diam tidak muncul — tanpa galat konsol, tanpa apa pun di panel jaringan. Di sini setiap warna dikodekan persen sebelum sampai ke lembar gaya. Kedua, hanya berlaku untuk blob border-radius: jika dua jari-jari yang bertemu di satu sisi berjumlah lebih dari 100%, peramban memperkecil *semua* sudut untuk mengompensasi, sehingga bentuk yang digambarnya lebih rata daripada yang Anda pilih. Nilai yang dikeluarkan alat ini dibuat di dalam batas itu, jadi peramban membiarkannya apa adanya.
Bita, ditampilkan alih-alih disembunyikan
Bentuk yang ditempel ke lembar gaya adalah bobot pada setiap muat halaman, jadi hitungan bita berada di bawah kotak keluaran dan berubah sambil Anda menggeser. Koordinat dibulatkan ke dua desimal — seperseratus piksel pada kanvas 1440 satuan, jauh di bawah apa pun yang bisa ditampilkan layar — yang biasanya membuang sepertiga atau lebih panjang jalur tanpa perubahan kasatmata. Kalau angkanya terasa besar, mengurangi titik hampir selalu jawabannya: itulah satu-satunya penggeser yang mengubah ukuran secara berarti.
Tanpa akun, tanpa unggahan, tanpa tanda air
Tidak ada server untuk mengirimkan apa pun. Generatornya beberapa kilobita JavaScript yang berjalan di halaman ini, pengaturan Anda disimpan di penyimpanan lokal peramban ini, dan bentuk yang Anda buat adalah milik Anda tanpa wajib mencantumkan sumber. Begitu halaman termuat ia bekerja tanpa koneksi, yang juga berarti ia bekerja di balik proksi kantor yang memblokir separuh internet.
Pertanyaan
Apakah ini gratis?
Ya, tanpa akun, tanpa tanda air, tanpa batas harian, dan tanpa wajib mencantumkan sumber. Bentuk yang Anda buat adalah milik Anda dan boleh dipakai secara komersial.
Apakah ada yang diunggah?
Tidak. Tidak ada server. Kurvanya dihitung di peramban Anda, dan pengaturan Anda tetap di penyimpanan lokal peramban ini. Anda bisa memperhatikan panel jaringan sambil bekerja dan ia tetap kosong.
Benih itu untuk apa?
Benih membuat sebuah bentuk bisa dihasilkan ulang. Benih dan pengaturan yang sama selalu memberi kurva yang identik, jadi Anda bisa mencatatnya, mengirimkannya ke rekan kerja, atau kembali bulan depan dan mendapat bentuk yang sama alih-alih undian baru. Benih menerima kata semudah angka.
Kenapa latar CSS saya tidak muncul?
Hampir selalu karena tanda pagar yang tidak dikodekan dari warna heksadesimal, yang memotong data URI pada `#` pertama. Keluaran di sini sudah dikodekan, jadi salin seluruh deklarasinya alih-alih menyusunnya ulang secara manual dengan warna Anda sendiri.
Boleh dipakai di proyek komersial?
Boleh. Kurva yang dihasilkan adalah daftar koordinat, bukan karya kreatif dengan lisensi yang menempel, dan tidak ada apa pun di sini yang mengklaim hak atas apa yang Anda buat.
Apakah bisa jalan offline?
Setelah halaman termuat, ya. Tidak ada gambar yang perlu diambil dan tidak ada server yang perlu ditanya, jadi ia terus membuat bentuk meski koneksi dimatikan.