SVG Desen Oluşturucu

Seçilen bir şekil, ön plan ve arka plan renkleri ve ayarlanabilir ölçekle döşenebilir bir SVG arka plan deseni oluşturun, ardından SVG'yi veya CSS'i kopyalayıp dosyayı indirin.

Araç yükleniyor…

SVG Desen Oluşturucu — Noktalar, ızgara, şeritler, çapraz çizgiler veya bir dama tahtası gibi bir desen şekli seçin, ön plan ve arka plan renklerini belirleyin ve döşeme ölçeğiyle çizgi kalınlığını ayarlayın. Canlı bir önizleme deseni bir kutu boyunca döşer ve tek tıklamayla kopyalamak veya indirmek için kullanıma hazır SVG işaretlemesi ya da CSS background kuralı gösterilir. Her şey tamamen tarayıcınızda çalışır; hiçbir renk, kod veya dosya asla bir sunucuya gönderilmez.

SVG Desen Oluşturucu nedir?

SVG Desen Oluşturucu, bir grafik düzenleyici açmadan hafif, tekrarlanabilir bir arka plana ihtiyaç duyan web tasarımcıları ve ön uç geliştiricileri için ücretsiz, tarayıcı içi bir araçtır. Bir açılır menüden bir desen seçersiniz (noktalar, ızgara, şeritler, çapraz, dama), şekiller için bir ön plan rengi ve döşeme için bir arka plan rengi belirlersiniz ve döşeme boyutu ile kontur kalınlığını denetlemek için ölçek ve kalınlık sayı alanlarını kullanırsınız. Sonuç, kusursuz şekilde tekrarlanacak biçimde tasarlanmış, keskin SVG olarak çizilmiş tek bir döşemedir; böylece dosya boyutları çok küçük kalır ve desen bulanıklaşmadan ölçeklenir. Kopyalanabilir çıktıyı ham SVG işaretlemesi ile bir CSS background-image kuralı arasında değiştirmek için Format düğmesini kullanın, ardından siteler, kartlar, hero bölümleri ve UI taslakları için kopyalayın veya .svg dosyasını indirin.

SVG Desen Oluşturucu nasıl kullanılır

  1. Açılır menüden bir desen seçin: Noktalar, Izgara, Şeritler, Çapraz veya Dama.
  2. Şekiller için bir ön plan rengi ve döşeme için bir arka plan rengi yazın veya seçin.
  3. Ölçek (piksel cinsinden döşeme boyutu) ve Kalınlık (nokta yarıçapı veya çizgi kalınlığı) sayı alanlarını ayarlayın.
  4. Ayarlar'ı açın ve çıktıyı SVG ile CSS arasında değiştirmek için Format düğmesini kullanın.
  5. Canlı önizlemenin deseni döşemesini izleyin, ardından SVG'yi veya CSS'i kopyalayın ya da .svg dosyasını kaydetmek için İndir'e tıklayın.

Örnekler

Puantiyeli arka plan

Noktalar'ı seçin, 24px gibi küçük bir ölçek ve 3 kalınlık belirleyin; koyu döşeme arka planı üzerinde açık renk bir nokta rengiyle eşit aralıklı bir puantiye dokusu elde edin.

Teknik çizim ızgarası

Izgara'yı 40px ölçek ve ince 1px kalınlıkla seçin; koyu mavi bir arka plan üzerinde soluk bir çizgi rengiyle teknik çizim tarzı bir sayfa arka planı oluşturun.

Çapraz CSS şeritleri

Çapraz'ı seçin, Format düğmesini CSS'e getirin ve oluşturulan background-repeat: repeat içeren background-image kuralını doğrudan stil sayfanıza kopyalayın.

Sıkça sorulan sorular

Hangi desenleri oluşturabilirim?
Beş döşenebilir desen: noktalar, ızgara, şeritler, çapraz çizgiler ve bir dama tahtası. Her biri kusursuz şekilde tekrarlanan küçük bir SVG döşeme olarak çizilir; böylece her boyutta keskin kalır ve dosya çok küçük olur.
Ölçek ve Kalınlık neyi denetler?
Ölçek, bir döşemenin piksel cinsinden boyutudur ve tekrarlanan şekillerin birbirinden ne kadar uzakta olduğunu belirler. Kalınlık, döşeme içindeki nokta yarıçapı veya çizgi kalınlığıdır. Desenin döşemeyi asla aşırı doldurmaması için kalınlık, ölçeğe göre otomatik olarak sınırlanır.
SVG ve CSS çıktısı arasındaki fark nedir?
SVG, bağımsız bir .svg dosyası veya satır içi kullanım için ham işaretlemeyi verir. CSS ise bir data URI artı background-repeat: repeat kullanan, stil sayfasına yapıştırılmaya hazır bir background-image kuralı verir. İkisi arasında geçiş yapmak için Ayarlar'daki Format düğmesini kullanın.
HEX yazmak yerine renkleri görsel olarak seçebilir miyim?
Evet. Tarayıcınızın yerel renk seçicisini açmak için ön plan veya arka plan alanının yanındaki renk çipine tıklayın ya da doğrudan #4f86f7 gibi bir HEX değeri yazın. Siz değiştirdikçe önizleme ve çıktı güncellenir.
Renklerim veya dosyalarım herhangi bir yere yükleniyor mu?
Hayır. Desen tamamen tarayıcınızda bir SVG dizesi olarak oluşturulur ve indirme yerel olarak bir Blob şeklinde üretilir. Hiçbir renk, kod veya dosya asla bir sunucuya gönderilmez; bu yüzden çevrimdışı çalışır ve çalışmanızı gizli tutar.

İlgili araçlar

Koddan Görsele

Bir kod parçacığını tarayıcınızda söz dizimi vurgulu bir görsele dönüştürün; 20'den fazla dil, özel temalar ve arka planlar, satır numaraları ve PNG veya SVG dışa aktarma ile.

Renk Kontrastı Denetleyici

Metin ve arka plan rengi arasındaki WCAG 2.1 kontrastını ve APCA Lc puanını denetleyin, AA, AAA ve 3:1 rozetlerini görün ve en yakın geçen rengi uygulayın.

Renk Karıştırıcı

İki HEX rengi seçtiğiniz oranda RGB veya Lab renk uzayında harmanlayın ve ortaya çıkan ara rengi örnek ve kopyalanabilir HEX değeri olarak okuyun.

Renk Tonu Üretici

Tek bir temel HEX rengini ayarlanabilir adımlar, adım başına WCAG kontrast ipuçları ve CSS, Tailwind, JSON dışa aktarımıyla OKLCH, HSL veya RGB ölçeğine dönüştürün.