फ़ुटर वेव
मुफ़्त, बिना साइन-अप, आपके ब्राउज़र में चलता है।
हीरो डिवाइडर जैसी ही ज्यामिति, लंबवत पलटी हुई ताकि भराव वक्र के नीचे नहीं, ऊपर रहे। यही एक अंतर फ़ुटर के ऊपर बैठने वाली आकृति को हेडर के नीचे बैठने वाली आकृति से अलग करता है।
इसके पीछे की सेटिंग्स
| जनरेटर | वेव |
|---|---|
| बिंदु | 4 |
| आयाम | 55% |
| यादृच्छिकता | 20% |
| आधार रेखा | 48% |
| परतें | 2 |
| चिकनाहट | 100% |
| बीज | 640 |
जानने लायक़ बातें
- लंबवत पलटी हुई, इसलिए ठोस हिस्सा कैनवस के ऊपरी किनारे से बंद होता है।
- दो परतें तीन के वज़न के बिना थोड़ी गहराई देती हैं।
- इसे सीधे अपने फ़ुटर के ऊपर रखिए, फ़ुटर के ही पृष्ठभूमि रंग के साथ।
बाइट में इसकी क़ीमत
यही आकृति SVG के रूप में 551 बाइट की है और CSS बैकग्राउंड के रूप में 718 बाइट की — data URI बड़ा इसलिए है कि प्रतिशत-एन्कोडिंग हर बचाए गए अक्षर के बदले तीन अक्षर लेती है। दोनों आँकड़े ऊपर दिखाई गई आकृति के हैं, निर्देशांकों में दो दशमलव की परिशुद्धता के साथ।
| प्रारूप | आकार |
|---|---|
| SVG | 551 B |
| CSS बैकग्राउंड | 718 B |
| CSS clip-path | 510 B |
फ़ुटर वेव के 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="…और विस्तार से
यहाँ लंबवत पलटना CSS ट्रांसफ़ॉर्म नहीं, पथ का हिस्सा है: वक्र प्रतिबिंबित होता है और पूँछ उल्टे किनारे से बंद होती है। इसका मतलब है कि निर्यात किया गया SVG अपने दम पर खड़ा रहता है और उसे `transform` वाले किसी रैपर की ज़रूरत नहीं — और यह सबसे ज़्यादा CSS बैकग्राउंड निर्यात में मायने रखता है, जहाँ ट्रांसफ़ॉर्म करने को कोई एलिमेंट होता ही नहीं।
सवाल
फ़ुटर वेव मिल जाने के बाद मैं इसे कैसे बदलूँ?
जनरेटर खोलिए, प्रीसेट पंक्ति में फ़ुटर वेव पर क्लिक कीजिए, फिर जो चाहें खिसकाइए। प्रीसेट शुरुआत का बिंदु है, ताला नहीं — हर स्लाइडर चालू रहता है, और बीज वाला ख़ाना शब्द भी लेता है, अगर आप अपनी आकृति को संख्या देने के बजाय नाम देना चाहें।
क्या अगली बार भी यही दिखेगी?
हाँ, जब तक बीज वही है। यह बीज 640 है, 4 बिंदुओं के साथ। जनरेटर निर्धारणात्मक है, इसलिए ये सेटिंग्स किसी भी डिवाइस पर बिलकुल यही वक्र दोबारा बनाती हैं।
क्या मैं दूसरा रंग इस्तेमाल कर सकता हूँ?
हाँ — रंग निर्यात के समय लगता है, ज्यामिति में पक्का नहीं होता। ऊपर का पूर्वावलोकन उपकरण के डिफ़ॉल्ट रंग का है; जनरेटर में अपना चुन लीजिए और SVG, CSS बैकग्राउंड और clip-path तीनों उसी के साथ चलेंगे।
इस पेज का हर आँकड़ा और हर आकृति बिल्ड के समय जनरेटर चलाकर बनाई गई है, इसलिए यह उसी उपकरण का वर्णन करता है जिसे आप अभी इस्तेमाल करने वाले हैं, न कि उसके किसी पुराने रूप का।