परतदार वेव

एक ही बीज से अलग-अलग कलाओं पर खींचे गए तीन वक्र, हर एक थोड़ा नीचे और थोड़ा कम अपारदर्शी। बीज साझा करना ही असल बात है — अलग-अलग बीजों की परतें ऐसी लगती हैं जैसे तीन वेव संयोग से ऊपर-नीचे आ गई हों, जबकि एक ही वेव की कला-पालियाँ गहराई जैसी लगती हैं।

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

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

• अपारदर्शिता आगे की ओर बढ़ती है, इसलिए ढेर तीन चपटी चादरों के बजाय दूरी जैसा पढ़ा जाता है।
• हर परत अलग पथ है, इसलिए पेस्ट करने के बाद आप उन्हें अलग-अलग रंग दे सकते हैं।
• तीनों पथ मिलकर 898 बाइट के हैं — फिर भी उसी चीज़ के छोटे PNG से कम।

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

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-288 95.89C-240 100.43,-96 109.48,0 123.14C96 136.8,192 170.05,288 177.86C384 185.66,480 180.48,576 169.98C672 159.48,768 126.46,864 114.84C960 103.23,1056 95.46,1152 100.31C1248 105.15,1392 136.65,1440 143.92L1440 320L-…

और विस्तार से

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

सवाल

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