Anak tangga
Gratis, tanpa daftar, berjalan di peramban Anda.
Setiap rentang berjalan mendatar ke titik tengah, berbelok tegak, lalu melanjutkan — profil tangga. Beloknya terjadi di titik tengah dan bukan di titiknya sendiri, dan itulah yang menjaga tapakannya rata.
Pengaturan di baliknya
| Generator | Gelombang |
|---|---|
| Titik | 5 |
| Amplitudo | 60% |
| Keacakan | 18% |
| Garis dasar | 52% |
| Lapisan | 1 |
| Kehalusan | 100% |
| Benih | 1111 |
Yang perlu diketahui
- Hanya sudut siku, jadi ia cocok dengan tata letak berbasis kisi.
- Titik lebih sedikit memberi tapakan lebih lebar dan tegas; lebih banyak mendekati garis bergerigi.
- Dengan 358 bita biayanya kira-kira sama dengan gelombang mulus lewat titik yang sama.
Berapa bita biayanya
Bentuk persis ini berukuran 358 bita sebagai SVG dan 519 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 | 358 B |
| Latar CSS | 519 B |
| clip-path CSS | 550 B |
Awal dari SVG untuk Anak tangga
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-288 118.84L-144 118.84L-144 177.26L0 177.26L144 177.26L144 214.27L288 214.27L432 214.27L432 202.99L576 202.99L720 202.99L720 140.25L864 140.25L1008 140.25L1008 117.08L1152 117.08L1296 117.08L1296 171.17L1440 171.17L1440…Lebih rinci
Berbelok di titik tengah adalah detail yang membuat ini bekerja. Berbelok di titiknya sendiri akan membuat setiap tapakan selang-seling dua kali lebih lebar dari tetangganya, yang terbaca sebagai kesalahan render alih-alih desain — dan itulah versi yang Anda dapat dari implementasi yang paling jelas.
Pertanyaan
Bagaimana saya mengubah Anak tangga setelah mendapatkannya?
Buka generatornya, klik Anak tangga 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 1111 dengan 5 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.