it is more troublesome to make it complete. But I've done that bright spot, and I don't know if it can meet your requirements

CSS

.box {
      position: relative;
      margin: 100px;
    }

    .shadow {
      /* background: rgba(255, 0, 0, 0); */
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -5px;
      margin-top: -5px;
      background: -sharpf00;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      opacity: 1;
      box-shadow: 0 0 5px -sharpf00;
      transform: scale(2, 2);
      animation: light 1s;
      animation-iteration-count: infinite;
      animation-direction: normal;
      /* 
      
      animation-direction: reverse;
      animation-direction: normal;
      animation-direction: alternate;
      animation-direction: alternate-reverse; */
    }
    
    .dot {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -5px;
      margin-top: -5px;
      background: -sharpf00;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    @keyframes light {
      0% {
        transform: scale(1, 1);
      }
      50% {
        transform: scale(3, 3);
        opacity: 0;
      }
      100% {
        transform: scale(1, 1);
        opacity: 0;
      }
    }

html

<div class="box">
    <div class="shadow"></div>
    <div class="dot"></div>
</div>