Softonic

Generator Gelombang SVG

Langkah 1 / 2
Berikutnya

Gelombang melengkung adalah pembatas seksi yang cepat atau lambat dipakai setiap landing page. Generator ini mengambil sampel kurva sinus mulus menjadi satu <path> terisi, membiarkan Anda mengatur amplitudo, frekuensi, dan posisi vertikal, lalu mewarnainya dengan warna solid apa pun, siap diletakkan di antara dua seksi tanpa CSS tambahan. Salin markup SVG inline dan tempel langsung ke halaman Anda.

Cara membuat gelombang SVG

  1. 1

    Atur warna

    Pilih warna isian solid apa pun untuk gelombang dengan pemilih warna.

  2. 2

    Sesuaikan amplitudo

    Naikkan amplitudo (0 hingga 150) untuk lekukan lebih dalam, atau turunkan untuk riak lembut.

  3. 3

    Atur frekuensi

    Pilih 1 hingga 8 siklus di sepanjang lebar. Lebih banyak siklus berarti pola yang lebih ramai dan bergelombang.

  4. 4

    Pilih atas atau bawah

    Jangkarkan isian ke tepi bawah untuk gelombang footer, atau ke tepi atas untuk gelombang header.

  5. 5

    Salin SVG

    Salin markup SVG inline dan tempel ke HTML Anda atau latar CSS.

Di mana gelombang benar-benar berguna

  • Transisi seksi antara hero berwarna dan body putih, agar mata mengalir alih-alih menabrak garis keras.
  • Footer di mana tepi atas melengkung melembutkan blok tautan yang gelap.
  • Kartu harga yang ingin sudut bercat halus tanpa gambar latar penuh.
  • Banner hero di mana gelombang di tepi bawah menuntun pembaca masuk ke konten.

Anatomi path

Generator mengambil sampel kurva sinus menjadi satu <path> terisi di dalam viewBox 1440 x 320:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none" width="100%" height="320"><path d="M 0,160 L 24,180 L 48,199 ... L 1440,320 L 0,320 Z" fill="#6366F1"/></svg>

Path bergerak menyeberangi lebar dengan segmen lurus pendek yang menjiplak gelombang sinus, lalu menutup ke tepi bawah (atau tepi atas) untuk membentuk isian solid. Menaikkan amplitudo melebarkan puncak dan lembah; menambah siklus memampatkan lebih banyak di sepanjang lebar.

Membuatnya responsif

  • SVG sudah menyetel preserveAspectRatio="none", jadi gelombang meregang mengisi lebar berapa pun.
  • Ia hadir dengan width="100%"; atur tingginya dengan CSS (height: auto atau nilai tetap) sesuai selera.
  • Untuk menumpuk gelombang demi kedalaman, letakkan dua salinan di CSS Anda sendiri, posisikan secara absolut, dan beri masing-masing warna dan opasitas berbeda.

Aksesibilitas

Gelombang bersifat dekoratif. Tambahkan aria-hidden="true" dan role="img" agar pembaca layar melewati elemen tersebut, dan simpan semua konten bermakna di elemen HTML saudara yang nyata.

Pertanyaan yang Sering Diajukan

Inline SVG di HTML Anda saat ingin isian bereaksi terhadap variabel CSS (dark mode, theming). Gunakan background-image saat gelombang murni dekoratif dan Anda ingin browser men-cache-nya secara terpisah.

Ya. Ini adalah <path> vektor dengan preserveAspectRatio="none", jadi ia menskalakan ke lebar berapa pun tanpa bergerigi, tidak seperti gambar raster yang buram saat diperbesar.

Ya. Bungkus path dalam SVG dan animasikan atribut d-nya atau transform: translateX() melalui CSS keyframes. Jaga gerakan tetap halus; animasi gelombang yang autoplay cepat terasa usang.

Biasanya jauh di bawah 1 KB, karena ini satu path dengan satu warna isian. Itu sebagian kecil dari PNG setara mana pun.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Konverter Ukuran File

Konversi antara byte, KB, MB, GB, TB, dan satuan biner IEC (KiB, MiB, GiB, TiB) dengan kombinasi desimal dan biner apa pun yang Anda inginkan.

Pemformat HTML

Format HTML secara lokal di browser dengan inden dua atau empat spasi. HTML tidak diunggah atau divalidasi.

JSON ke YAML

Konversi JSON ke YAML dengan penjelajaran yang tepat, penutupan string yang aman, skalar blok berbaris ganda, serta kunci yang tersortir untuk konfigurasi yang lebih rapi.

Alat ini tersedia dalam bahasa lain