फ़ुटर के ऊपर वेव

हीरो डिवाइडर जैसा ही विचार, उल्टा। वक्र फ़ुटर का ऊपरी किनारा है, इसलिए भराव उसके ऊपर रहता है और ख़ुद फ़ुटर के रंग से बंद होता है।

नुस्ख़ा

क़दम दर क़दम

• फ़ुटर वेव चुनिए — यह इसी के लिए पहले से लंबवत पलटी हुई है।
• भराव को अपने फ़ुटर के पृष्ठभूमि रंग पर सेट कीजिए।
• SVG कॉपी कीजिए और उसे फ़ुटर एलिमेंट के ठीक ऊपर रखिए।
• आकृति और फ़ुटर के बीच का कोई भी मार्जिन हटा दीजिए, वरना पेज की पृष्ठभूमि की एक पतली धारी दिखेगी।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 207.13C-300 198.98,-120 174.18,0 158.27C120 142.36,240 112.09,360 111.66C480 111.23,600 137.74,720 155.71C840 173.68,960 218.07,1080 219.5C1200 220.93,1380 173.48,1440 164.28L1440 0L-360 0Z" fill="#a5b4fc" opacity="0.35"/><path d="M-360 116.33C-300 112.14,-120 88.78,0 91.21C120 93.64,240 120.61,360 130.91C480 141.…

और विस्तार से

CSS के `transform: scaleY(-1)` के बजाय लंबवत पलटाव इस्तेमाल कीजिए। पलटाव पथ में ही पक्का है, इसलिए निर्यात किया गया SVG बिना रैपर और बिना याद रखने लायक़ किसी ट्रांसफ़ॉर्म के अपने दम पर खड़ा रहता है — और यह सबसे ज़्यादा तब मायने रखता है जब आप बाद में इसे CSS बैकग्राउंड निर्यात में बदलें, जहाँ ट्रांसफ़ॉर्म करने को कोई एलिमेंट होता ही नहीं।

सवाल

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