Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Kecil dan Tekstur SVG

WarnaPengembangGambar

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Jenis Kebisingan

Jenis

Parameter Kebisingan

Frekuensi Dasar: 65 Lebih tinggi = grain yang lebih halus. Nilai ini dibagi dengan 100 (0,01–2,0).

Lapisan: 3 Semakin banyak lapisan = detail yang lebih kaya (membutuhkan waktu lebih lama untuk di-render).

Benih: 7 Ubah untuk mendapatkan pola acak yang berbeda.

Lipat Peta (tanpa celah)

Mode Warna

Monokrom

Diberi Warna (diberi tona)

Latar belakang

Warna Kebisingan

Ketebalan Kebisingan %: 35

Kontras: 120 Meningkatkan intensitas kebisingan melalui feComponentTransfer.

Ukuran Keluaran

Lebar

piksel

Tinggi

piksel

KELUARAN

Sisi klien

SVG Inline

Latar Belakang CSS (URI data)

Filtrasi SVG Hanya

Hanya elemen — terapkan dengan filter="url(#noise)" pada bentuk SVG apa pun.

IKLAN · HAPUS?

Memandu

Generator Kecil dan Tekstur SVG

Buat kebisingan organik yang kasar dan tekstur awan yang tidak teratur secara langsung di browser Anda menggunakan SVG feTurbulence filter. Geser slider, sesuaikan seed, pilih warna penyesuaian, dan lihat tekstur diperbarui secara langsung. Ekspor sebagai SVG inline, URI CSS, atau filter SVG yang dapat digunakan pada bentuk apa pun. background-image Pilih jenis kebisingan —

Cara Penggunaan

Kebisingan Fraktal untuk kebisingan film organik, Turbulensi untuk pola awan yang berputar. Frekuensi Dasar
Atur untuk ukuran kebisingan dan Lapisan untuk kekayaan detail. Seed
Ubah untuk melihat berbagai pola acak yang berbeda. Penggabungan Tile
Beralih untuk hasil yang dapat digunakan secara berulang. Mode Warna
Pilih Monokrom atau dan sesuaikan latar belakang, penyesuaian warna, kecerahan, dan kontras. Salin SVG, URI data CSS, atau potongan filter, atau unduh file SVG.
Dua jenis kebisingan

Fitur

– Kebisingan Fraktal (kebisingan organik) dan Turbulensi (pola berputar yang kabut). – Pembaruan tampilan yang didebounce setiap kali slider diubah.
Pratinjau langsung Kontrol Lapisan
– 1 hingga 8 lapisan untuk menyeimbangkan kekayaan terhadap kinerja. Kemampuan reproduksi berdasarkan seed
– Setiap seed adalah pola acak yang dapat diprediksi. Pengulangan tanpa celah
– Opsi untuk latar belakang yang dapat diulang. stitchTiles="stitch" Mono atau berwarna
– Kebisingan skala gelap atau warna apa pun melalui Kecerahan dan kekerasan feColorMatrix.
– Tingkatkan intensitas dengan – SVG inline, latar belakang URI data CSS, atau filter hanya SVG. feComponentTransfer.
Tiga format output – Simpan sebagai file independen
Unduh satu klik Kapan Menggunakan Tekstur Kebisingan .svg.

Gradien berkebisingan

– Overlay kebisingan pada gradien CSS untuk mengurangi efek garis. Efek kertas dan film
– Tambahkan kebisingan halus pada ilustrasi datar dan bagian utama. Latar belakang awan dan asap
– Gunakan turbulensi dengan frekuensi rendah dan beberapa lapisan. Overlay kebisingan dan tekstur
– Terapkan filter pada bentuk untuk tampilan seperti cetak tangan. Generator Kecil dan Tekstur SVG 4

 Tanya Jawab Umum

Apa itu feTurbulence dan bagaimana cara kerjanya?

feTurbulence adalah primitif filter SVG yang menghasilkan kebisingan Perlin. Ia menghasilkan pola acak pseudo yang didasarkan pada benih dan frekuensi dasar. Frekuensi yang lebih rendah menghasilkan bentuk kabut yang luas; frekuensi yang lebih tinggi menghasilkan grain yang halus. Beberapa lapisan menumpuk kebisingan pada frekuensi yang semakin tinggi untuk memberikan detail yang lebih kaya.
Perbedaan antara fractalNoise dan turbulence?

Keduanya didasarkan pada kebisingan Perlin. fractalNoise menggunakan kebisingan berharga langsung, menghasilkan grain organik yang halus yang menyerupai film. turbulence mengambil nilai absolut, menghasilkan pola kabut dengan kontras tinggi yang terlihat seperti asap atau marmer.
Mengapa menggunakan kebisingan SVG daripada gambar PNG?

Kebisingan SVG dihasilkan oleh browser secara real-time, sehingga dapat diperbesar tanpa menjadi kabur dan tidak menambahkan permintaan HTTP selain URI data kecil. Ia juga menghasilkan tampilan yang tajam kembali pada setiap rasio piksel perangkat.
Apa fungsi stitchTiles?

Dengan stitchTiles="stitch", filter SVG memastikan bahwa pola kebisingan beraturan di batas peta, sehingga tekstur dapat diulang sebagai latar belakang CSS tanpa terlihat celah.
Apakah filter SVG didukung oleh semua browser?

Ya — feTurbulence merupakan bagian dari SVG 1.1 dan didukung oleh semua browser modern, termasuk Chrome, Safari, Firefox, dan Edge. Kinerja bervariasi tergantung jumlah lapisan dan area yang di-render, sehingga lebih disarankan menggunakan ukuran peta yang lebih kecil saat menargetkan perangkat dengan kinerja rendah.