JSFiddle - React, Tailwind, and code Playground

by Elena Shevchuk

HTML

<svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <clipPath id="myClip">
            <circle cx="100" cy="10" r="100" clip-rule="nonezero" />
        </clipPath>
    </defs>
    <rect x="10" y="10" width="100" height="100" clip-path="url(#myClip)" />
</svg>
<div></div>

CSS

div {
    width: 200px;
    height: 100px;
    -webkit-clip-path: url("#myClip");
    clip-path: url("#myClip");
    background: blue;
}