JSFiddle - React, Tailwind, and code Playground

by prayerslayer

HTML

<img class="bg" src="http://www.lavenham-photographic.co.uk/wedding/photographer/boreham-house/slide108.jpg"/>
<img class="fg" src="http://www.lavenham-photographic.co.uk/wedding/photographer/boreham-house/slide108.jpg"/>

<svg>
  <defs>
    <clipPath id="clipping">
      <path d="M 488,250
                 556,238 
                 590,190
                 715,196
                 773,258
                 769,344
                 738,365
                 650,350
                 494,349 Z"/>
    </clipPath>
  </defs>
</svg>

CSS

img {
    position:absolute;
    left:0px;
    top: 0px;
}

img.bg {
    -webkit-filter: grayscale(.5)blur(2px);
}

img.fg {
    -webkit-clip-path: url( #clipping );
}