Generator Gelombang SVG
Buat gelombang SVG halus, runcing, atau bertingkat dengan lapisan, amplitudo, dan seed. Unduh .svg atau salin sebagai data URI latar CSS untuk pemisah section.
Pengaturan gelombang
Pengaturan dan seed yang sama selalu menghasilkan bentuk yang sama.
Pratinjau
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z"/></svg>
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%230099ff' fill-opacity='1' d='M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z'/%3E%3C/svg%3E");Alat Terkait
Lihat SemuaApa itu Generator Gelombang SVG?
Membuat bentuk gelombang sebagai SVG untuk pemisah section dan latar belakang. Pilih kurva halus, puncak runcing, atau anak tangga, tumpuk hingga lima lapisan, balik gelombang ke atas, dan ekspor sebagai file .svg atau data URI background-image CSS yang siap tempel.
Cara menggunakan Generator Gelombang SVG
- Pilih Warna dan Gaya gelombang (Halus, Runcing, Bertingkat) serta Posisi (Bawah atau Atas).
- Sesuaikan Kompleksitas, Amplitudo, Lapisan, Opasitas, Lebar, dan Tinggi.
- Klik Acak atau ketik Seed untuk mendapatkan gelombang berbeda yang tetap bisa direproduksi.
- Klik Unduh .svg atau salin kode SVG-nya.
- Atau salin Latar CSS (data URI) untuk memakai gelombang tanpa file terpisah.
Contoh
Complexity 2, amplitude 0, 1440×320, color #0099ff
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,160C120,160 480,160 720,160C960,160 1320,160 1440,160L1440,320L0,320Z"/></svg>
Amplitudo 0 menghasilkan garis datar, yang memperlihatkan konstruksi Bézier secara persis.
Kapan menggunakan Generator Gelombang SVG
Gunakan untuk pemisah section bergelombang, footer, dan latar hero. preserveAspectRatio="none" membuat gelombang meregang ke lebar berapa pun, cocok untuk pemisah selebar penuh; untuk ilustrasi yang harus menjaga proporsi, edit SVG-nya di editor vektor.
Cara kerja Generator Gelombang SVG
Lebar dibagi menjadi segmen yang sama; tinggi setiap titik adalah garis dasar ditambah offset pseudo-acak ber-seed (mulberry32) yang diskalakan dengan amplitudo. Gelombang halus melewatkan spline Catmull-Rom melalui titik-titik, yang dikonversi menjadi perintah Bézier kubik C; puncak runcing memakai garis lurus dan anak tangga memakai garis horizontal/vertikal. Path ditutup ke tepi bawah (atau atas). Beberapa lapisan memakai garis dasar dan seed berbeda, dengan opasitas makin tinggi ke arah depan. Data URI menjaga SVG tetap terbaca dan hanya melakukan percent-encoding pada karakter yang tidak aman.
Kasus Penggunaan Umum
- Pemisah bergelombang antar-section landing page
- Latar footer berlapis
- Bagian bawah section hero
- Gambar latar lewat data URI CSS
- Bentuk dekoratif yang bisa direproduksi dalam design system
Pertanyaan Umum
Apakah saya akan mendapatkan gelombang yang sama lagi?
Ya. Pengaturan dan Seed yang sama selalu menghasilkan markup SVG yang identik.
SVG inline atau data URI?
SVG inline dapat diberi gaya dan dianimasikan dengan CSS; data URI di background-image menjaga HTML Anda tetap bersih tetapi tidak bisa diubah gayanya setelah di-encode.
Bagaimana cara menaruh gelombang di bagian atas section?
Atur Posisi ke Atas; path ditutup ke tepi atas sehingga mengisi ke arah atas.