SVG / पृष्ठभूमियाँ

SVG पैटर्न जनरेटर: बिना जोड़ वाले बैकग्राउंड टाइल

डॉट्स, ग्रिड, धारियाँ, चेक, ज़िगज़ैग, लहरें, त्रिभुज, षट्भुज, प्लस चिन्ह, वृत्त और ऑफ़सेट पोल्का पैटर्न बनाएँ। एस्केप किया हुआ CSS बैकग्राउंड कॉपी करें या SVG और PNG टाइल डाउनलोड करें।

SVG पैटर्न जनरेटर: बिना जोड़ वाले बैकग्राउंड टाइल: डॉट्स, ग्रिड, धारियाँ, चेक, लहरें, षट्भुज और अन्य आकृतियाँ चुनें, उनका आकार, अंतराल, रंग और रोटेशन सेट करें, और ऐसी टाइल पाएँ जो बिना दिखने वाले जोड़ के दोहराई जाती है। इसे SVG या CSS बैकग्राउंड के रूप में कॉपी करें, या टाइल को SVG अथवा PNG के रूप में डाउनलोड करें। यह आपके ब्राउज़र में 100% स्थानीय रूप से चलता है और सर्वर पर कोई फ़ाइल अपलोड नहीं होती।

श्रेणी
डेवलपर टूल्स
रन
आपके ब्राउज़र में
लागत
मुफ़्त · साइन अप की ज़रूरत नहीं
उपलब्धता
इस्तेमाल के लिए तैयार
Seamless SVG पैटर्नलोकल प्रोसेसिंग

पूरी तरह आपके ब्राउज़र में चलता है

Tile: 48 × 48 SVG इकाइयाँ

SVG पैटर्न
<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 बैकग्राउंड
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;

घुमाव में 45° के चरणों का उपयोग होता है, ताकि एक्सपोर्ट किया गया वर्गाकार tile seamless रहे। PNG में एक tile होता है। Stroke outlined motifs को प्रभावित करता है; checks में solid fills का उपयोग होता है।

CSS gradients से पैटर्न बनाएँ

SVG पैटर्न

SVG 2 patternUnits और patternTransform को निर्दिष्ट करता है, जो टाइल की निर्देशांक प्रणाली और घुमाव को परिभाषित करते हैं। https://www.w3.org/TR/SVG2/pservers.html#Patterns

CSS में पैटर्न का उपयोग

CSS बैकग्राउंड SVG टाइल को data URI के रूप में एम्बेड करता है, इसलिए अलग इमेज फ़ाइल की ज़रूरत नहीं होती। SVG निर्देशांक रूपांतरण https://www.w3.org/TR/SVG2/coords.html पर निर्दिष्ट हैं। मोटिफ़ स्थानीय रूप से बनाए जाते हैं; किसी बाहरी पैटर्न या फ़ॉन्ट एसेट का उपयोग नहीं किया जाता।

इस्तेमाल करने का तरीका

  1. एक आकृति चुनें और उसका आकार, अंतराल और स्ट्रोक सेट करें।
  2. दो आकृति रंग, एक बैकग्राउंड और रोटेशन चुनें।
  3. दोहराए जाने वाले प्रीव्यू को देखें, फिर CSS कॉपी करें या SVG अथवा PNG टाइल एक्सपोर्ट करें।

गोपनीयता और सीमाएँ

पैटर्न बनाना और इमेज एक्सपोर्ट करना सब आपके ब्राउज़र में स्थानीय रूप से होता है।

संबंधित टूल्स

CSS पैटर्नSVG वेवSVG ब्लॉब

अक्सर पूछे जाने वाले सवाल

रोटेशन 45-डिग्री के चरणों में ही क्यों हैं?

मनमाना रोटेशन आम तौर पर सीमित आकार वाली वर्गाकार दोहराई जाने वाली टाइल नहीं बनाता। इन कोणों पर वर्गाकार बड़ी टाइलें बनती हैं, इसलिए CSS और डाउनलोड की गई इमेज बिना जोड़ के रहती हैं।

क्या PNG में पूरा प्रीव्यू शामिल होता है?

नहीं। इसमें एक दोहराई जाने वाली टाइल होती है, जिसका वर्गाकार रास्टर आकार पूर्ण पिक्सेल तक ऊपर की ओर पूर्णांकित किया जाता है। SVG अपने सटीक ज्यामितीय आयाम बनाए रखता है।

क्या मैं इन्हें SVG के बिना बना सकता हूँ?

मौजूदा CSS Pattern Generator CSS ग्रेडिएंट का उपयोग करके कम विकल्प देता है। यह टूल SVG पैटर्न एलिमेंट और डाउनलोड की जा सकने वाली टाइलें देता है। स्ट्रोक आउटलाइन वाली आकृतियों को प्रभावित करता है; चेक में ठोस भराव का उपयोग होता है।

मुफ़्त टूल · आपके ब्राउज़र में बार चलता है · अकाउंट की ज़रूरत नहीं