Легкая анимация на элементах SVG

Question

У меня есть этот SVG, который делает полукруг.Я хочу создать анимацию пульсирующего света вокруг этой фигуры.

Я возился с css и webkit, но ближе всего я получаю пульсирующий свет вокруг родительского элемента, но не вокруг фактической формы.Был бы благодарен за некоторые идеи и идеи по этому поводу.

SVG:

<svg class="pulse-button" width="234" height="256" xmlns="http://www.w3.org/2000/svg">
                  <g class="half-circle">>
                    <rect class="rect" x="-1" y="-1" width="236" height="258" id="canvas_background" fill="none"/>
                    <path transform="rotate(-90.53539276123047 116.5,117.59869384765625) " id="svg_6" d="m66,24.098694c55.8011,0 101,41.84254 101,93.5c0,51.65746 -45.1989,93.5 -101,93.5l0,-187z" stroke-linecap="null" stroke-linejoin="null" stroke-width="4" stroke="#000000" fill="#000000"/>
                  </g>
                </svg>

Answer 1

Вы можете попробовать с чистым решением CSS:

.pulse {
  width:200px;
  height:100px;
  position:relative;
  margin:10px;
}

.pulse::before,
.pulse::after{
   content:"";
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   border-radius:100px 100px 0 0;
   background:#000;
}
.pulse::before {
   background:yellow;
   transform:scale(0.8);
   animation: change 0.8s  infinite alternate; 
   filter:blur(10px);
}
@keyframes change {
  to {
   transform:scale(1.1);
  }
}

<div class="pulse">

</div>