SVG लहर जेनरेटर

यह कैसे काम करता है

लहर लगातार जुड़ने वाले क्यूबिक बेज़ियर वक्रों से बनती है, जिसमें हर "उभार" बेसलाइन के ऊपर और नीचे बारी-बारी से आता है, ताकि रेखा बिना किसी कोने के चिकनी रहे। उभारों की संख्या (आवृत्ति) और उनकी ऊँचाई (आयाम) अलग-अलग सेट की जा सकती है, साथ ही भरने का रंग भी।

इस लहर को दो सेक्शन के बीच विभाजक के रूप में कैसे इस्तेमाल करूँ?

SVG कोड कॉपी करें और उसे किसी रंगीन सेक्शन के नीचे (या ऊपर, "पलटें" विकल्प के साथ) एब्सोल्यूट पोज़िशन में 100% चौड़ाई के साथ रखें: लहर उस सेक्शन और अगले सेक्शन के बीच का संक्रमण ढक देगी, और अदृश्य जोड़ के लिए अगले सेक्शन का बैकग्राउंड रंग SVG के भरने के रंग से मेल खाना चाहिए।

क्या तय की गई चौड़ाई मेरे पेज की चौड़ाई से ठीक मेल खानी चाहिए?

नहीं: preserveAspectRatio="none" एट्रिब्यूट और CSS में प्रतिशत चौड़ाई की बदौलत SVG खिंचकर कंटेनर की पूरी उपलब्ध चौड़ाई घेर लेता है, भले ही उसकी मूल चौड़ाई आपके पेज की चौड़ाई से ठीक मेल न खाती हो।

100% लोकल जेनरेशन: वक्र पूरी तरह आपके ब्राउज़र में गणना किया जाता है, कोई डेटा सर्वर को नहीं भेजा जाता।