.wrap
 -30.times do
  .dot
View Compiled
body{
  display:flex;
  width:100%;
  height:100vh;
  justify-content:center;
  align-items:center;
  background:#222;
  .wrap{
    width:300px;
    height:300px;
    position:relative;
    .dot{
      position:absolute;
      width:10px;
      height:10px;
      left:calc(50% - 5px);
      top:0;
      transform-origin:50% 150px;
      animation:origin 2s ease-in-out infinite alternate;
      @keyframes origin{
        0%{
          top:150px;
          transform-origin:50% 0px;
          
        }
        25%{
          top:150px;
          transform-origin:50% 0px;
          
        }
        50%{
          top:50px;
          transform-origin:50% 100px;
        }
        100%{
          top:50px;
          transform-origin:50% 100px;
        }
      }
      @for $i from 1 through 30{
        &:nth-of-type(#{$i}){
          transform:rotate(#{$i * 12}deg);
          &:after{
            content:'';
            position:absolute;
            width:100%;
            height:100%;
            border-radius:100%;
            animation:burst 4s ease-in-out infinite;
            z-index:-1;
            @keyframes burst{
              12.5%{
                transform:translateY(0px);
                opacity:1;
                background:adjust-hue(yellow, 0);
              }
              25%{
                transform:translateY(250px);
                opacity:0;
                background:adjust-hue(yellow, 50%);
              }
              100%{
                transform:translateY(250px);
                opacity:0;
              }
            }
          }
          &:before{
            content:'';
            position:absolute;
            width:100%;
            height:100%;
            background:adjust-hue(yellow, 0);
            border-radius:50px;
            animation:cross 2s ease-in-out infinite alternate;
            animation-delay:#{$i/30}s;
            @keyframes cross{
              50%{
                height:10px;
                transform:translateY(0px);
                background:adjust-hue(yellow, 50%);
              }
              75%{
                height:50px;
                transform:translateY(100px);
                background:adjust-hue(yellow, 100%);
              }
              100%{
                height:10px;
                transform:translateY(0px);
                background:adjust-hue(yellow, 150%);
              }
            }
          }
        }
      }
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.