JSFiddle - React, Tailwind, and code Playground

https://jsfiddle.net/jaycethanks/vf1acrys/4/#run

by jaycethanks

HTML

<img src="https://images.unsplash.com/photo-1567127214373-7ca7b33baf25?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="" />


    <svg t="1595992956178" class="icon" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4986" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
      <clipPath id="myclip">
        <path
          d="M512 1024c-209.066667 0-384-170.666667-384-379.733333V640c145.066667 0 277.333333 81.066667 341.333333 204.8v-115.2c-51.2-12.8-89.6-51.2-106.666666-102.4-12.8 4.266667-21.333333 4.266667-34.133334 4.266667-55.466667 0-106.666667-29.866667-136.533333-76.8-34.133333-59.733333-25.6-136.533333 21.333333-183.466667-46.933333-51.2-55.466667-128-21.333333-187.733333 29.866667-46.933333 81.066667-76.8 136.533333-76.8 12.8 0 21.333333 0 34.133334 4.266666C384 42.666667 443.733333 0 512 0s128 42.666667 149.333333 110.933333c12.8-4.266667 21.333333-4.266667 34.133334-4.266666 55.466667 0 106.666667 29.866667 136.533333 76.8 34.133333 59.733333 25.6 136.533333-21.333333 183.466666 46.933333 51.2 55.466667 123.733333 21.333333 183.466667-29.866667 46.933333-81.066667 76.8-136.533333 76.8-12.8 0-21.333333 0-34.133334-4.266667-17.066667 51.2-55.466667 89.6-106.666666 102.4v115.2c64-128 196.266667-209.066667 341.333333-204.8 0 217.6-170.666667 388.266667-384 388.266667zM362.666667 362.666667c0 81.066667 68.266667 149.333333 149.333333 149.333333s149.333333-68.266667 149.333333-149.333333S593.066667 213.333333 512 213.333333 362.666667 281.6 362.666667 362.666667z"
          p-id="4987"
        ></path>
      </clipPath>
    </svg>

CSS

img {
            width: 500px;
            height: 500px;
            clip-path: url(#myclip);
        }
        
        clipPath {
            transform: scale(0.3, 0.3) translate(50%, 50%);
        }