Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Gelombang & Pembagi SVG

Pengembang

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Gaya Gelombang

Gaya

Ukuran

Amplitudo (px): 60

Frekuensi: 3

Lebar

piksel

Tinggi

piksel

Tranformasi

Gali Ulang

Gali Horisontal

Lapisan

Jumlah Lapisan: 1

Warna Lapisan 1

Kejernihan Lapisan 1: 100

Warna Lapisan 2

Kejernihan Lapisan 2: 70

Warna Lapisan 3

Kejernihan Lapisan 3: 50

Warna Lapisan 4

Kejernihan Lapisan 4: 30

Latar belakang

Warna Latar Belakang

Animasi

Animasikan Gelombang

Kecepatan

KELUARAN

Sisi klien

Kode SVG

Latar Belakang CSS

Snipet HTML

IKLAN · HAPUS?

Memandu

Generator Gelombang & Pembagi SVG

Buat pembagi bagian gelombang SVG yang indah untuk situs web Anda. Pilih dari 6 gaya gelombang — smooth sine, gelombang terstruktur, zigzag tajam, puncak bulat, asimetris, dan blob organik — sesuaikan amplitudo, frekuensi, warna, dan lapisan, lalu ekspor sebagai kode SVG, kode latar belakang CSS, snipet HTML, atau file SVG yang dapat diunduh. Ada opsi animasi CSS untuk efek aliran gelombang.

Cara Penggunaan

Pilih gaya gelombang dari dropdown dan sesuaikan pengaturannya. Pratinjau langsung akan diperbarui secara real-time saat Anda mengubah amplitudo, frekuensi, lebar, tinggi, jumlah lapisan, warna, dan kejernihan. Balikkan secara vertikal untuk pembagi bagian bawah atau secara horizontal untuk memantulkan arah gelombang. Aktifkan animasi untuk efek aliran gelombang. Ketika Anda puas dengan hasilnya, gunakan tombol ekspor untuk menyalin kode SVG, markup latar belakang CSS, snipet HTML, atau mengunduh file SVG.

Fitur

6 Gaya Gelombang — Sine Halus (kurva klasik), Gelombang Terstruktur (kedalaman berlapis), Zigzag Tajam (bentuk V yang tajam), Puncak Bulat (bump setengah lingkaran), Asimetris (rasa alami seperti terang angin), Blob/Organik (kurva organik acak).
Dukungan Multi-Lapis — Hingga 4 lapisan dengan pengaturan warna dan kejernihan individual. Lapisan memiliki pergeseran fase untuk memberikan kedalaman alami. Sangat cocok untuk pembagi berbentuk gradien.
Pratinjau Langsung — Pratinjau visual besar yang menampilkan gelombang sebagai pembagi bagian. Diperbarui secara real-time saat Anda mengatur pengaturan. Warna latar belakang dapat disesuaikan.
Amplitudo & Frekuensi — Atur ketinggian gelombang (20-200px) dan jumlah puncak (1-10) untuk bentuk yang tepat.
Pengaturan Balik — Balikkan secara vertikal (untuk pembagi bagian bawah) atau secara horizontal (untuk memantulkan arah gelombang).
Animasi CSS — Animasi aliran gelombang opsional dengan pengaturan kecepatan (lambat/medium/cepat). Kode animasi akan disertakan saat ekspor jika diaktifkan.
4 Pilihan Ekspor — Salin kode SVG (inline), Salin latar belakang CSS (data URI), Salin snipet HTML (siap untuk dipaste sebagai pembagi bagian), Unduh file SVG.
Dimensi Kustom — Tetapkan lebar dan tinggi untuk sesuai dengan tata letak Anda. Default 1200×200 cocok untuk kebanyakan bagian situs web.

Gaya Gelombang

Sine Halus: Kurva sinusoidal klasik menggunakan pendekatan Bezier kubik. Bersih dan modern.
Gelombang Terstruktur: Banyak gelombang sinus dengan pergeseran fase yang menciptakan kedalaman dan superposisi. Cocok untuk bagian hero.
Zigzag Tajam: Puncak dan lembah berbentuk V yang tajam. Kuat dan geometris.
Puncak Bulat: Bump setengah lingkaran untuk memberi kesan dataran lembut.
Asimetris: Amplitudo naik dan turun yang berbeda untuk memberi kesan alami seperti terang angin.
Blob/Organik: Variasi acak pada kurva untuk bentuk organik yang unik. Input yang sama akan menghasilkan output yang sama.

IKLAN · HAPUS?

Apa itu pembagi bagian SVG?

Pembagi bagian SVG adalah elemen dekoratif berbentuk gelombang atau bentuk yang ditempatkan di antara bagian konten pada halaman web untuk menciptakan transisi visual yang halus, bukan garis horizontal yang tajam. Mereka dibuat menggunakan SVG (Scalable Vector Graphics), yang berarti tampilan mereka tidak tergantung pada resolusi — mereka terlihat tajam di semua ukuran layar, dari ponsel hingga 4K. Pembagi SVG ringan (biasanya kurang dari 2KB), dapat diatur dengan CSS, dan bekerja di semua browser modern. Mereka adalah pola desain populer untuk halaman penawaran, portofolio, dan situs web modern.

Bagaimana cara menambahkan pembagi gelombang ke situs web saya?

Cara paling sederhana: klik 'Salin Snipet HTML' dan tempelkan kode di antara dua bagian dalam HTML. Snipet ini mencakup CSS untuk posisi. Untuk pengaturan lebih lanjut, gunakan 'Salin Latar Belakang CSS' dan terapkan sebagai background-image pada div. Untuk kerangka kerja seperti React atau Vue, gunakan 'Salin Kode SVG' dan tempelkan sebagai SVG inline. Letakkan pembagi secara absolut di bagian atas atau bawah sebuah bagian menggunakan CSS. Gunakan tombol Flip untuk beralih antara pembagi bagian atas (gelombang menuju atas) dan bawah (gelombang menuju bawah).

Apakah saya bisa menganimasikan pembagi gelombang?

Ya — aktifkan tombol animasi untuk menambahkan pergerakan horizontal alami ke gelombang Anda. Anda bisa memilih antara lambat, sedang, dan cepat. Animasi ini menggunakan CSS @keyframes dan berjalan lancar di semua browser modern. Kode animasi akan secara otomatis disertakan saat Anda mengunduh SVG atau CSS. Perlu dicatat bahwa pembagi gelombang yang dianimasikan menggunakan sedikit lebih banyak CPU daripada yang statis, sehingga gunakan dengan bijak di halaman dengan banyak bagian atau di halaman yang kritis dari segi kinerja.

Mengapa menggunakan SVG daripada PNG untuk pembagi bagian?

Pembagi SVG lebih unggul daripada PNG dalam semua aspek untuk kasus ini. Mereka tidak tergantung pada resolusi (tampilan tajam di semua zoom/DPI), ukuran file kecil (1-2KB dibandingkan 50-200KB untuk PNG), dapat diperluas tanpa pixelasi ke lebar apa pun, dapat diwarnai dan dianimasikan dengan CSS, dan memuat lebih cepat. Satu pembagi SVG bekerja di semua perangkat — ponsel, tablet, desktop, dan layar retina — tanpa perlu versi berbeda. Pembagi PNG biasanya digunakan sebelum dukungan SVG menjadi umum, tetapi pada 2024+ tidak ada alasan untuk menggunakan mereka.

Ingin bebas iklan? Bebas Iklan Hari Ini

