आधुनिक वेबसाइट लेआउट के लिए यादृच्छिक, चिकने और तरल बॉर्डर-रेडियस ब्लॉब आकार बनाएं और SVG/CSS कोड कॉपी करें।
आधुनिक वेब डिज़ाइन, लैंडिंग पेजों और डिजिटल उत्पाद इंटरफेस में कठोर आयताकार बक्सों और सपाट सीमाओं के बजाय चिकने, तरल और कार्बनिक आकार (Organic Fluid Blobs) एक जीवंत, मैत्रीपूर्ण और आधुनिक सौंदर्यशास्त्र प्रदान करते हैं। सीएसएस के उन्नत 8-मूल्य वाले border-radius विनिर्देश का उपयोग करके या गणितीय बेज़ियर वक्रों (SVG Cubic Bezier Paths) द्वारा इन आकृतियों को कोड किया जाता है। मैन्युअल रूप से सीएसएस रेडियस मानों का अनुमान लगाना लगभग असंभव है। यह टूल इंटरैक्टिव यादृच्छिकता और जटिलता स्लाइडर्स के साथ सीधे रेडी-टू-यूज़ सीएसएस और एसवीजी कोड उत्पन्न करता है।
एक वास्तविक यूआई डिज़ाइन परिदृश्य देखें: एक वेब डिज़ाइनर एक नए SaaS लैंडिंग पेज के हीरो सेक्शन में एक ग्राहक प्रशंसापत्र अवतार के पीछे एक सुंदर पेस्टल रंग का फ्लूइड बैकग्राउंड आकार जोड़ना चाहता है। वह टूल में जटिलता (Complexity) 6 और यादृच्छिकता (Randomness) 75% पर सेट करता है। ब्लॉब जेनरेटर तुरंत एक गतिशील कार्बनिक वक्र की गणना करता है और उसका सीएसएस कोड प्रदर्शित करता है: border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%। डिज़ाइनर अपनी पसंद का ग्रेडिएंट रंग (वायलेट से कोरल) चुनता है। वह 'Copy CSS' दबाता है और इसे अपने स्टाइलशीट में पेस्ट करता है। मात्र 30 सेकंड में, वेबसाइट को बिना किसी भारी बाहरी छवि फ़ाइल के एक आधुनिक, हल्का और पूरी तरह से स्केलेबल कार्बनिक डिज़ाइन तत्व मिल जाता है।
सभी ब्लॉब गणनाएं, बेज़ियर वक्र और कोड जेनरेशन सीधे आपके वेब ब्राउज़र के भीतर स्थानीय रूप से निष्पादित होते हैं। कोई भी डिज़ाइन डेटा किसी बाहरी सर्वर पर अपलोड नहीं किया जाता है, जिससे त्वरित और निजी परिणाम मिलते हैं।
Border-Radius: a% (100-a)% b% (100-b)% / c% d% (100-d)% (100-c)%
आठ अलग-अलग प्रतिशत मानों के माध्यम से प्रत्येक कोने के क्षैतिज और ऊर्ध्वाधर त्रिज्या वक्रों को नियंत्रित किया जाता है; एसवीजी मोड में घूर्णन घन बेज़ियर स्प्लिन उत्पन्न किए जाते हैं।
border-radius का उपयोग करें क्योंकि यह शून्य नेटवर्क पेलोड लेता है और जीपीयू पर तेज़ी से रेंडर होता है।@keyframes के माध्यम से उनके बीच एक सहज मॉर्फिंग एनीमेशन बनाएं।border-radius में स्लैश (/) का क्या अर्थ है?