हीरो बैकग्राउंड पैटर्न जनरेटर

यह कैसे काम करता है

यह टूल एक SVG पैटर्न बनाता है, जिसमें <pattern> एलिमेंट पूरी सतह पर अपने आप दोहराया जाता है: आप सिर्फ़ पैटर्न की एक सेल (क्रॉस, गोला, शेवरॉन…) बनाते हैं, और ढके जाने वाले क्षेत्र का अंतिम आकार चाहे जो भी हो, SVG उसे बिना किसी दिखाई देने वाले जोड़ के दोहरा देता है।

इस पैटर्न को इमेज फ़ाइल के बिना सीधे अपनी साइट में कैसे जोड़ूँ?

बनाया गया SVG कोड कॉपी करके सीधे अपने HTML में पेस्ट करें, या उसे data-URI में एन्कोड करके CSS के background-image के रूप में इस्तेमाल करें: पैटर्न हर स्क्रीन रिज़ॉल्यूशन पर साफ़ रहता है और अलग इमेज लोड करने के लिए किसी अतिरिक्त नेटवर्क रिक्वेस्ट की ज़रूरत नहीं पड़ती।

हीरो सेक्शन का आकार बदलने पर क्या पैटर्न अपने आप एडजस्ट हो जाता है?

अगर आप SVG को background-repeat: repeat के साथ background-image के रूप में इस्तेमाल करते हैं, तो पैटर्न पेज पर सेक्शन के वास्तविक आकार की परवाह किए बिना उसकी पूरी चौड़ाई को ढकने के लिए अपने आप दोहराया जाता है, फ़ाइल को दोबारा बनाने की कोई ज़रूरत नहीं।

100% लोकल जनरेशन: SVG पैटर्न पूरी तरह आपके ब्राउज़र में तैयार होता है, कोई भी डेटा किसी सर्वर पर नहीं भेजा जाता।