SVG / Arka planlar

SVG Desen Oluşturucu: Kesintisiz Arka Plan Döşemeleri

Noktalar, ızgaralar, şeritler, kareler, zikzaklar, dalgalar, üçgenler, altıgenler, artı işaretleri, daireler ve kaydırılmış puantiye desenleri oluşturun. Kaçış karakterleri uygulanmış bir CSS arka planını kopyalayın veya SVG ve PNG döşemelerini indirin.

SVG Desen Oluşturucu: Kesintisiz Arka Plan Döşemeleri: Noktalar, ızgaralar, şeritler, kareler, dalgalar, altıgenler ve diğer motifleri seçin; boyutlarını, aralıklarını, renklerini ve döndürme açılarını ayarlayın. Görünür birleşim çizgileri olmadan tekrarlanan bir döşeme elde edin. SVG veya CSS arka planı olarak kopyalayın ya da döşemeyi SVG veya PNG olarak indirin. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.

Kategori: Geliştirici araçları
Çalıştırma sayısı: Tarayıcınızda
Maliyet: Ücretsiz · kayıt gerekmez
Kullanılabilirlik: Kullanıma hazır

Kesintisiz SVG desenleriYerel işleme

Tamamen tarayıcınızda çalışır

Döşeme: 48 × 48 SVG birimi

SVG deseni

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><defs><pattern id="s5svg-pattern" width="48" height="48" patternUnits="userSpaceOnUse" patternTransform="rotate(0)"><g transform="translate(-48 -48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(0 -48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(48 -48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(-48 0)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(0 0)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(48 0)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(-48 48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(0 48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(48 48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g></pattern></defs><rect width="100%" height="100%" fill="#14200f"/><rect width="100%" height="100%" fill="url(#s5svg-pattern)"/></svg>

CSS arka planı

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cpattern id='s5svg-pattern' width='48' height='48' patternUnits='userSpaceOnUse' patternTransform='rotate(0)'%3E%3Cg transform='translate(-48 -48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(0 -48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(48 -48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(-48 0)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(0 0)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(48 0)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(-48 48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(0 48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(48 48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%2314200f'/%3E%3Crect width='100%25' height='100%25' fill='url(%23s5svg-pattern)'/%3E%3C/svg%3E");
background-size: 48px 48px;
background-repeat: repeat;

Döndürme, dışa aktarılan kare döşemenin kesintisiz kalması için 45° adımlar kullanır. PNG bir döşeme içerir. Kontur, çizgili motifleri etkiler; dama deseninde düz dolgular kullanılır.

CSS gradyanlarıyla desen oluştur

SVG desenleri

SVG 2, döşeme koordinat sistemini ve döndürmeyi tanımlayan patternUnits ile patternTransform özelliklerini belirtir. https://www.w3.org/TR/SVG2/pservers.html#Patterns

Deseni CSS'te kullanma

CSS arka planı, SVG döşemesini veri URI'si olarak içerir; bu nedenle ayrı bir görsel dosyası gerekmez. SVG koordinat dönüşümleri https://www.w3.org/TR/SVG2/coords.html adresinde belirtilir. Motifler yerel olarak oluşturulur; harici desen veya yazı tipi varlıkları kullanılmaz.

Nasıl kullanılır?

Bir motif seçin; boyutunu, aralığını ve çizgi kalınlığını ayarlayın.
İki motif rengi, bir arka plan ve bir döndürme açısı seçin.
Tekrarlanan önizlemeyi inceleyin; ardından CSS'yi kopyalayın veya SVG ya da PNG döşemesini dışa aktarın.

Gizlilik ve sınırlamalar

Tüm desen oluşturma ve görsel dışa aktarma işlemleri tarayıcınızda yerel olarak gerçekleşir.

İlgili araçlar

Sık sorulan sorular

Döndürme açıları neden 45 derecelik adımlarla ilerliyor?

Keyfi bir döndürme genellikle sonlu ve kare biçimli, tekrarlanan bir döşeme oluşturmaz. Bu açılar kare üst döşemelere sahiptir; böylece CSS ve indirilen görseller kesintisiz kalır.

PNG, önizlemenin tamamını içeriyor mu?

Hayır. PNG, piksel cinsinden tam sayıya yuvarlanmış kare bir raster boyutuyla tek bir tekrarlanan döşeme içerir. SVG, kesin geometrik boyutlarını korur.

Bunları SVG kullanmadan oluşturabilir miyim?

Mevcut CSS Desen Oluşturucu, CSS gradyanlarını kullanarak daha küçük bir seçim sunar. Bu araç SVG desen öğeleri ve indirilebilir döşemeler sağlar. Çizgi, dış çizgili motifleri etkiler; kareler düz dolgular kullanır.

Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez