ब्लॉब अवतार मास्क

किसी तस्वीर को वृत्त के बजाय ब्लॉब में काटना। यहीं clip-path अपनी जगह कमाता है — छवि अपनी सामग्री रखती है और उसे नई छाया-आकृति मिलती है, किसी आकृति के पीछे बैठने के बजाय।

नुस्ख़ा

क़दम दर क़दम

• ऑर्गैनिक ब्लॉब चुनिए और तब तक फेंटिए जब तक छाया-आकृति फ़ोटो पर जँचने न लगे।
• CSS clip-path के रूप में निर्यात कीजिए — आपको एक इनलाइन SVG ब्लॉक और एक CSS नियम मिलेगा।
• SVG ब्लॉक को दस्तावेज़ में कहीं भी चिपका दीजिए; वह छिपा रहता है और सिर्फ़ id से संदर्भित होता है।
• क्लास अपनी छवि पर लगाइए और उसे वही आकार दीजिए जो आउटपुट बताता है।

<svg width="0" height="0" style="position:absolute">
  <defs>
    <clipPath id="shape-clip" clipPathUnits="userSpaceOnUse">
      <path d="M100 54.85C116.91 53.97,145.16 39.06,153.41 46.59C161.66 54.11,150.46 83.17,149.49 100C148.51 116.83,155.8 138.58,147.55 147.55C139.3 156.52,117.11 152.56,100 153.82C82.89 155.08,56.37 164.08,44.89 155.11C33.41 146.14,29.94 117.2,31.11 100C32.28 82.8,40.44 59.45,51.92 51.92C63.4 4…

और विस्तार से

छवि को `object-fit: cover` भी दीजिए, वरना किसी और अनुपात वाली तस्वीर कटने से पहले ही विकृत हो जाएगी। और अगर एक पेज पर एक से ज़्यादा ब्लॉब मास्क इस्तेमाल करें तो SVG ब्लॉक और CSS नियम दोनों में id बदल दीजिए — दोहराई गई id का मतलब है कि हर कटा हुआ एलिमेंट वही आकृति ले लेगा जो ब्राउज़र को पहले मिली।

सवाल

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