CSS और SVG वेव व ब्लॉब जनरेटर
कुछ स्लाइडर खिसकाइए, एक आकृति पाइए, कोड कॉपी कर लीजिए। सेक्शन डिवाइडर के लिए वेव, बैकग्राउंड और मास्क के लिए ब्लॉब — SVG, CSS बैकग्राउंड, clip-path या एक अकेले border-radius के रूप में निर्यात। कुछ भी अपलोड नहीं होता और कुछ भी सर्वर पर नहीं बनता: वक्र इसी पेज में गिने जाते हैं, इसीलिए यह तुरंत काम करता है और इसीलिए बिना कनेक्शन के भी चलता रहता है।
शैली
आकृति
समायोजित करें
आउटपुट
इसे सीधे अपने प्रोजेक्ट में पेस्ट कीजिए। SVG में न कोई पहचान चिह्न है, न जनरेटर की टिप्पणी, न यहाँ वापस आने का कोई लिंक।
इन वक्रों में कोई मोड़ क्यों नहीं है
इस तरह के ज़्यादातर जनरेटर बेज़ियर नियंत्रण-बिंदु अंदाज़े से रखते हैं — आमतौर पर अगले बिंदु तक के रास्ते का एक तिहाई — और नतीजे में हर नमूना-बिंदु पर एक छोटा-सा मोड़ रह जाता है। थंबनेल में वह दिखता नहीं, और जब आकृति किसी हीरो इमेज के पीछे तीन मीटर चौड़ी हो तो उसे अनदेखा करना नामुमकिन है। यह जनरेटर हर नियंत्रण-बिंदु को Catmull-Rom स्प्लाइन की स्पर्शरेखा से निकालता है, इसलिए किसी बिंदु पर मिलने वाले दोनों वक्र-खंड उन्हीं दो पड़ोसियों से *एक ही* दिशा गिनते हैं। चिकनाहट यहाँ कोई सेटिंग नहीं है, न ही बाद में जाँची जाने वाली चीज़: यह गणित का परिणाम है, और परीक्षण-समूह हज़ारों बनी आकृतियों के हर जोड़ पर इसकी पुष्टि करता है।
जो CSS आप कॉपी करते हैं वही आकृति है जो आपने देखी
जनरेटर के पूर्वावलोकन और उसके दिए गए CSS के बीच आमतौर पर दो चीज़ें टूटती हैं। पहली है हेक्स रंग का हैश: data URI के भीतर बिना एन्कोड किया `#` URL को वहीं ख़त्म कर देता है, ब्राउज़र बाक़ी हिस्से को फ़्रैगमेंट मान लेता है, और पृष्ठभूमि चुपचाप बनती ही नहीं — न कंसोल में त्रुटि, न नेटवर्क पैनल में कुछ। यहाँ हर रंग स्टाइलशीट तक पहुँचने से पहले प्रतिशत-एन्कोड हो जाता है। दूसरी सिर्फ़ border-radius वाले ब्लॉब पर लागू होती है: अगर किसी किनारे पर मिलने वाली दो त्रिज्याएँ मिलकर 100% से ज़्यादा हो जाएँ, तो ब्राउज़र भरपाई के लिए *हर* कोने को छोटा कर देता है, और वह जो आकृति बनाता है वह आपकी चुनी हुई से चपटी होती है। यह उपकरण जो मान देता है वे उसी सीमा के भीतर बनते हैं, इसलिए ब्राउज़र उन्हें छेड़ता नहीं।
बाइट, छिपाने के बजाय दिखाए गए
स्टाइलशीट में चिपकाई गई आकृति हर पेज लोड पर वज़न है, इसलिए बाइट की गिनती आउटपुट बॉक्स के नीचे रहती है और आपके स्लाइडर खिसकाते ही बदलती है। निर्देशांक दो दशमलव तक गोल किए जाते हैं — 1440 इकाई के कैनवस पर एक पिक्सेल का सौवाँ हिस्सा, जो किसी भी स्क्रीन के दिखा पाने से कहीं नीचे है — और इससे आमतौर पर पथ की लंबाई का एक तिहाई या उससे ज़्यादा बिना किसी दिखने वाले बदलाव के हट जाता है। अगर संख्या बड़ी लगे तो कम बिंदु लगभग हमेशा हल है: आकार को उल्लेखनीय रूप से बदलने वाला वही अकेला स्लाइडर है।
न खाता, न अपलोड, न वॉटरमार्क
कुछ भी भेजने के लिए कोई सर्वर है ही नहीं। जनरेटर इसी पेज में चलने वाला कुछ किलोबाइट JavaScript है, आपकी सेटिंग्स इस ब्राउज़र के लोकल स्टोरेज में रहती हैं, और आप जो आकृतियाँ बनाते हैं वे बिना श्रेय दिए आपकी हैं। पेज एक बार लोड हो जाए तो यह बिना कनेक्शन के चलता है, जिसका मतलब यह भी है कि आधा इंटरनेट रोक देने वाले कॉर्पोरेट प्रॉक्सी के पीछे भी चलता है।
सवाल
क्या यह मुफ़्त है?
हाँ — बिना खाते, बिना वॉटरमार्क, बिना दैनिक सीमा और बिना श्रेय दिए। आप जो आकृतियाँ बनाते हैं वे आपकी हैं और व्यावसायिक रूप से इस्तेमाल की जा सकती हैं।
क्या कुछ अपलोड होता है?
नहीं। कोई सर्वर है ही नहीं। वक्र आपके ब्राउज़र में गिने जाते हैं और आपकी सेटिंग्स इसी ब्राउज़र के लोकल स्टोरेज में रहती हैं। आप काम करते हुए नेटवर्क पैनल देखते रहिए, वह ख़ाली ही रहेगा।
बीज किस काम आता है?
यह किसी आकृति को दोबारा पाने लायक़ बनाता है। वही बीज और वही सेटिंग्स हमेशा बिलकुल वही वक्र देती हैं, इसलिए आप उसे लिख सकते हैं, किसी सहकर्मी को भेज सकते हैं, या अगले महीने लौटकर नई क़िस्मत आज़माने के बजाय वही आकृति पा सकते हैं। यह संख्या जितनी आसानी से शब्द भी स्वीकार करता है।
मेरा CSS बैकग्राउंड दिखता क्यों नहीं?
लगभग हमेशा हेक्स रंग का बिना एन्कोड किया हैश, जो पहले `#` पर ही data URI काट देता है। यहाँ का आउटपुट पहले से एन्कोडेड है, इसलिए अपने रंग के साथ उसे हाथ से दोबारा बनाने के बजाय पूरी घोषणा कॉपी कीजिए।
क्या मैं इन्हें व्यावसायिक प्रोजेक्ट में इस्तेमाल कर सकता हूँ?
हाँ। बना हुआ वक्र निर्देशांकों की एक सूची है, लाइसेंस वाली रचनात्मक कृति नहीं, और यहाँ कोई भी आपके बनाए पर कोई अधिकार नहीं जताता।
क्या यह ऑफ़लाइन चलता है?
पेज एक बार लोड हो जाए तो हाँ। न कोई तस्वीर लानी है और न किसी सर्वर से पूछना है, इसलिए कनेक्शन बंद होने पर भी यह आकृतियाँ बनाता रहता है।