JSFiddle - React, Tailwind, and code Playground

by David Storey

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 512 341" width="512" height="341">
  <defs>
    <mask id="m">
      <circle cx="256" cy="200" r="150"/>
    </mask>
  </defs>
  <g mask="url(#m)">
    <image width="512" height="341.5" xlink:href="http://farm8.staticflickr.com/7063/6860283873_b9f2e6d511_b.jpg"/>
    <!-- original: http://www.flickr.com/photos/yewenyi/6860283873/
         http://creativecommons.org/licenses/by-nc/2.0/ -->
  </g>
</svg>

CSS

mask {
    mask-type: alpha;
}