SVG ब्लॉब जेनरेटर

Q: ब्लॉब को इमेज मास्क के रूप में कैसे इस्तेमाल करूं?

पाथ को SVG ` ` के अंदर रखें या डाउनलोड किए SVG को CSS `mask-image` के साथ इस्तेमाल करें।

एडजस्टेबल पॉइंट, रैंडमनेस और सीड के साथ स्मूद ऑर्गेनिक SVG ब्लॉब आकार बनाएं। सॉलिड, ग्रेडिएंट या आउटलाइन फ़िल, .svg डाउनलोड या CSS data URI कॉपी करें।

ब्लॉब सेटिंग्स

फ़िल

रंग

एंकर पॉइंट

रैंडमनेस%

आकारpx

सीड

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

प्रीव्यू

SVG कोड

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path fill="#8a3ffc" d="M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z"/></svg>

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

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Cpath fill='%238a3ffc' d='M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z'/%3E%3C/svg%3E");

SVG ब्लॉब जेनरेटर क्या है?

यह SVG के रूप में स्मूद, ऑर्गेनिक ब्लॉब आकार बनाता है। एंकर पॉइंट की संख्या, आकार कितना अनियमित हो और उसका साइज़ नियंत्रित करें, सॉलिड, ग्रेडिएंट या आउटलाइन फ़िल चुनें, और .svg फ़ाइल या CSS data URI के रूप में एक्सपोर्ट करें।

SVG ब्लॉब जेनरेटर का उपयोग कैसे करें

Fill (Solid, Gradient या Outline) और रंग चुनें।
Anchor points, Randomness और Size सेट करें।
किसी ख़ास आकार के लिए Randomize क्लिक करें या Seed डालें।
Download .svg करें या SVG कोड कॉपी करें।
या CSS background (data URI) कॉपी करें।

उदाहरण

इनपुट

Points 4, randomness 0, size 100, solid #8a3ffc

आउटपुट

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path fill="#8a3ffc" d="M50,5C65,5 95,35 95,50C95,65 65,95 50,95C35,95 5,65 5,50C5,35 35,5 50,5Z"/></svg>

SVG ब्लॉब जेनरेटर का उपयोग कब करें

ब्लॉब को सजावटी बैकग्राउंड, इमेज मास्क, अवतार फ़्रेम या इलस्ट्रेशन एक्सेंट के रूप में इस्तेमाल करें। randomness 0 पर लगभग वृत्त मिलता है; सटीक ज्यामितीय आकारों के लिए इसके बजाय CSS border-radius या clip-path इस्तेमाल करें।

SVG ब्लॉब जेनरेटर कैसे काम करता है

एंकर पॉइंट एक वृत्त (साइज़ का 45% रेडियस) के चारों ओर बराबर दूरी पर रखे जाते हैं। हर पॉइंट की केंद्र से दूरी सीडेड pseudo-random मात्रा से घटाई जाती है, जो अधिकतम 60% × randomness तक होती है। पॉइंट से गुज़रती बंद Catmull-Rom स्प्लाइन को cubic Bézier कमांड में बदला जाता है, जो बिना मोड़ के स्मूद आउटलाइन की गारंटी देता है। ग्रेडिएंट फ़िल ऊपर-बाएँ से नीचे-दाएँ तक SVG linearGradient इस्तेमाल करते हैं।