गहरी वेव

तीन बिंदु और लगभग पूरा आयाम, जिससे एक गहरी घाटी और उसके नीचे बहुत सारा रंग मिलता है। इसे वहाँ इस्तेमाल कीजिए जहाँ डिवाइडर ख़ुद संक्रमण हो, न कि किसी संक्रमण के किनारे का ब्यौरा।

इसके पीछे की सेटिंग्स

जानने लायक़ बातें

• तीन बिंदु दोहराए जाने वाले पैटर्न के बजाय एक साफ़ गिरावट बनाते हैं।
• ऊँचा आयाम ऊर्ध्वाधर जगह खाता है, इसलिए नीचे वाले सेक्शन को साँस लेने की जगह दीजिए।
• बीज 820 से दोबारा बनाई जा सकती है — किसी दूसरे पेज पर वही वक्र चाहिए तो इसे लिख लीजिए।

बाइट में इसकी क़ीमत

यही आकृति SVG के रूप में 282 बाइट की है और CSS बैकग्राउंड के रूप में 443 बाइट की — data URI बड़ा इसलिए है कि प्रतिशत-एन्कोडिंग हर बचाए गए अक्षर के बदले तीन अक्षर लेती है। दोनों आँकड़े ऊपर दिखाई गई आकृति के हैं, निर्देशांकों में दो दशमलव की परिशुद्धता के साथ।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-480 80.61C-392 97.56,-176 145.02,0 173.07C176 201.12,304 252.99,480 233.6C656 214.21,784 82.6,960 67.28C1136 51.96,1352 134.87,1440 150.04L1440 320L-480 320Z" fill="#4f46e5"/></svg>

और विस्तार से

गहरी वेव को बिगाड़ना सबसे आसान है, क्योंकि पूरे आयाम पर वक्र को बहुत दूर तक झुकना पड़ता है और जहाँ वह किनारे से मिलता है वहाँ का चपटापन तुरंत दिख जाता है। जनरेटर कैनवस के हर किनारे से आगे एक बिंदु लेता है और viewBox को उसे काटने देता है, इसलिए गति सीमा पर ख़त्म होने के बजाय स्क्रीन के बाहर जारी रहती है — और यही इसे अपने भीतर बंद किसी लकीर के बजाय एक लंबी वेव के हिस्से जैसा पढ़ाता है।

सवाल

इस पेज का हर आँकड़ा और हर आकृति बिल्ड के समय जनरेटर चलाकर बनाई गई है, इसलिए यह उसी उपकरण का वर्णन करता है जिसे आप अभी इस्तेमाल करने वाले हैं, न कि उसके किसी पुराने रूप का।