Gelombang footer
Gratis, tanpa daftar, berjalan di peramban Anda.
Geometri yang sama dengan pembatas hero, dibalik tegak supaya isiannya berada di atas kurva, bukan di bawahnya. Satu perbedaan itulah yang memisahkan bentuk yang duduk di atas footer dari bentuk yang duduk di bawah header.
Pengaturan di baliknya
| Generator | Gelombang |
|---|---|
| Titik | 4 |
| Amplitudo | 55% |
| Keacakan | 20% |
| Garis dasar | 48% |
| Lapisan | 2 |
| Kehalusan | 100% |
| Benih | 640 |
Yang perlu diketahui
- Dibalik tegak, jadi area pejalnya menutup ke tepi atas kanvas.
- Dua lapisan memberi sedikit kedalaman tanpa bobot tiga lapisan.
- Letakkan persis di atas footer Anda dengan warna latar yang sama dengan footer itu sendiri.
Berapa bita biayanya
Bentuk persis ini berukuran 551 bita sebagai SVG dan 718 bita sebagai latar CSS — data URI-nya lebih besar karena pengodean persen memakan tiga karakter untuk setiap karakter yang dilolosinya. Kedua angka itu untuk bentuk yang ditampilkan di atas, dengan ketelitian koordinat dua desimal.
| Format | Ukuran |
|---|---|
| SVG | 551 B |
| Latar CSS | 718 B |
| clip-path CSS | 510 B |
Awal dari SVG untuk Gelombang footer
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 207.13C-300 198.98,-120 174.18,0 158.27C120 142.36,240 112.09,360 111.66C480 111.23,600 137.74,720 155.71C840 173.68,960 218.07,1080 219.5C1200 220.93,1380 173.48,1440 164.28L1440 0L-360 0Z" fill="#a5b4fc" opacity="…Lebih rinci
Balik tegak di sini bukan transformasi CSS, melainkan bagian dari jalurnya: kurvanya dicerminkan dan ekornya menutup ke tepi yang berlawanan. Artinya SVG yang diekspor berdiri sendiri dan tidak perlu pembungkus ber-`transform` — yang paling terasa pada ekspor latar CSS, di mana sejak awal memang tidak ada elemen untuk ditransformasi.
Pertanyaan
Bagaimana saya mengubah Gelombang footer setelah mendapatkannya?
Buka generatornya, klik Gelombang footer di baris prasetel, lalu geser apa saja. Prasetel adalah titik awal, bukan kunci — semua penggeser tetap aktif, dan kotak benih menerima kata kalau Anda lebih suka menamai bentuk Anda daripada menomorinya.
Apakah akan terlihat sama lain kali?
Ya, selama benihnya sama. Yang ini benih 640 dengan 4 titik. Generatornya deterministik, jadi pengaturan itu menghasilkan ulang kurva yang persis sama di perangkat mana pun.
Bisakah saya memakai warna lain?
Bisa — warna diterapkan saat ekspor, tidak dipanggang ke dalam geometrinya. Pratinjau di atas memakai warna bawaan alat ini; pilih warna Anda di generator dan SVG, latar CSS, serta clip-path akan mengikuti.
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.