Desain / SVG

Generator Gelombang SVG untuk Pembatas Section

Buat gelombang SVG berlapis yang halus untuk batas antara dua section halaman: pilih jumlah layer, gelombang, tinggi, kehalusan, dan warna, lalu download SVG atau salin sebagai background CSS.

Generator Gelombang SVG untuk Pembatas Section: Setiap layer adalah deretan titik yang bergantian berada di atas dan di bawah garis dasar dengan jarak acak, lalu dihubungkan menggunakan kurva halus dan diisi hingga tepi bawah. Layer di belakang memiliki warna lebih pucat sehingga kedalamannya terlihat. SVG dapat melebar hingga ukuran apa pun, sedangkan versi CSS menyematkannya sebagai background data URI. Berjalan 100% lokal di browser Anda tanpa upload file ke server.

Kategori: Tools developer
Dijalankan: Di browser Anda
Biaya: Gratis · tanpa daftar
Ketersediaan: Siap digunakan

Generator gelombang SVGPemrosesan lokal

Berjalan sepenuhnya di browser Anda

Lapisan3Gelombang melintang3Tinggi gelombang60%Kehalusan1Tinggi gambar240 pxWarna#479d1d Balik vertikal (untuk bagian atas section)

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240" preserveAspectRatio="none"><g fill="#479d1d"><path d="M0,121.9 C34.3,111.7 137.1,60.8 205.7,60.2 C274.3,59.7 342.9,118.4 411.4,118.5 C480,118.5 548.6,61.3 617.1,60.8 C685.7,60.3 754.3,115.5 822.9,115.6 C891.4,115.7 960,61.8 1028.6,61.2 C1097.1,60.7 1165.7,110.4 1234.3,112.2 C1302.9,114 1405.7,78.8 1440,72.2 L1440,240 L0,240 Z" fill-opacity="0.57"/><path d="M0,144.3 C34.3,135.4 137.1,89.7 205.7,90.4 C274.3,91.1 342.9,148.9 411.4,148.6 C480,148.2 548.6,89 617.1,88.4 C685.7,87.7 754.3,142.2 822.9,144.7 C891.4,147.3 960,103.8 1028.6,103.7 C1097.1,103.7 1165.7,145.8 1234.3,144.5 C1302.9,143.3 1405.7,104.1 1440,96.1 L1440,240 L0,240 Z" fill-opacity="0.78"/><path d="M0,184.4 C34.3,175.7 137.1,135.5 205.7,132.1 C274.3,128.8 342.9,166 411.4,164.5 C480,163 548.6,119.4 617.1,123 C685.7,126.6 754.3,187.2 822.9,186 C891.4,184.8 960,118.6 1028.6,116 C1097.1,113.4 1165.7,170.5 1234.3,170.5 C1302.9,170.6 1405.7,125.3 1440,116.2 L1440,240 L0,240 Z"/></g></svg>

CSS

.wave {
  height: 240px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='%23479d1d'%3E%3Cpath d='M0%2C121.9 C34.3%2C111.7 137.1%2C60.8 205.7%2C60.2 C274.3%2C59.7 342.9%2C118.4 411.4%2C118.5 C480%2C118.5 548.6%2C61.3 617.1%2C60.8 C685.7%2C60.3 754.3%2C115.5 822.9%2C115.6 C891.4%2C115.7 960%2C61.8 1028.6%2C61.2 C1097.1%2C60.7 1165.7%2C110.4 1234.3%2C112.2 C1302.9%2C114 1405.7%2C78.8 1440%2C72.2 L1440%2C240 L0%2C240 Z' fill-opacity='0.57'/%3E%3Cpath d='M0%2C144.3 C34.3%2C135.4 137.1%2C89.7 205.7%2C90.4 C274.3%2C91.1 342.9%2C148.9 411.4%2C148.6 C480%2C148.2 548.6%2C89 617.1%2C88.4 C685.7%2C87.7 754.3%2C142.2 822.9%2C144.7 C891.4%2C147.3 960%2C103.8 1028.6%2C103.7 C1097.1%2C103.7 1165.7%2C145.8 1234.3%2C144.5 C1302.9%2C143.3 1405.7%2C104.1 1440%2C96.1 L1440%2C240 L0%2C240 Z' fill-opacity='0.78'/%3E%3Cpath d='M0%2C184.4 C34.3%2C175.7 137.1%2C135.5 205.7%2C132.1 C274.3%2C128.8 342.9%2C166 411.4%2C164.5 C480%2C163 548.6%2C119.4 617.1%2C123 C685.7%2C126.6 754.3%2C187.2 822.9%2C186 C891.4%2C184.8 960%2C118.6 1028.6%2C116 C1097.1%2C113.4 1165.7%2C170.5 1234.3%2C170.5 C1302.9%2C170.6 1405.7%2C125.3 1440%2C116.2 L1440%2C240 L0%2C240 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

SVG ini dapat direntangkan ke lebar apa pun (preserveAspectRatio="none"), sehingga cocok untuk pembatas section selebar penuh. Letakkan di bagian bawah suatu section dengan warna latar belakang section berikutnya, atau balik secara vertikal untuk bagian atas. Seed acak yang sama selalu menghasilkan gelombang yang sama.

SVG atau CSS?

SVG inline dapat diberi style dan dianimasikan dari CSS, dan fill-nya dapat menggunakan currentColor. Sebagai latar CSS, SVG menjadi data URI: tidak ada yang perlu dimuat lagi, tetapi warnanya ditetapkan di dalam kode. Ukuran file hanya beberapa ratus byte dalam kedua cara tersebut; file juga dapat dirapikan lebih lanjut dengan pembersih SVG.

Kehalusan

Kurva ini adalah spline Catmull-Rom yang dikonversi menjadi segmen Bézier kubik: pada tingkat kehalusan penuh, kurva melengkung lembut melalui setiap titik, sedangkan pada tingkat nol, kurva menjadi garis lurus antartitik dan menghasilkan tepi pegunungan yang bergerigi.

Cara menggunakannya

Atur jumlah layer, jumlah gelombang, dan tingginya.
Pilih warna, lalu balik gelombang untuk bagian atas section.
Klik untuk membuat gelombang acak baru, lalu download SVG atau salin CSS.

Privasi & batasan

Gelombang digambar di browser Anda.

Alat terkait

Pertanyaan umum

Bagaimana cara menggunakannya di antara dua section?

Gunakan warna section di bawah untuk gelombang, lalu letakkan gelombang di bagian bawah section di atasnya dengan lebar penuh; balik gelombang untuk menggunakannya di bagian atas sebuah section.

Apakah pengaturan yang sama akan menghasilkan gelombang yang sama?

Ya: bentuknya berasal dari seed acak, jadi hanya berubah saat Anda mengeklik untuk membuat gelombang baru.

Apakah gelombang ini boleh digunakan untuk keperluan komersial?

Ya: bentuknya dibuat untuk Anda dan tidak memiliki batasan lisensi.

Alat gratis · berjalan di browser anda · tanpa perlu akun