JSFiddle - React, Tailwind, and code Playground

by David Storey

HTML

<div class="clip-test"></div>
<svg>
    <clipPath id="clip1">
        <polygon points="15,99 30,87 65,99 85,55 122,57 184,73 198,105
      199,150 145,159 155,139 126,120 112,138 80,128 39,126
      24,104" />
    </clipPath>
</svg>

CSS

.clip-test {
    width: 200px;
    height: 200px;
    background-color: green;
    //-webkit-clip-path: url("#clip1");
    //-moz-clip-path: url("#clip1");
    //-ms-clip-path: url("#clip1");  
    //clip-path: url("#clip1");
   
    -webkit-clip-path: url("https://dl.dropboxusercontent.com/u/444684/assets/clip-img.svg#clip1");   
    clip-path: url("https://dl.dropboxusercontent.com/u/444684/assets/clip-img.svg#clip1");
}