Softonic

Generator Pola Garis SVG

Langkah 1 / 4
Berikutnya

Pola garis datar adalah salah satu cara paling andal untuk mengisi bagian hero, pembatas, atau kartu kosong tanpa bersandar pada foto stok. Generator ini menghasilkan SVG berbasis <pattern> yang bersih dengan dua warna, lebar garis yang dapat dikonfigurasi, dan sudut rotasi, sehingga file yang sama berskala dengan tajam dari hero seluler 320px hingga banner desktop 4K.

Cara menghasilkan pola garis SVG

  1. 1

    Setel ukuran kanvas

    Masukkan lebar dan tinggi yang Anda butuhkan: SVG menggunakan viewBox sehingga tetap berskala di halaman.

  2. 2

    Pilih lebar garis

    Nilai lebih kecil memberi garis halus rapat; nilai lebih besar memberi pita bergaya tenda.

  3. 3

    Pilih sudut

    Gunakan 0 untuk horizontal, 90 untuk vertikal, atau 45 untuk diagonal klasik.

  4. 4

    Pilih dua warna

    Setel nilai hex latar depan dan latar belakang: garis transparan juga boleh.

  5. 5

    Salin SVG

    Tempel secara inline, simpan sebagai .svg, atau jatuhkan ke latar belakang CSS via konverter SVG ke CSS.

Cara pola dibangun

SVG mendefinisikan <pattern> kecil seukuran dua garis, lalu mengisi <rect> yang menutupi seluruh viewBox dengan fill="url(#stripes)". Karena pola berulang otomatis, mengubah ukuran kanvas tidak mengubah ketebalan garis, hanya berapa banyak garis yang muat.

patternTransform="rotate(angle)" itulah yang memberi Anda diagonal tanpa harus menghitung ulang geometri. Pola tetap mengubin mulus pada sudut mana pun.

Lembar contekan lebar garis

Lebar garis Tampilan Penggunaan umum
2 - 6 px Garis halus rapat Latar formulir, tekstur halus
10 - 20 px Diagonal seimbang Bagian hero, kartu, pembatas
30 - 60 px Tenda tebal Banner halaman landing, seni empty-state
80 px+ Blok skala poster Header yang perlu terbaca dari jauh

Tips

  • Jaga kontras tetap rendah (misalnya #f5f5f5 di atas #ffffff) ketika pola berada di belakang teks.
  • Sudut 15, 30, dan 45 derajat terasa lebih “didesain” daripada 0 atau 90 yang kaku.
  • Untuk menganimasikan garis, bungkus <rect> dalam <g> dan terjemahkan dalam loop; karena pola mengubin, Anda mendapat scroll tak terbatas secara gratis.
  • Output adalah SVG murni tanpa referensi eksternal, jadi aman di-inline di HTML atau template email yang membuang tag <script>.

Pertanyaan yang Sering Diajukan

Bisa. Simpan output sebagai file .svg dan rujuk dengan background-image: url(...) dan background-repeat: repeat, atau masukkan ke konverter SVG ke CSS untuk mendapat URL data inline.

Diagonal di-anti-alias oleh browser. Jika Anda melihat fringing, naikkan lebar garis 1 - 2 piksel atau raster ke PNG lebih besar lalu perkecil.

Pemilih warna menghasilkan warna solid, jadi untuk membuat garis transparan, edit SVG keluaran: setel salah satu fill ke none, atau ke hex 8 digit dengan alfa seperti #00000000. Apa pun yang berada di belakang SVG akan terlihat menembus.

Output adalah milik Anda, ia hanya markup yang dihasilkan berdasarkan input Anda, tanpa bentuk bermerek dagang atau aset pihak ketiga.

Kedua warna Anda serta lebar dan tinggi hanya dikirim ke server kami untuk merender pratinjau SVG; tidak ada yang disimpan atau dicatat, dan tidak ada berkas yang diunggah.

Alat Terkait

Pemilih Warna Material Design

Jelajahi palet warna Material Design. Salin nuansa mana pun (dari 50 hingga A700) dalam format HEX, RGB, atau HSL dengan sekali sentuh.

Generator Kertas Bergaris

Buat kertas bergaris siap cetak secara gratis. Pilih garis college, lebar, atau sempit, atur jarak antargaris dalam mm, ukuran kertas, dan garis margin, lalu cetak atau unduh SVG.

Pembuat Undangan

Buat undangan pernikahan, ulang tahun, akikah, atau acara kantor. Sesuaikan tulisan dan warna, lihat pratinjau langsung, lalu unduh PNG siap cetak ukuran 5R.

Inversi Warna Gambar

Balikkan setiap saluran RGB dalam sebuah gambar untuk menghasilkan gambar negatif, berguna untuk pengeditan kreatif dan melihat hasil pemindaian film.

Pemisah Grid Instagram

Bagi gambar lebar menjadi grid Instagram 3×3, atau berapa pun jumlah barisnya. Setiap potongan diberi nomor sehingga mudah diunggah secara terbalik.

Konverter ARW ke JPG

Konversi foto RAW Sony ARW ke JPG. Dapatkan JPEG yang mudah dibagikan dan kompatibel secara universal dari file RAW kamera Anda tanpa membuka Lightroom.

Alat ini tersedia dalam bahasa lain