डिज़ाइन / SVG

सेक्शन डिवाइडर के लिए SVG वेव जनरेटर

दो पेज सेक्शन के बीच के किनारे के लिए चिकनी, परतदार SVG वेव बनाएं: परतों और वेव की संख्या, ऊंचाई, चिकनाई और रंग चुनें, फिर SVG डाउनलोड करें या उसे CSS बैकग्राउंड के रूप में कॉपी करें।

सेक्शन डिवाइडर के लिए SVG वेव जनरेटर: हर परत बिंदुओं की एक पंक्ति होती है, जिसमें बिंदु आधार रेखा के ऊपर और नीचे रैंडम दूरी पर बारी-बारी से होते हैं। ये बिंदु एक चिकनी वक्र से जुड़े होते हैं और नीचे के किनारे तक भरे जाते हैं। पीछे की परतों का रंग हल्का होता है, जिससे गहराई का प्रभाव दिखता है। SVG किसी भी चौड़ाई के अनुसार फैल जाता है, और CSS संस्करण इसे data URI बैकग्राउंड के रूप में एम्बेड करता है। यह आपके ब्राउज़र में 100% स्थानीय रूप से चलता है और सर्वर पर कोई फ़ाइल अपलोड नहीं होती।

रन
आपके ब्राउज़र में
लागत
मुफ़्त · साइन अप की ज़रूरत नहीं
उपलब्धता
इस्तेमाल के लिए तैयार
SVG लहर जनरेटरलोकल प्रोसेसिंग

पूरी तरह आपके ब्राउज़र में चलता है

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240" preserveAspectRatio="none"><g fill="#479d1d"><path d="M0,121.9 C34.3,111.7 137.1,60.8 205.7,60.2 C274.3,59.7 342.9,118.4 411.4,118.5 C480,118.5 548.6,61.3 617.1,60.8 C685.7,60.3 754.3,115.5 822.9,115.6 C891.4,115.7 960,61.8 1028.6,61.2 C1097.1,60.7 1165.7,110.4 1234.3,112.2 C1302.9,114 1405.7,78.8 1440,72.2 L1440,240 L0,240 Z" fill-opacity="0.57"/><path d="M0,144.3 C34.3,135.4 137.1,89.7 205.7,90.4 C274.3,91.1 342.9,148.9 411.4,148.6 C480,148.2 548.6,89 617.1,88.4 C685.7,87.7 754.3,142.2 822.9,144.7 C891.4,147.3 960,103.8 1028.6,103.7 C1097.1,103.7 1165.7,145.8 1234.3,144.5 C1302.9,143.3 1405.7,104.1 1440,96.1 L1440,240 L0,240 Z" fill-opacity="0.78"/><path d="M0,184.4 C34.3,175.7 137.1,135.5 205.7,132.1 C274.3,128.8 342.9,166 411.4,164.5 C480,163 548.6,119.4 617.1,123 C685.7,126.6 754.3,187.2 822.9,186 C891.4,184.8 960,118.6 1028.6,116 C1097.1,113.4 1165.7,170.5 1234.3,170.5 C1302.9,170.6 1405.7,125.3 1440,116.2 L1440,240 L0,240 Z"/></g></svg>

CSS

.wave {
  height: 240px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='%23479d1d'%3E%3Cpath d='M0%2C121.9 C34.3%2C111.7 137.1%2C60.8 205.7%2C60.2 C274.3%2C59.7 342.9%2C118.4 411.4%2C118.5 C480%2C118.5 548.6%2C61.3 617.1%2C60.8 C685.7%2C60.3 754.3%2C115.5 822.9%2C115.6 C891.4%2C115.7 960%2C61.8 1028.6%2C61.2 C1097.1%2C60.7 1165.7%2C110.4 1234.3%2C112.2 C1302.9%2C114 1405.7%2C78.8 1440%2C72.2 L1440%2C240 L0%2C240 Z' fill-opacity='0.57'/%3E%3Cpath d='M0%2C144.3 C34.3%2C135.4 137.1%2C89.7 205.7%2C90.4 C274.3%2C91.1 342.9%2C148.9 411.4%2C148.6 C480%2C148.2 548.6%2C89 617.1%2C88.4 C685.7%2C87.7 754.3%2C142.2 822.9%2C144.7 C891.4%2C147.3 960%2C103.8 1028.6%2C103.7 C1097.1%2C103.7 1165.7%2C145.8 1234.3%2C144.5 C1302.9%2C143.3 1405.7%2C104.1 1440%2C96.1 L1440%2C240 L0%2C240 Z' fill-opacity='0.78'/%3E%3Cpath d='M0%2C184.4 C34.3%2C175.7 137.1%2C135.5 205.7%2C132.1 C274.3%2C128.8 342.9%2C166 411.4%2C164.5 C480%2C163 548.6%2C119.4 617.1%2C123 C685.7%2C126.6 754.3%2C187.2 822.9%2C186 C891.4%2C184.8 960%2C118.6 1028.6%2C116 C1097.1%2C113.4 1165.7%2C170.5 1234.3%2C170.5 C1302.9%2C170.6 1405.7%2C125.3 1440%2C116.2 L1440%2C240 L0%2C240 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

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

SVG या CSS?

Inline SVG को CSS से style और animate किया जा सकता है, और इसका fill currentColor का इस्तेमाल कर सकता है। CSS background के रूप में SVG एक data URI होता है: लोड करने के लिए कुछ अतिरिक्त नहीं, लेकिन code में colour तय रहता है। दोनों ही मामलों में फ़ाइल कुछ सौ bytes की होती है; SVG क्लीनर से इसे और व्यवस्थित किया जा सकता है।

स्मूदनेस

यह curve एक Catmull-Rom spline है, जिसे cubic Bézier segments में बदला गया है: full smoothness पर यह हर point से होकर धीरे-धीरे मुड़ती है, और zero पर points के बीच सीधी lines बन जाती हैं, जिससे दाँतेदार पहाड़ी किनारा दिखाई देता है।

इस्तेमाल करने का तरीका

  1. परतों, वेव की संख्या और उनकी ऊंचाई सेट करें।
  2. रंग चुनें और सेक्शन के ऊपर लगाने के लिए वेव को पलटें।
  3. नई रैंडम वेव के लिए क्लिक करें, फिर SVG डाउनलोड करें या CSS कॉपी करें।

गोपनीयता और सीमाएँ

वेव आपके ब्राउज़र में बनाई जाती हैं।

संबंधित टूल्स

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

दो सेक्शन के बीच इसका इस्तेमाल कैसे करूं?

वेव का रंग नीचे वाले सेक्शन के रंग जैसा रखें और उसे ऊपर वाले सेक्शन के निचले किनारे पर पूरी चौड़ाई में लगाएं; इसके बजाय किसी सेक्शन के ऊपर लगाने के लिए उसे पलट दें।

क्या एक जैसी सेटिंग्स से वही वेव बनेगी?

हां: आकार एक रैंडम seed से बनता है, इसलिए नई वेव के लिए क्लिक करने पर ही बदलता है।

क्या मैं इन वेव का व्यावसायिक इस्तेमाल कर सकता हूं?

हां: आकार आपके लिए बनाए जाते हैं और इन पर लाइसेंस संबंधी कोई पाबंदी नहीं है।

मुफ़्त टूल · आपके ब्राउज़र में बार चलता है · अकाउंट की ज़रूरत नहीं