JSFiddle - React, Tailwind, and code Playground

by jeremyblalock

HTML

<svg width="100%" height="400px">
  <defs>
    <filter id="myfilter" x="-100" y="-100" width="300" height="300">
      <feOffset result="offsetOut" in="SourceAlpha" dx="0" dy="20" />
      <feComponentTransfer result="alphaOut" in="offsetOut">
        <feFuncA type="linear" slope="0.5" intercept="0" />
      </feComponentTransfer>
      <feGaussianBlur result="blurOut" in="alphaOut" stdDeviation="20" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <mask id="circleMask" maskUnits="userSpaceOnUse">
    <rect fill="#fff" x="0" y="0" width="400" height="400" />
    <rect fill="#000" x="20" y="20" width="100" height="100" />
  </mask>
  <rect x="20" y="20" width="100" height="100" fill="#fff" stroke="none" filter="url(#myfilter)" mask="url(#circleMask)" />
</svg>

CSS

body {
  background: #eee;
}