Generator Gelombang SVG
Buat bentuk gelombang SVG berlapis dengan intensitas kurva, jumlah lapisan, dan isian solid atau gradien yang dapat disesuaikan, lalu salin markup atau unduh berkas .svg.
Generator Gelombang SVG — Atur intensitas kurva, pilih berapa banyak lapisan gelombang yang ditumpuk, dan tentukan isian solid atau gradien vertikal dari atas ke bawah dengan dua warna. Pratinjau langsung digambar ulang saat Anda menyesuaikan kontrol, tombol Hasilkan Ulang menyusun ulang bentuk gelombang dari sebuah seed, dan markup SVG lengkap siap untuk disalin atau diunduh sebagai berkas .svg. Semuanya dihasilkan langsung di browser Anda; tidak ada pengaturan atau gambar yang pernah dikirim ke server.
Apa itu Generator Gelombang SVG?
Generator Gelombang SVG adalah alat gratis berbasis browser untuk desainer web dan pengembang front-end yang menginginkan pembatas gelombang yang halus dan organik serta latar hero tanpa menggambar path secara manual. Anda mengatur intensitas kurva, menumpuk dari satu hingga delapan lapisan, membalik gelombang agar puncaknya mengarah ke bawah atau ke atas, dan mengisinya dengan campuran satu warna atau gradien vertikal antara dua warna HEX. Setiap gelombang dibangun dari generator pseudoacak berbasis seed, sehingga menekan Hasilkan Ulang memberi Anda bentuk baru sambil mempertahankan pengaturan yang sama, dan keluarannya adalah SVG yang presisi dan dapat diskalakan yang bisa Anda tempel ke halaman HTML atau berkas desain mana pun. Gunakan untuk pembatas bagian, footer, banner, dan latar belakang dekoratif.
Cara menggunakan Generator Gelombang SVG
- Atur intensitas kurva dari 0 hingga 100 untuk mengontrol seberapa tinggi dan mencolok puncak gelombang.
- Pilih jumlah lapisan (1-8); semakin banyak lapisan menumpuk gelombang tembus pandang untuk memberi kedalaman.
- Gunakan Balik agar puncak gelombang mengarah ke bawah atau ke atas.
- Buka Pengaturan untuk beralih antara isian solid dan gradien vertikal serta memilih warna awal dan akhir.
- Tekan Hasilkan Ulang untuk menyusun ulang bentuk gelombang hingga Anda menyukainya.
- Salin markup SVG atau klik Unduh untuk menyimpan berkas wave.svg.
Contoh
Pembatas bagian dengan gradien
Atur intensitas sekitar 50, pertahankan 3 lapisan, pilih isian gradien dari biru ke ungu, dan unduh wave.svg untuk menempatkan pembatas yang halus di antara dua bagian halaman.
Gelombang hero satu warna yang tegas
Naikkan intensitas, atur lapisan ke 1, beralih ke isian solid, dan balik gelombang ke atas untuk puncak besar yang mencolok di belakang judul hero.
Latar footer berlapis
Gunakan 5-6 lapisan dengan intensitas rendah hingga sedang untuk membangun gelombang tembus pandang yang lembut dan bertumpuk yang cocok sebagai latar footer.
Pertanyaan yang sering diajukan
- Apa yang diubah oleh intensitas kurva?
- Intensitas (0-100) mengontrol seberapa jauh setiap puncak gelombang naik dan turun. Nilai rendah menghasilkan riak yang lembut; nilai tinggi menghasilkan puncak yang tinggi dan mencolok. Pratinjau dan SVG diperbarui secara instan saat Anda mengubahnya.
- Mengapa menekan Hasilkan Ulang mengubah bentuknya?
- Setiap gelombang digambar dari generator pseudoacak berbasis seed. Hasilkan Ulang menambah seed sehingga Anda mendapatkan susunan puncak yang baru sambil mempertahankan intensitas, lapisan, warna, dan isian persis seperti yang Anda atur.
- Apa perbedaan antara isian solid dan gradien?
- Solid memadukan setiap lapisan yang ditumpuk di antara dua warna Anda, sedangkan gradien menerapkan satu gradien vertikal dari warna pertama di atas ke warna kedua di bawah pada semua lapisan. Buka Pengaturan untuk beralih dan memilih kedua warna.
- Bagaimana cara menggunakan SVG yang diunduh?
- Keluarannya adalah markup SVG standar yang dapat diskalakan. Salin langsung ke HTML Anda, atau unduh wave.svg dan impor ke alat desain Anda atau rujuk sebagai gambar. Karena berbasis vektor, ia tetap tajam pada ukuran berapa pun.
- Apakah ada yang diunggah ke server?
- Tidak. Gelombang dihasilkan sepenuhnya di browser Anda dengan perhitungan lokal, dan unduhan .svg dibangun dari blob di memori. Tidak ada pengaturan, warna, atau gambar yang pernah meninggalkan perangkat Anda, jadi alat ini bekerja offline dan menjaga pekerjaan Anda tetap privat.
Alat terkait
Kode ke Gambar
Ubah cuplikan kode menjadi gambar dengan penyorotan sintaksis di browser Anda, dengan 20+ bahasa, tema dan latar kustom, nomor baris, serta ekspor PNG atau SVG.
Pemeriksa Kontras Warna
Periksa kontras WCAG 2.1 dan skor APCA Lc antara warna teks dan latar belakang, lihat lencana AA, AAA, dan 3:1, lalu terapkan warna lolos terdekat.
Pencampur Warna
Campurkan dua warna HEX pada rasio yang dipilih dalam ruang warna RGB atau Lab dan baca warna tengah hasilnya sebagai sampel dan nilai HEX yang dapat disalin.
Generator Gradasi Warna
Ubah satu warna HEX dasar menjadi skala OKLCH, HSL, atau RGB dengan langkah yang bisa diatur, petunjuk kontras WCAG per langkah, dan ekspor ke CSS, Tailwind, dan JSON.