बिना किसी SVG के ब्लॉब

जब आपको ऑर्गैनिक आकृति चाहिए पर आप SVG जोड़ नहीं सकते — या जोड़ना नहीं चाहते: ऐसी कंपोनेंट लाइब्रेरी जिसका मार्कअप आपके हाथ में नहीं, कोई ईमेल टेम्पलेट, या ऐसा CMS ब्लॉक जो अनजान एलिमेंट हटा देता है।

नुस्ख़ा

क़दम दर क़दम

• ब्लॉब जनरेटर पर जाइए और कंकड़ चुनिए।
• निर्यात पंक्ति से CSS border-radius चुनिए।
• घोषणा को ऐसे किसी भी एलिमेंट पर कॉपी कीजिए जिसकी पहले से चौड़ाई और ऊँचाई हो।
• यादृच्छिकता बदलते हुए दोबारा कॉपी करते रहिए जब तक छाया-आकृति न जँचे — काम करने को सिर्फ़ चार कोने हैं।

.blob {
  width: 320px;
  height: 320px;
  border-radius: 46% 52.2% 40.5% 40% / 49.8% 56.1% 39.1% 45%;
}

और विस्तार से

जान लीजिए कि आप क्या छोड़ रहे हैं। border-radius ब्लॉब के चार कोने होते हैं, हर एक दीर्घवृत्तीय चौथाई चाप, इसलिए वह बिगड़े हुए गोल आयत से ज़्यादा कुछ हो ही नहीं सकता — संख्याएँ चाहे जैसे चुनी जाएँ, उसमें छह उभार नहीं हो सकते। बदले में जो मिलता है वह असली है: एक गुण, कोई अतिरिक्त मार्कअप नहीं, और वह सहजता से ट्रांज़िशन और एनिमेट करता है, जो SVG पथ कहीं ज़्यादा मेहनत के बिना नहीं करता।

सवाल

इस पेज का हर आँकड़ा और हर आकृति बिल्ड के समय जनरेटर चलाकर बनाई गई है, इसलिए यह उसी उपकरण का वर्णन करता है जिसे आप अभी इस्तेमाल करने वाले हैं, न कि उसके किसी पुराने रूप का।