JSFiddle - React, Tailwind, and code Playground

by LAD500

HTML

<svg viewBox="0 0 293 226" width="293" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 385.233px; min-width: 385.233px; height: 297.143px;">
  <svg viewBox="0 0 293 226" width="293" height="226" x="0" y="0">
    <g clip-path="url(#clip-0d137161-047a-4658-8336-2e55156ce4fe)">
      <g transform="rotate(0 146.5 90.4)">
        <defs>
          <clipPath clipPathUnits="objectBoundingBox" id="clipPathMask-0f05a0aa-4fb7-420f-aea5-ad7fc9c9a127" transform="scale(0.005784982935153583 0.0038563296140941045)">
            <path d="M20.9,95.6l5.6-32.8L2.7,39.6l32.9-4.8L50.3,5L65,34.8l32.9,4.8L74.1,62.8l5.6,32.8L50.3,80.1L20.9,95.6z"></path>
            <path d="M20.9,95.6l5.6-32.8L2.7,39.6l32.9-4.8L50.3,5L65,34.8l32.9,4.8L74.1,62.8l5.6,32.8L50.3,80.1L20.9,95.6z"></path>
          </clipPath>
        </defs>
        <svg height="135.6" width="135.6" x="78.7" y="22.6">
          <g>
            <g clip-path="url(#clipPathMask-0f05a0aa-4fb7-420f-aea5-ad7fc9c9a127)">
              <image href="https://dnr500.github.io/stackoverflow/image-to-mask.jpg" id="81a28235-28e3-4636-bbe1-a123cf59bb4f" preserveAspectRatio="xMidYMid slice" height="351.62969343805423" width="234.4" x="0" y="-108.01484671902712" opacity="1" transform="rotate(0) translate(0 0)"></image>
            </g>
          </g>
        </svg>
      </g>
    </g>
  </svg>
</svg>