JSFiddle - React, Tailwind, and code Playground

by manofgod

HTML

<svg width="0" height="0">
    <defs>
        <clipPath id="shape">
            <path transform="translate(0.000000,163.000000) scale(0.100000,-0.100000)" d="M373 1197 c-355 -355 -363 -363 -363 -402 0 -39 8 -47 363 -402 355
-355 363 -363 402 -363 39 0 47 8 402 363 355 355 363 363 363 402 0 39 -8 47
-363 402 -355 355 -363 363 -402 363 -39 0 -47 -8 -402 -363z" />
        </clipPath>
    </defs>
</svg>
<img class='test' src='http://lorempixel.com/output/cats-q-g-640-480-7.jpg' />

CSS

body {
    margin:0px;
}
.test {
    height:160px;
    width:170px;
    -webkit-clip-path: url(#shape);
    clip-path: url(#shape);
}