सीढ़ीनुमा

हर अंतराल क्षैतिज रूप से मध्यबिंदु तक जाता है, लंबवत मुड़ता है, फिर आगे बढ़ता है — एक सीढ़ी प्रोफ़ाइल। मोड़ बिंदु पर नहीं, मध्यबिंदु पर होता है, और यही पायदानों को एक-समान रखता है।

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

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

• सिर्फ़ समकोण, इसलिए यह ग्रिड आधारित लेआउट के साथ अच्छा बैठता है।
• कम बिंदु चौड़े और दमदार पायदान देते हैं; ज़्यादा बिंदु दाँतेदार रेखा की ओर बढ़ते हैं।
• 358 बाइट पर यह उन्हीं बिंदुओं से गुज़रने वाली चिकनी लहर जितना ही लेता है।

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

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-288 118.84L-144 118.84L-144 177.26L0 177.26L144 177.26L144 214.27L288 214.27L432 214.27L432 202.99L576 202.99L720 202.99L720 140.25L864 140.25L1008 140.25L1008 117.08L1152 117.08L1296 117.08L1296 171.17L1440 171.17L1440…

और विस्तार से

मध्यबिंदु पर सीढ़ी बनाना ही वह ब्यौरा है जो इसे काम करने लायक़ बनाता है। बिंदु पर ही मुड़ने से हर दूसरा पायदान अपने पड़ोसी से दोगुना चौड़ा हो जाता, जो डिज़ाइन नहीं बल्कि रेंडरिंग की ख़राबी लगता — और यही वह रूप है जो सीधे-सादे क्रियान्वयन से निकलता है।

सवाल

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