Softonic

Generator Pola Titik SVG

Langkah 1 / 3
Berikutnya

Pola titik merupakan elemen dasar yang serbaguna dalam latar belakang web modern, contohnya kisi titik halus di balik halaman Notion, titik-titik pada bagian utama, atau tekstur menyerupai butiran pada kartu. Generator ini membuat satu file SVG menggunakan definisi inline <pattern>, sehingga ukuran filenya sangat kecil (biasanya kurang dari 500 byte) dan dapat ditampilkan secara sempurna pada berbagai ukuran layar. Anda dapat mengatur bidang tampilan, jarak antar titik, jari-jari, warna titik, serta latar belakang.

Cara membuat pola titik

  1. 1

    Atur kanvas

    Lebar dan tinggi dalam satuan piksel. Untuk latar belakang CSS, ukuran ini dapat tetap kecil (misalnya 800×600) dan dapat dibagi menjadi beberapa bagian yang saling bertumpang tindih.

  2. 2

    Pilih jarak antar elemen

    Jarak antara pusat titik-titik yang bersebelahan. Jarak 20–40 px terlihat rapi; jarak 10 px terasa tidak halus (berderau).

  3. 3

    Atur jari-jari titik

    1–3 px untuk tekstur halus, 4–8 px untuk titik-titik polka yang sengaja dibuat.

  4. 4

    Pilih warna

    Isi titik (latar depan) dan latar belakang kanvas. Atur latar belakang menjadi `transparent` untuk pola tumpang tindih yang akurat.

  5. 5

    Salin SVG

    Tampal ke dalam kode HTML Anda atau gunakan sebagai `background-image: url("data:image/svg+xml,...")` dalam CSS.

Cara Definisi Pola

Generator menghasilkan elemen <pattern> di dalam <defs>, serta mengisi seluruh area layar (full canvas) dari <rect> dengan elemen fill="url(#dots)".

<defs>
  <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
    <circle cx="15" cy="15" r="2" fill="#6366f1" />
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff" />
<rect width="100%" height="100%" fill="url(#dots)" />

patternUnits="userSpaceOnUse" membatasi ukuran tile hanya dalam satuan piksel, sehingga penyesuaian skala pada file SVG induk tidak menyebabkan distorsi pada titik-titiknya.

Daftar Panduan Penyetelan Pola

Tampilan Jarak Jari-jari Kontras
Bisikan (hampir tidak terlihat) 30–40 1–1,5 opasitas 5–10%
Latar belakang halus 25–30 2 opasitas 15–20%
Pola titik jujur 20 2–3 Berwarna penuh
Titik-titik sengaja 40–60 8–15 Berwarna penuh
Efek setengah nada 10 1 Pengisian gradien

Menggunakannya sebagai latar belakang CSS

Enkode file SVG menjadi URL data dan terapkan pada setiap elemen:

.bg-dots {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' ...");
  background-repeat: repeat;
}

Mengatur tata letak file SVG menggunakan CSS lebih cepat dibandingkan mengirimkan file PNG; peramban akan melakukan rasterisasi pada ukuran tampilan akhir, sehingga gambar tetap jernih di semua resolusi tampilan (1x, 2x, 3x).

Ketika titik mengganggu kejelasan pembacaan

Pola titik yang terletak tepat di belakang teks utama dapat menciptakan efek moire yang berkilau pada teks halus. Jika Anda harus menempatkan teks di atasnya, gunakan salah satu dari dua cara berikut:

  • Tingkatkan jarak antar titik menjadi lebih dari 40px agar titik-titik tersebut terletak di antara baris, atau
  • Kurangi opasitas pola menjadi di bawah 10%, atau
  • Letakkan teks di dalam kartu padat di atas pola.

Pertanyaan yang Sering Diajukan

Atur warna latar belakang menjadi transparent; maka satu-satunya elemen yang ditampilkan hanyalah titik-titik tersebut. Letakkan file SVG di atas warna atau gambar yang ingin ditampilkan.

Tidak cocok digunakan dengan generator ini, hasilnya berupa kisi persegi. Untuk tata letak heksagonal, diperlukan ubin pola yang tingginya merupakan sqrt(3) kali lebarnya, dengan dua lingkaran pada setiap ubin yang saling tergeser sejauh setengah panjangnya. Sebaiknya gunakan alat pembuat lintasan SVG atau generator heksagonal khusus.

SVG secara langsung sudah tampil jernih pada semua ukuran; namun jika Anda merasterisasinya dengan resolusi yang lebih rendah daripada ukuran elemen pola, akan terjadi fenomena aliasing. Ekspor file SVG dengan resolusi 2 kali atau 3 kali dari ukuran tampilan yang diharapkan.

Gantilah fill="#hex" pada bagian lingkaran dengan fill="url(#gradient-id)", dan tambahkan definisi <linearGradient> di dalam <defs> yang sama. Setiap titik akan ditampilkan dengan gradien tersebut, yang dapat memakan sumber daya tinggi jika kanvas memiliki ribuan titik.

Editor standar mengirim kanvas, jarak, jari-jari, dan warna ke server untuk merender pratinjau. Dalam alur terpandu, pengaturan ini juga muncul di URL halaman. Jangan masukkan informasi sensitif; alat ini tidak menyimpan proyek pola yang dapat digunakan kembali.

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