SVG वेव जेनरेटर

लेयर, एम्प्लिट्यूड और सीड के साथ स्मूद, पीक्ड या स्टेप्ड SVG वेव बनाएं। .svg डाउनलोड करें या सेक्शन डिवाइडर के लिए CSS background data URI कॉपी करें।

वेव सेटिंग्स

रंग

वेव स्टाइल

स्थिति

जटिलता (सेगमेंट)

आयाम%

लेयर

अपारदर्शिता

चौड़ाईpx

ऊँचाईpx

सीड

एक जैसी सेटिंग्स और सीड से हमेशा एक जैसी आकृति बनती है।

प्रीव्यू

SVG कोड

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z"/></svg>

CSS बैकग्राउंड (data URI)

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%230099ff' fill-opacity='1' d='M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z'/%3E%3C/svg%3E");

SVG वेव जेनरेटर क्या है?

यह सेक्शन डिवाइडर और बैकग्राउंड के लिए SVG के रूप में वेव आकार बनाता है। स्मूद कर्व, तीखे पीक या स्टेप चुनें, पाँच तक लेयर रखें, वेव को ऊपर पलटें, और .svg फ़ाइल या सीधे चिपकाने लायक CSS background-image data URI के रूप में एक्सपोर्ट करें।

SVG वेव जेनरेटर का उपयोग कैसे करें

Color और Wave style (Smooth, Peaks, Steps) तथा Position (Bottom या Top) चुनें।
Complexity, Amplitude, Layers, Opacity, Width और Height एडजस्ट करें।
अलग पर दोहराई जा सकने वाली वेव के लिए Randomize क्लिक करें या Seed लिखें।
Download .svg करें या SVG कोड कॉपी करें।
या अलग फ़ाइल के बिना वेव इस्तेमाल करने के लिए CSS background (data URI) कॉपी करें।

उदाहरण

इनपुट

Complexity 2, amplitude 0, 1440×320, color #0099ff

आउटपुट

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,160C120,160 480,160 720,160C960,160 1320,160 1440,160L1440,320L0,320Z"/></svg>

एम्प्लिट्यूड 0 सपाट रेखा देता है, जिससे Bézier की सटीक बनावट दिखती है।

SVG वेव जेनरेटर का उपयोग कब करें

इसे लहरदार सेक्शन डिवाइडर, फ़ुटर और हीरो बैकग्राउंड के लिए इस्तेमाल करें। preserveAspectRatio="none" वेव को किसी भी चौड़ाई तक खींच देता है, जो पूरी चौड़ाई के डिवाइडर के लिए ठीक है; जिन इलस्ट्रेशन में अनुपात बना रहना चाहिए उनके लिए SVG को वेक्टर एडिटर में एडिट करें।

SVG वेव जेनरेटर कैसे काम करता है

चौड़ाई को बराबर खंडों में बाँटा जाता है; हर पॉइंट की ऊँचाई बेसलाइन के साथ एम्प्लिट्यूड से स्केल किया हुआ सीडेड pseudo-random ऑफ़सेट (mulberry32) है। स्मूद वेव पॉइंट से Catmull-Rom स्प्लाइन गुज़ारती हैं, जिसे cubic Bézier C कमांड में बदला जाता है; पीक सीधी रेखाएँ और स्टेप क्षैतिज/ऊर्ध्वाधर रेखाएँ इस्तेमाल करते हैं। पाथ नीचे (या ऊपर) के किनारे तक बंद किया जाता है। कई लेयर अलग बेसलाइन और सीड इस्तेमाल करती हैं, और ओपेसिटी आगे की ओर बढ़ती है। data URI SVG को पठनीय रखता है और सिर्फ़ असुरक्षित अक्षरों को percent-encode करता है।

सामान्य उपयोग मामले

लैंडिंग पेज सेक्शन के बीच लहरदार डिवाइडर
लेयर्ड फ़ुटर बैकग्राउंड
हीरो सेक्शन के निचले किनारे
CSS data URI से बैकग्राउंड इमेज
डिज़ाइन सिस्टम में दोहराए जा सकने वाले सजावटी आकार

अक्सर पूछे जाने वाले प्रश्न

क्या मुझे वही वेव दोबारा मिलेगी?

हाँ। वही सेटिंग और Seed हमेशा एक जैसा SVG मार्कअप बनाते हैं।

इनलाइन SVG या data URI?

इनलाइन SVG को CSS से स्टाइल और एनिमेट किया जा सकता है; background-image में data URI आपका HTML साफ़ रखता है, पर एन्कोड होने के बाद उसे दोबारा स्टाइल नहीं किया जा सकता।