Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Pola SVG (Ubin Geometris)

Pengembang

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

KELUARAN

Sisi klien

Kode SVG

Latar Belakang CSS

Elemen Pola

IKLAN · HAPUS?

Memandu

Generator Pola SVG

Buat pola ubin geometris yang mulus dengan pratinjau langsung. Pilih dari 12 jenis pola — titik, garis, kisi, segi enam, chevron, segitiga, dan lainnya — sesuaikan warna, ukuran, spasi, dan rotasi, kemudian ekspor sebagai kode SVG, latar belakang CSS, atau file SVG yang dapat diunduh. Semuanya berjalan di browser Anda dengan umpan balik visual instan.

Cara Penggunaan

Pilih jenis pola dari dropdown, lalu sesuaikan kontrol untuk menyesuaikan desain Anda. Pratinjau diperbarui secara real-time saat Anda mengubah warna, ukuran, spasi, lebar goresan, opasitas, dan rotasi. Ketika Anda puas dengan hasilnya, gunakan tombol ekspor untuk menyalin kode SVG, menyalin markup latar belakang CSS, mengunduh file SVG, atau menyalin hanya definisi pola untuk disematkan dalam SVG yang ada.

Fitur

12 Jenis Pola — Titik, garis horizontal, garis vertikal, garis diagonal, kisi, chevron/zigzag, segi enam, segitiga, berlian, salib, gelombang, dan papan catur. Masing-masing dibuat dengan mulus.
Pratinjau Langsung — Area pratinjau visual besar yang menunjukkan pola Anda dibuat secara real-time. Setiap perubahan tercermin secara instan — tidak ada penundaan, tidak ada tombol buat.
Kustomisasi Warna — Pemilih warna untuk warna latar depan dan latar belakang. Buat kombinasi warna apa pun untuk pola Anda.
Kontrol Ukuran & Spasi — Penggeser jangkauan untuk skala pola (10-100px), lebar goresan (1-20px), dan spasi (5-100px). Sempurnakan kepadatan dan berat pola Anda.
Opasitas & Rotasi — Sesuaikan opasitas pola (0,1-1,0) dan rotasi (0-360°) untuk variasi kreatif dan efek overlay.
Ekspor sebagai Kode SVG — Salin markup SVG lengkap dengan pola tertanam, siap untuk ditempel ke proyek apa pun.
Ekspor sebagai Latar Belakang CSS — Salin properti background-image CSS dengan data URI — tempel langsung ke stylesheet Anda untuk latar belakang pola yang mulus.
Unduh File SVG — Unduh pola sebagai file .svg untuk digunakan dalam alat desain (Figma, Illustrator, Sketch).
Salin Definisi Pola — Salin hanya elemen SVG untuk disematkan ke dalam dokumen SVG yang ada.

Jenis Pola

Titik: Lingkaran yang disusun dalam kisi biasa. Pola polka dot klasik.
Garis: Garis horizontal, vertikal, atau diagonal yang sejajar. Bersih dan minimal.
Kisi: Garis yang saling tegak lurus membentuk kisi kertas grafik.
Chevron/Zigzag: Pola berulang berbentuk V. Bagus untuk latar belakang dinamis.
Segi Enam: Ubin sarang madu. Matematis dan organik.
Segitiga: Kisi segitiga berulang. Geometris dan modern.
Berlian: Persegi yang diputar menciptakan bentuk berlian. Elegan dan klasik.
Salib: Tanda plus yang disusun dalam kisi. Bersih dan terstruktur.
Gelombang: Garis gelombang sinus yang melengkung. Organik dan mengalir.
Papan Catur: Persegi yang bergantian antara diisi dan kosong. Berani dan ikonik.

IKLAN · HAPUS?

Apa itu pola SVG?

Pola SVG adalah elemen grafis yang dapat digunakan kembali yang didefinisikan dalam dokumen SVG yang dapat dibuat ubin (berulang) untuk mengisi area apa pun. Pola didefinisikan di bagian menggunakan elemen , kemudian direferensikan sebagai pengisian untuk bentuk seperti persegi panjang, lingkaran, atau jalur. Pola SVG tidak bergantung pada resolusi (skala tanpa pixelation), ringan (hanya teks/kode), dan didukung oleh semua browser modern. Pola ini ideal untuk latar belakang web, elemen desain, dan situasi apa pun di mana Anda memerlukan desain berulang yang mulus.

Bagaimana cara menggunakan output latar belakang CSS?

Klik 'Salin Latar Belakang CSS' untuk mendapatkan properti CSS yang siap digunakan. Tempel ke stylesheet Anda seperti ini: .my-element { background-image: url('data:image/svg+xml,…'); } Pola dikodekan sebagai data URI, jadi tidak ada file eksternal yang diperlukan — pola tertanam langsung dalam CSS Anda. Ini berfungsi di semua browser modern. Anda dapat menggabungkannya dengan background-size, background-repeat, dan properti CSS lainnya untuk kontrol tambahan.

Bisakah saya menggunakan pola ini secara komersial?

Ya. Pola yang dihasilkan oleh alat ini adalah konstruksi matematis/geometris yang dibuat oleh pilihan parameter Anda. Pola ini bukan karya seni berlisensi — pola ini adalah output yang dihasilkan berdasarkan pengaturan Anda. Anda dapat menggunakannya dengan bebas dalam proyek pribadi, situs web komersial, desain cetak, antarmuka aplikasi, atau tujuan lain apa pun tanpa atribusi.

Mengapa SVG daripada PNG untuk pola?

Pola SVG tidak bergantung pada resolusi — pola ini terlihat tajam pada tingkat zoom apa pun atau kepadatan layar, dari ponsel hingga monitor 4K hingga cetak. Pola ini juga jauh lebih kecil dalam ukuran file dibandingkan dengan pola PNG yang setara (sering di bawah 1KB vs ratusan KB). Pola SVG dapat ditata dengan CSS, dianimasikan dengan JavaScript, dan dimodifikasi tanpa perlu membuat ulang. Untuk penggunaan web khususnya, pola SVG lebih unggul daripada alternatif raster dalam hampir setiap cara.

Ingin bebas iklan? Bebas Iklan Hari Ini

