SVG / अनुभाग

SVG Shape Divider: सेक्शन के किनारे और लेयर

एम्प्लिट्यूड, फ़्रीक्वेंसी, ऊँचाई, फ़्लिप, इनवर्टेड फ़िल और अधिकतम तीन लेयर के साथ आठ SVG सेक्शन-डिवाइडर शेप बनाएँ। सेक्शन का प्रीव्यू देखें और SVG, CSS व HTML कॉपी करें।

SVG Shape Divider: सेक्शन के किनारे और लेयर: वेव, कर्व, टिल्ट, ट्रायंगल, ऐरो, ज़िगज़ैग, क्लाउड या माउंटेन किनारा चुनें, उसकी ऊँचाई, एम्प्लिट्यूड और रिपीट समायोजित करें, उसे फ़्लिप या इनवर्ट करें और अधिकतम तीन लेयर स्टैक करें। डिवाइडर किसी भी पेज की चौड़ाई के अनुसार फैलता है; SVG, पोज़िशनिंग CSS या तैयार HTML सेक्शन कॉपी करें। यह आपके ब्राउज़र में 100% स्थानीय रूप से चलता है और सर्वर पर कोई फ़ाइल अपलोड नहीं होती।

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

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

सेक्शन प्रीव्यू

दृश्य में बदलाव।

दो सेक्शन के बीच एक आकारयुक्त किनारा।

सेक्शन डिवाइडर
SVG कोड
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg>
CSS पोज़िशनिंग
.section { position: relative; overflow: hidden; padding-bottom: 160px; }
.section-divider { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; pointer-events: none; }
.section-divider svg { display: block; width: 100%; height: 100%; }
HTML सेक्शन
<section class="section">
  <div class="section-divider" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg></div>
</section>

लगातार किनारे के लिए अगले सेक्शन के बैकग्राउंड रंग का उपयोग करें। Bottom divider को ऊपर ले जाते समय उसे लंबवत रूप से पलटें।

बंद पाथ और निर्देशांक

SVG 2 closepath और cubic path कमांड परिभाषित करता है: https://www.w3.org/TR/SVG2/paths.html . viewBox इन निर्देशांकों को viewport पर मैप करता है: https://www.w3.org/TR/SVG2/coords.html

आकृतियाँ कहाँ से आती हैं

वेव आकृति SVG Wave Generator और SVG Blob Generator जैसी ही सहज वक्र रेखाओं का उपयोग करती है; अन्य प्रोफ़ाइल सरल फ़ॉर्मूलों से बनाई जाती हैं। किसी तृतीय-पक्ष की कलाकृति शामिल नहीं है, इसलिए आउटपुट का उपयोग आप कर सकते हैं।

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

  1. एक शेप चुनें और उसका एम्प्लिट्यूड, फ़्रीक्वेंसी और ऊँचाई समायोजित करें।
  2. लेयर, अपारदर्शिता और रंग सेट करें, फिर सेक्शन का किनारा और कोई भी फ़्लिप चुनें।
  3. SVG, पोज़िशनिंग CSS और सेक्शन HTML कॉपी करें या SVG डाउनलोड करें।

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

शेप बनाना और डाउनलोड करना पूरी तरह आपके ब्राउज़र में चलता है।

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

SVG वेवSVG ब्लॉबCSS पैटर्न

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

मैं किनारे को दूसरे सेक्शन में सहज रूप से कैसे मिला सकता हूँ?

उस सेक्शन के बैकग्राउंड रंग को डिवाइडर के फ़िल के रूप में इस्तेमाल करें। CSS डिवाइडर के लिए जगह रखता है और उसे चुने गए किनारे पर absolute position देता है।

यह वेव टूल से कैसे अलग है?

यह टूल सात अन्य शेप, इनवर्ज़न और सेक्शन HTML जोड़ता है। मौजूदा SVG Wave Generator में रैंडम वेव और वेव से जुड़े अतिरिक्त कंट्रोल मिलते हैं। SVG Blob Generator स्वतंत्र ऑर्गेनिक शेप बनाता है।

इनवर्ट क्या करता है?

इनवर्ट पाथ को नीचे की बजाय ऊपर की ओर बंद करता है। इससे डिवाइडिंग एज अपनी जगह पर बना रहता है। इसके बजाय वर्टिकली फ़्लिप करने पर पूरी शेप प्रतिबिंबित हो जाती है।

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