कंकड़

मध्यम यादृच्छिकता पर पाँच बिंदु, जिससे आमतौर पर छींटे से ज़्यादा नदी के पत्थर जैसी चीज़ बनती है। जो कुछ भी सजावटी धब्बे के बजाय ठोस वस्तु पढ़ा जाना चाहिए, उसके लिए सबसे उपयोगी ब्लॉब।

इसके पीछे की सेटिंग्स

जानने लायक़ बातें

• पाँच बिंदु विषम संख्या वाली छाया-आकृति देते हैं, जिससे छह की आकस्मिक समरूपता से बचाव होता है।
• मध्यम यादृच्छिकता: अनियमित, पर हर उभार अब भी लगभग एक ही आकार का।
• यहाँ की वह आकृति जो CSS border-radius की नक़ल के सबसे क़रीब है, अगर आप SVG नहीं भेजना चाहते।

बाइट में इसकी क़ीमत

यही आकृति SVG के रूप में 294 बाइट की है और CSS बैकग्राउंड के रूप में 455 बाइट की — data URI बड़ा इसलिए है कि प्रतिशत-एन्कोडिंग हर बचाए गए अक्षर के बदले तीन अक्षर लेती है। दोनों आँकड़े ऊपर दिखाई गई आकृति के हैं, निर्देशांकों में दो दशमलव की परिशुद्धता के साथ।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 41.28C122.08 40.79,161.83 60.16,167.4 78.1C172.96 96.04,149.18 132.27,131.81 143.78C114.43 155.29,83.98 154.88,68.12 143.87C52.27 132.87,35.62 98.85,41.2 80.89C46.78 62.94,77.92 41.76,100 41.28Z" fill="#4f46e5"/></svg>

और विस्तार से

कंकड़ वही ब्लॉब है जिसकी निर्यात प्रारूपों के बीच तुलना सबसे सार्थक है। SVG के रूप में यह सटीक है; border-radius के रूप में यह चार कोनों वाला अनुमान है, जो पाँच उभार नहीं बना सकता और उसे बनाने का दिखावा भी नहीं करना चाहिए। border-radius का आउटपुट अपनी अलग आकृति के रूप में दिया जाता है, दूसरे प्रारूप में वही आकृति कहकर नहीं — क्योंकि उसे किसी और तरह पेश करना ऐसा झूठ होता जिसका पता प्रकाशित करने के बाद ही चलता।

सवाल

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