यह टूल पैटर्न को प्लेन SVG मार्कअप की तरह असेंबल करता है, तो रिज़ल्ट किसी भी ज़ूम या स्क्रीन डेंसिटी पर एकदम शार्प रहता है और आमतौर पर सिर्फ कुछ सौ बाइट्स का होता है, PNG टाइल से कहीं हल्का। CSS कॉपी करके स्टाइलशीट में सीधे रिपीटिंग background-image डाल दें, या स्टैंडअलोन SVG फाइल कॉपी करके इसे असेट की तरह यूज़ करें। जो भी बनाते हैं वो कहीं नहीं भेजा जाता: पैटर्न पूरी तरह आपकी डिवाइस पर ही ड्रॉ होता है, तो पेज लोड होने के बाद ऑफलाइन भी काम करता रहता है।
मुफ्त SVG पैटर्न जेनरेटर
पूरी तरह आपके ब्राउज़र में चलता है - न कुछ अपलोड, न साइन-अप।
पैटर्न
स्टाइल
फोरग्राउंड
बैकग्राउंड
SVG पैटर्न जेनरेटर क्या है?
SVG पैटर्न जेनरेटर डॉट्स, लाइन्स, ग्रिड और ज़िगज़ैग जैसी ज्यॉमेट्रिक शेप्स से एक सीमलेस, रिपीट होने वाला बैकग्राउंड बनाता है। शेप, कलर, टाइल साइज और लाइन थिकनेस आप चुनते हैं, और यह एक छोटा, रिज़ॉल्यूशन-इंडिपेंडेंट SVG और पेस्ट करने लायक CSS दे देता है। सब कुछ ब्राउज़र में ही जेनरेट होता है, तो कुछ भी अपलोड नहीं होता।
कैसे इस्तेमाल करें
- 1पैटर्न चुनें. स्वैच में से एक शेप चुनें - डॉट्स, रिंग्स, ग्रिड, डायगनल, क्रॉसहैच, प्लस, ज़िगज़ैग और भी बहुत कुछ।
- 2कलर और शेप सेट करें. फोरग्राउंड और बैकग्राउंड कलर चुनें (या बैकग्राउंड को ट्रांसपेरेंट बनाएं), फिर साइज, थिकनेस और ओपैसिटी स्लाइडर्स एडजस्ट करें, प्रीव्यू लाइव अपडेट होता रहेगा।
- 3कॉपी या डाउनलोड करें. CSS और SVG टैब के बीच स्विच करें, कोड कॉपी करें, या स्टैंडअलोन .svg फाइल डाउनलोड करके कहीं भी यूज़ करें।
किसके लिए है
- वेब डेवलपर्स जो किसी हीरो, कार्ड या सेक्शन में बिना इमेज फाइल भेजे हल्का बैकग्राउंड टेक्सचर जोड़ना चाहते हैं।
- UI और ब्रांड डिज़ाइनर्स जो ब्रांड कलर में सीमलेस टेक्सचर प्रोटोटाइप करते हैं और उन्हें शार्प SVG असेट की तरह एक्सपोर्ट करते हैं।
- ईमेल और स्लाइड बनाने वाले जिन्हें एक छोटा, टाइल होने वाला पैटर्न चाहिए जो हर स्क्रीन पर शार्प दिखे।
- स्टूडेंट्स और हॉबीइस्ट्स जो वैल्यूज़ बदलकर और आउटपुट पढ़कर सीखते हैं कि SVG
<pattern>और CSS बैकग्राउंड टाइलिंग कैसे काम करती है। - कंटेंट क्रिएटर्स जो थंबनेल, बैनर और मॉकअप के लिए झटपट डेकोरेटिव बैकड्रॉप जेनरेट करते हैं।
अक्सर पूछे जाने वाले सवाल
क्या SVG पैटर्न जेनरेटर फ्री है?
हां, यह पूरी तरह फ्री है, कोई साइन-अप नहीं और कोई लिमिट नहीं। हर पैटर्न ब्राउज़र में ही जेनरेट होता है, तो जितने चाहें उतने बनाएं और कॉपी करें, पेज लोड होने के बाद ऑफलाइन भी।
क्या ये पैटर्न सच में सीमलेस होते हैं?
हां। हर शेप इस तरह ड्रॉ होती है कि उसके एज बगल वाली टाइल से एकदम मैच करें, और पैटर्न एक फिक्स्ड ग्रिड पर रिपीट होता है। CSS background-image और SVG <pattern> एलिमेंट दोनों एक ही सेल को एज-टू-एज टाइल करते हैं, कोई सीम नहीं दिखती।
मुझे CSS यूज़ करना चाहिए या SVG?
स्टाइलशीट में सीधे रिपीटिंग बैकग्राउंड पेस्ट करने के लिए CSS यूज़ करें - वेबसाइट के लिए यही सबसे तेज़ तरीका है। जब स्टैंडअलोन फाइल चाहिए हो, जैसे इमेज असेट की तरह, किसी डिज़ाइन टूल में, या सीधे HTML में एम्बेड करने के लिए, तब SVG डाउनलोड यूज़ करें।
PNG के बजाय SVG पैटर्न क्यों यूज़ करें?
SVG वेक्टर है, तो यह किसी भी ज़ूम लेवल या स्क्रीन डेंसिटी पर एकदम शार्प रहता है और कभी पिक्सलेट नहीं होता। एक ज्यॉमेट्रिक SVG टाइल आमतौर पर सिर्फ कुछ सौ बाइट्स की होती है, बराबर वाले PNG से कहीं छोटी, और बिना दोबारा एक्सपोर्ट किए कभी भी कलर बदल सकते हैं।
क्या मैं बैकग्राउंड ट्रांसपेरेंट बना सकता हूं?
हां। Transparent ऑप्शन टिक करें और बैकग्राउंड फिल हट जाएगा, तो सिर्फ फोरग्राउंड शेप्स दिखेंगी। इससे पैटर्न को किसी मौजूदा कलर, इमेज या ग्रेडिएंट के ऊपर लेयर कर सकते हैं।
क्या मेरा डिज़ाइन कहीं अपलोड होता है?
नहीं। पूरा पैटर्न प्लेन SVG मार्कअप से आपके ब्राउज़र में लोकली बनता है और कुछ भी सर्वर पर नहीं भेजा जाता, तो आपके कलर और सेटिंग्स आपकी डिवाइस पर ही प्राइवेट रहते हैं।