JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="light" width="400" height="1800">
    <defs>
         <filter id="dropShadow" height="200%" width="200%" x="-50%" y="-50%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="0" />
            <feOffset dx="0" dy="0" />
            <feMerge>
                <feMergeNode />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
    </defs>
    <g filter="url(#dropShadow)">
      <circle class="menu" r="150" cx="200" cy="200" fill="none"></circle>    
      <circle class="circle" r="150" cx="200" cy="200" fill="steelblue"></circle>
      
    </g>
</svg>
<svg id="dark" width="400" height="1800">
    <defs>
         <filter id="neonGlow" height="200%" width="200%" x="-50%" y="-50%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="0" />
            
            <feOffset dx="0" dy="0" />
            <feMerge>
                <feMergeNode />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
    </defs>
    <g filter="url(#neonGlow)">
      <circle class="menu" r="150" cx="200" cy="200" fill="none"></circle>    
      <circle class="circle" r="150" cx="200" cy="200" fill="steelblue"></circle>
    </g>
    
</svg>

CSS

#light .menu {
    fill: #bec7d1;
}

#dark .menu {
    fill: #5c7077;
}

#light {
    background: #f9f9f9;
}

#dark {
    background: #1e292d;
}

JavaScript

function lift(svgId) {

    const blur = d3.select(svgId).select("feGaussianBlur");
    const offset = d3.select(svgId).select("feOffset");

	/* d3.select(svgId).select(".menu")
	      .transition()
	      .duration(250)
	      .attr("r", 150 + 30); */

    d3.select(svgId)
        .select(".circle")
        .transition("shadow")
        .duration(250)
        .ease(d3.easeLinear)
        .tween("defs", function() {

            const circle = d3.select(svgId).select(".circle");
            const menu = d3.select(svgId).select(".menu");

			const menuI = d3.interpolateNumber(0, 40);
            const radius = d3.interpolateNumber(0, 40);
            const deviation = d3.interpolateNumber(0, 18); //18
            const offsetX = d3.interpolateNumber(0, 0);
            const offsetY = d3.interpolateNumber(0, 18); //15
            return function(t) {
                circle.attr("r", 150 + radius(t))
                menu.attr("r", 150 + menuI(t))
                blur.attr("stdDeviation", deviation(t));
                offset.attr("dx", offsetX(t))
                    .attr("dy", offsetY(t));
            }
        })
        .transition()
        .duration(250)
        .attr("r", 160);
};

setTimeout(() => {
	lift("#light");
	lift("#dark");
}, 500);