JSFiddle - React, Tailwind, and code Playground

by Peter Doyle

HTML

<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 659 732" height="291" width="501" class="svg-graphic">
    <g>
       <clipPath id="hex-mask">
            <path d="M604.782,317.641c0,125.304-47.77,204.477-147.056,268.631
	c-18.749,12.112-161.752,104.752-163.949,105.396c0,0,35.641-72.481,22.362-72.186c-13.497,0.302,2.415,0.302-13.497,0.302
	C135.773,619.784,0.5,484.512,0.5,317.641C0.5,150.774,135.773,15.5,302.642,15.5C469.51,15.5,604.782,150.774,604.782,317.641z"/>
        </clipPath>
   </g> 
   <image preserveAspectRatio="xMidYMin slice" xlink:href="http://www.globaltravelmate.com/uploads/images/india/delhi/delhi_hamayuntomb.jpg" width="100%" height="100%" clip-path="url(#hex-mask)"/>
   
</svg>

<div class="image-clip">
	<clipPath id="clipPath5">
		<img class="clip-image" src="http://www.globaltravelmate.com/uploads/images/india/delhi/delhi_hamayuntomb.jpg" width="501" height="291" alt="Image" /> 
    </clipPath>
</div>