JSFiddle - React, Tailwind, and code Playground
HTML
<svg width="600" height="250" viewBox="0 0 600 250"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="gaussblur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="15" />
</filter>
<filter id="morphdilate" x="-50%" y="-50%" width="200%" height="200%">
<feMorphology operator="dilate" in="SourceGraphic" radius="15" />
</filter>
<filter id="morpherode" x="-50%" y="-50%" width="200%" height="200%">
<feMorphology operator="erode" in="SourceGraphic" radius="15" />
</filter>
</defs>
<circle r="50" cx="75" cy="100" fill="blue" stroke="none" filter="url(#gaussblur)"/>
<circle r="50" cx="250" cy="100" fill="blue" stroke="none" filter="url(#morphdilate)"/>
<circle r="50" cx="400" cy="100" fill="blue" stroke="none" filter="url(#morpherode)"/>
</svg>