Softonic

SVG Nokta Deseni Oluşturucu

Adım 1 / 3
Sonraki

Nokta desenleri modern web arka planlarının gösterişsiz beygiridir, bir Notion sayfasının arkasındaki ince noktalı ızgarayı, bir hero bölümündeki puantiyeleri ya da bir kartın üzerindeki tane benzeri dokuyu düşünün. Bu oluşturucu, satır içi bir <pattern> tanımı kullanarak tek bir SVG kurar, böylece dosya minik kalır (genellikle 500 baytın altında) ve herhangi bir boyutta kusursuzca döşenir. Tuvali, noktalar arasındaki aralığı, yarıçapı, nokta rengini ve arka planı kontrol edersiniz.

Nokta deseni nasıl kurulur

  1. 1

    Tuvali ayarlayın

    Piksel cinsinden genişlik ve yükseklik. CSS arka planları için bu küçük kalabilir (örneğin 800×600) ve döşenebilir.

  2. 2

    Aralığı seçin

    Komşu noktaların merkezleri arasındaki mesafe. 20-40 px temiz görünür; 10 px gürültülü olur.

  3. 3

    Nokta yarıçapını ayarlayın

    İnce doku için 1-3 px, kasıtlı puantiyeler için 4-8 px.

  4. 4

    Renkleri seçin

    Nokta dolgusu (ön plan) ve tuval arka planı. Gerçek bir bindirme deseni için arka planı `transparent` olarak ayarlayın.

  5. 5

    SVG'yi kopyalayın

    HTML'inize yapıştırın veya CSS'te `background-image: url("data:image/svg+xml,...")` olarak kullanın.

Desen nasıl tanımlanır

Oluşturucu, <defs> içinde bir <pattern> öğesi çıkarır ve fill="url(#dots)" ile tam tuval bir <rect> doldurur:

<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", döşeme boyutunu piksele kilitler, böylece ana SVG’yi ölçeklemek noktaları bozmaz.

Desen ayarlama kopya kâğıdı

Görünüm Aralık Yarıçap Kontrast
Fısıltı (zar zor görülür) 30-40 1-1.5 %5-10 saydamlık
İnce arka plan 25-30 2 %15-20 saydamlık
Dürüst nokta deseni 20 2-3 Tam renk
Kasıtlı puantiyeler 40-60 8-15 Tam renk
Halftone efekti 10 1 Gradyan dolgu

Bunu bir CSS arka planı olarak kullanma

SVG’yi bir veri URL’si olarak kodlayın ve herhangi bir öğeye uygulayın:

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

SVG’yi CSS ile döşemek, bir PNG göndermekten daha hızlıdır, tarayıcı onu son görüntüleme boyutunda rasterleştirir, böylece her DPR’de (1x, 2x, 3x ekranlar) keskin kalır.

Noktalar okunabilirliğe zarar verdiğinde

Doğrudan gövde metninin arkasındaki bir nokta deseni, ince metne karşı titreşen bir moiré oluşturabilir. Metni üstüne koymak zorundaysanız ya:

  • Noktaların satırların arasına düşmesi için aralığı 40+ px artırın ya da
  • Desen saydamlığını %10’un altına düşürün ya da
  • Metni desenin üzerindeki düz bir kartın içine koyun.

Sık Sorulan Sorular

Arka plan rengini transparent olarak ayarlayın, böylece tek boya noktaların kendisi olur. SVG’yi göstermek istediğiniz herhangi bir renk ya da görselin üzerine yerleştirin.

Bu oluşturucuyla değil, bir kare ızgara üretir. Bir altıgen düzen için, genişliğinin sqrt(3) katı kadar yüksek, döşeme başına yarım kaydırılmış iki daireli bir desen döşemesine ihtiyacınız var. SVG yol oluşturucusunu veya özel bir altıgen oluşturucuyu düşünün.

SVG’nin kendisi her boyutta keskindir, ama onu desen döşemesinden daha küçük bir çözünürlükte rasterleştirirseniz kenar yumuşatma (aliasing) alırsınız. Amaçladığınız görüntüleme boyutunun 2 veya 3 katında dışa aktarın.

Dairedeki fill="#hex" ifadesini fill="url(#gradient-id)" ile değiştirin ve aynı <defs> içine bir <linearGradient> tanımı ekleyin. Her nokta o gradyanla görüntülenir, tuvalde binlerce nokta varsa bu pahalı olabilir.

Standart düzenleyici, önizlemeyi oluşturmak için tuval, aralık, yarıçap ve renkleri sunucuya gönderir. Rehberli akışta bu ayarlar sayfa URL’sinde de görünür. Hassas bilgi girmeyin; araç yeniden kullanılabilir bir desen projesi kaydetmez.

İlgili Araçlar

Çizgili Kağıt Oluşturucu

Ücretsiz yazdırılabilir çizgili kağıt oluşturun. Kolej, geniş veya dar çizgi seçin, satır aralığını mm cinsinden ayarlayın, kağıt boyutunu ve bir kenar boşluğu çizgisi belirleyin, ardından yazdırın veya SVG olarak indirin.

Material Design Renk Seçici

Material Design renk paletini gezin. Herhangi bir tonu (50'den A700'e kadar) tek dokunuşla HEX, RGB veya HSL biçiminde kopyalayın.

Kareli kağıt oluşturucu

Çevrimiçi yazdırılabilir kareli kağıt oluşturun: kare veya nokta ızgarası seçin, aralığı mm cinsinden ayarlayın, A4 veya Letter ile özel bir çizgi rengi belirleyin, ardından yazdırın veya net bir SVG indirin.

Kanaviçe Şablonu Oluşturucu

JPEG, PNG veya WebP görselini 10–150 ilmek, 2–40 özel renk, semboller, kesin sayımlar ve kumaş ölçüleri içeren yazdırılabilir kanaviçe şemasına dönüştürün.

Fotoğraflardaki Yüzleri Çevrimiçi Bulanıklaştırın

Yüzlerin veya hassas ayrıntıların üzerine kutular çizin, ardından bulanıklaştırın, pikselleştirin ya da siyah kutuyla kapatın. İşlem tarayıcıda yapılır ve sonuç JPEG olarak indirilir.

Görüntü Formatı Dönüştürücü

Görselleri doğrudan tarayıcıda JPG, PNG veya WebP biçimine dönüştürün; kayıplı biçimlerde kaliteyi siz kontrol edin, PNG ve WebP'de şeffaflık korunur.

Araç diğer dillerde mevcuttur