JSFiddle - React, Tailwind, and code Playground
by daneren2005
HTML
<svg height="298.8666687011719" width="253.4499969482422">
<image style="clip-path: url('#Mask-3');" transform="translate(-78.85108200056459, -18.82014220144959)" height="553.25" width="470.2833251953125" xlink:href="https://plicimg-d6d.kxcdn.com/?url=https%3A%2F%2Fplic-staging.s3.amazonaws.com%2Fphotos%2Fca805893-ef08-4e94-b5ca-6b12e3436ce9%2Foriginal%2FDSC05978.jpg%3FAWSAccessKeyId%3DAKIAJAMRRGAHI5LJPB6A%26Expires%3D1434125947%26Signature%3DZ%252BnAgp7Gv8GzxXklqIorWUwwcSQ%253D&op=resize,rotate°=auto&mode=clip&filter=bilinear&opt=1&prog=1&q=90&w=300&sig=2d5ea43b03871a395886a11feb093d3cebb6dd7c" />
<clipPath clipPathUnits="objectBoundingBox" id="Mask-3">
<polygon points=".5 0, .7 .3, 1 .38, .75 .65, .82 1, .49 .84, .18 1, .25 .65, 0 .38, .30 .30" />
</clipPath>
</svg>
<svg id="outerSVG" width="253.4499969482422" height="298.8666687011719" style="clip-path: url('#Mask-3');">
<use xlink:href="#innerSVG" width="253.4499969482422" height="298.8666687011719" />
</svg>
<svg id="innerSVG" height="298.8666687011719" width="253.4499969482422">
<image transform="translate(-78.85108200056459, -18.82014220144959)" height="553.25" width="470.2833251953125" xlink:href="https://plicimg-d6d.kxcdn.com/?url=https%3A%2F%2Fplic-staging.s3.amazonaws.com%2Fphotos%2Fca805893-ef08-4e94-b5ca-6b12e3436ce9%2Foriginal%2FDSC05978.jpg%3FAWSAccessKeyId%3DAKIAJAMRRGAHI5LJPB6A%26Expires%3D1434125947%26Signature%3DZ%252BnAgp7Gv8GzxXklqIorWUwwcSQ%253D&op=resize,rotate°=auto&mode=clip&filter=bilinear&opt=1&prog=1&q=90&w=300&sig=2d5ea43b03871a395886a11feb093d3cebb6dd7c" />
<clipPath clipPathUnits="objectBoundingBox" id="Mask-3">
<polygon points=".5 0, .7 .3, 1 .38, .75 .65, .82 1, .49 .84, .18 1, .25 .65, 0 .38, .30 .30" />
</clipPath>
</svg>
<svg id="innerSVG" width="253.4499969482422" height="298.8666687011719" >
<g clip-path="url(#Mask-3)">
<use xlink:href="#imageGroup" width="253.4499969482422" height="298.8666687011719" />
...