CSS पैटर्न पृष्ठभूमि जनरेटर

ज़्यादातर "पैटर्न जनरेटर" उपकरण चुपचाप हर विकल्प के लिए वही repeating-linear-gradient फ़ॉर्मूला दोबारा इस्तेमाल करते हैं और सिर्फ़ संख्याएँ बदल देते हैं। यह वाला ऐसा नहीं करता: यहाँ मौजूद हर छह पैटर्न प्रकार उस ख़ास CSS तकनीक से बनाया गया है जो वास्तव में वह आकृति उत्पन्न करती है। धारियाँ दो रंग-पट्टियों वाले एकल repeating-linear-gradient का उपयोग करती हैं। बिंदु पूरी तरह से background-size के ज़रिए टाइल किए गए एक radial-gradient का उपयोग करते हैं — क्लासिक CSS-बिंदु युक्ति — न कि repeating-radial-gradient, जो एक आयताकार ग्रिड पर गोल बिंदु को सफ़ाई से टाइल नहीं कर सकता। चेकरबोर्ड असली चार-चतुर्थांश conic-gradient फ़ॉर्मूले का उपयोग करता है: एक वर्गाकार टाइल में केंद्रित conic gradient स्वाभाविक रूप से 90-डिग्री सीमाओं पर चार चतुर्थांश वर्गों में विभाजित हो जाता है, और उन चतुर्थांशों में दो रंगों को बारी-बारी से लगाने पर एक वास्तविक चेकरबोर्ड में टाइल हो जाता है, न कि कोई सन्निकटन।

ग्रिड और विकर्ण क्रॉसहैच दोनों ही दूसरी दिशा को बॉर्डर ट्रिक से नकली बनाने के बजाय दो repeating-linear-gradient को अलग-अलग background-image प्रविष्टियों के रूप में स्तरित करते हैं। ग्रिड स्पष्ट क्षैतिज और ऊर्ध्वाधर रेखाओं के लिए एक "to right" और एक "to bottom" repeating gradient जोड़ता है। क्रॉसहैच एक टोकरी-बुनाई जैसी विकर्ण बुनावट के लिए एक +45deg और एक -45deg repeating gradient को स्तरित करता है — यहाँ सटीकता बरतना ज़रूरी है: यह एक ईमानदार क्रॉसहैच है, वास्तविक हेरिंगबोन ज्यामिति नहीं, और उपकरण इसे दावा बढ़ा-चढ़ाकर पेश करने के बजाय इसी तरह लेबल करता है। त्रिभुज चेकरबोर्ड की चार-फान वाली conic-gradient तकनीक का पुन: उपयोग करते हैं लेकिन ग्रेडिएंट को 45 डिग्री घुमाकर शुरू करते हैं, जो फानों की सीमाओं को टाइल के किनारे के मध्यबिंदुओं से उसके कोनों पर स्थानांतरित कर देता है और उन्हीं चार फानों को चार चतुर्थांश वर्गों के बजाय चार कोने-से-कोने तक के त्रिभुजों में बदल देता है।

हर पैटर्न प्रकार केवल उन नियंत्रणों को उजागर करता है जो वास्तव में उस पर लागू होते हैं — धारियों के लिए कोण स्लाइडर दिखाई देता है, बिंदुओं के लिए बिंदु त्रिज्या और अंतराल दिखाई देता है, ग्रिड और क्रॉसहैच के लिए रेखा की मोटाई दिखाई देती है — और बड़ा टाइलयुक्त पूर्वावलोकन बक्सा हर परिवर्तन पर पुन: चित्रित होता है ताकि आप किसी मान पर निर्णय लेने से पहले कई पूर्ण पुनरावृत्तियाँ देख सकें। आउटपुट मोड को SVG पर पलटें और वही पैटर्न सादे rect, circle, path या polygon प्रिमिटिव से बने एक <pattern> तत्व के रूप में फिर से प्रकट होता है, जो किसी भी SVG दस्तावेज़ के <defs> के अंदर पेस्ट करने के लिए तैयार है, एक स्टैंडअलोन .svg फ़ाइल के लिए एक-क्लिक डाउनलोड के साथ।

सब कुछ आपके ब्राउज़र में स्थानीय रूप से चलता है: कोई इमेज अपलोड नहीं, कोई सर्वर चक्कर नहीं, कोई खाता नहीं। बिना पुनरावृत्ति के ठोस या ग्रेडिएंट भराव के लिए, इस साइट पर मौजूद CSS ग्रेडिएंट जनरेटर इसके बजाय सही उपकरण है; यह विशेष रूप से शून्य इमेज एसेट से निर्मित टाइल करने योग्य ज्यामितीय पृष्ठभूमियों के लिए है।