How to add box-shadow to a svg path circle shape - html

Question

I have this problem, where I need to add box-shadow to a circle, but it seems it is not possible.
Why does it not work or how could I add circle shadow to the </circle> element in SVG path to have the glow effect with current specifications?
/*
circle {
fill: red; <-- works
box-shadow: 0 0 50px red; <-- does not work
}
*/
<svg width="450" height="450">
<path id="motionPath"
d="M 50 200 L 400 200 "
stroke="black" fill="transparent" />
<circle class="circle" r=5 fill=#45b6fe z-index=55>
<animateMotion dur="8s" repeatCount="indefinite" rotate="auto">
<mpath href="#motionPath" />
</animateMotion>
</circle>
</svg>

Answer 1

To add a box-shadow, you will need to work on feGaussianBlur attribute. Below is the code for you and it generates beautiful box-shadow. You can check the output for the same
Note: To see the shadow properly, I have increased the dimension of circle. You can keep as per your requirement.
<svg width="450" height="450">
<defs>
<filter id="f1" x="-40%" y="-40%" width="180%" height="180%" filterUnits="userSpaceOnUse">
<feGaussianBlur in="SourceAlpha" stdDeviation="8"/>
<feOffset dx="5" dy="5" result="offsetblur"/>
<feOffset dx="-5" dy="-5" result="offsetblur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path id="motionPath"
d="M 50 200 L 400 200 "
stroke="black" fill="transparent" />
<circle class="circle" r=10 fill=#45b6fe z-index=55 style="filter: url(#f1);">
<animateMotion dur="8s" repeatCount="indefinite" rotate="auto">
<mpath href="#motionPath" />
</animateMotion>
</circle>
</svg>
UPDATE:
As per your requirement, I have added desired background color to the box shadow.
<svg width="450" height="450">
<defs>
<filter id="f1" x="-40%" y="-30%" width="180%" height="180%" filterUnits="userSpaceOnUse" >
<feColorMatrix result="offsetblur" in="offOut" type="matrix"/>
<feGaussianBlur in="SourceAlpha" stdDeviation="10" />
<feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur"/>
<feOffset in="blur" dx="5" dy="5" result="offsetBlur" stdDeviation="1.7"/>
<feFlood flood-color="red" flood-opacity="5" result="offsetColor"/>
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path id="motionPath"
d="M 50 200 L 400 200 "
stroke="black" fill="transparent" />
<circle class="circle" r=10 fill=white z-index=55 style="filter: url(#f1);">
<animateMotion dur="8s" repeatCount="indefinite" rotate="auto">
<mpath href="#motionPath" />
</animateMotion>
</circle>
</svg>

Answer 2

so I have this in one of my sites and it works fine for me
.booking-view-tariff-circle > img {
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 2px 2px 4px #000;
display: block;
height: 80px;
width: 80px;
margin-left: auto;
margin-right: auto;
object-fit: cover;
position: relative;
left: -45px;
top: -78px;
box-shadow: 0 8px 8px rgba(0,0,0,0.54);