Bu araç deseni düz SVG kodu olarak oluşturur; bu yüzden sonuç her yakınlaştırma seviyesinde veya ekran yoğunluğunda keskin kalır ve genelde birkaç yüz bayttan ibarettir - eşdeğer bir PNG karodan çok daha hafiftir. CSS'i kopyalayarak tekrar eden bir background-image'ı doğrudan stil dosyanıza yapıştırabilir, ya da SVG dosyasını bağımsız bir görsel olarak kullanabilirsiniz. Desen tamamen cihazınızda çizildiği ve hiçbir yere gönderilmediği için, sayfa bir kez yüklendikten sonra çevrimdışıyken de çalışmaya devam eder.
Ücretsiz SVG Pattern Generator
Tümüyle tarayıcınızda çalışır - yükleme yok, üyelik yok.
Desen
Stil
Ön plan
Arka plan
SVG pattern generator ne işe yarar?
SVG pattern generator; nokta, çizgi, ızgara ve zikzak gibi geometrik şekillerden kesintisiz, tekrar eden bir arka plan oluşturur. Şekli, renkleri, karo boyutunu ve çizgi kalınlığını siz seçersiniz; araç da ufacık, her ölçekte net kalan bir SVG ile doğrudan yapıştırabileceğiniz CSS kodunu üretir. Her şey tarayıcınızda hesaplanır, yani hiçbir şey bir yere yüklenmez.
Nasıl kullanılır
- 1Bir desen seçin. Örnekler arasından bir şekil seçin: nokta, halka, ızgara, çapraz, crosshatch, artı, zikzak ve daha fazlası.
- 2Renkleri ve şekli ayarlayın. Bir ön plan ve arka plan rengi seçin (ya da arka planı şeffaf yapın), sonra önizleme anlık güncellenirken boyut, kalınlık ve opaklık kaydırıcılarını ayarlayın.
- 3Kopyalayın ya da indirin. CSS ve SVG sekmeleri arasında geçiş yapın, kodu kopyalayın ya da her yerde kullanmak için bağımsız .svg dosyasını indirin.
Kimler için
- Web geliştiricileri için bir görsel dosyası eklemeden hero alanına, karta ya da bir bölüme hafif bir arka plan dokusu katmak.
- UI ve marka tasarımcıları için marka renklerinde kesintisiz dokular denemek ve bunları net SVG dosyaları olarak dışa aktarmak.
- E-posta ve sunum hazırlayanlar için her ekranda keskin görünen, küçük ve döşenebilir bir desene ihtiyaç duymak.
- Öğrenciler ve meraklılar için değerleri değiştirip çıktıyı inceleyerek SVG
<pattern>ve CSS arka plan döşemesinin nasıl çalıştığını öğrenmek. - İçerik üreticileri için thumbnail, banner ve mockup'lara hızlıca dekoratif bir arka plan eklemek.
Sık sorulan sorular
Bu SVG pattern generator ücretsiz mi?
Evet, tamamen ücretsiz, üyelik ve kullanım sınırı yok. Her desen tarayıcınızda oluşturulur, istediğiniz kadar desen yapıp kopyalayabilirsiniz; sayfa bir kez yüklendikten sonra çevrimdışıyken bile.
Desenler gerçekten kesintisiz mi?
Evet. Her şekil, kenarları komşu karoyla tam olarak örtüşecek şekilde çizilir ve desen sabit bir ızgara üzerinde tekrar eder. Hem CSS'teki background-image hem de SVG'deki <pattern> öğesi aynı hücreyi görünür dikiş olmadan uçtan uca döşer.
CSS mi yoksa SVG çıktısını mı kullanmalıyım?
Tekrar eden bir arka planı doğrudan stil dosyanıza yapıştırmak için CSS'i kullanın - web siteleri için en hızlı yol budur. Bağımsız bir dosyaya ihtiyacınız olduğunda, örneğin görsel dosyası olarak, bir tasarım aracında ya da doğrudan HTML'e gömülü kullanmak için SVG indirmeyi tercih edin.
PNG yerine neden SVG deseni kullanmalıyım?
SVG vektörel olduğu için her yakınlaştırma seviyesinde veya ekran yoğunluğunda kusursuz keskin kalır ve asla piksellenmez. Geometrik bir SVG karo genelde sadece birkaç yüz bayttır, eşdeğer bir PNG'den çok daha küçüktür ve yeniden dışa aktarmadan istediğiniz an renklerini değiştirebilirsiniz.
Arka planı şeffaf yapabilir miyim?
Evet. Şeffaf seçeneğini işaretleyin; arka plan dolgusu kaldırılır ve desen yalnızca ön plan şekillerini gösterir. Böylece deseni mevcut bir renk, görsel ya da gradyanın üzerine katman olarak ekleyebilirsiniz.
Tasarımım bir yere yükleniyor mu?
Hayır. Desenin tamamı tarayıcınızda düz SVG koduyla yerel olarak oluşturulur ve bir sunucuya gönderilmez; bu yüzden renkleriniz ve ayarlarınız yalnızca kendi cihazınızda kalır.