:root{
  --wrapperSize: 30vw;
}
body{
  background-color: darkblue;
  overflow: hidden;
}
.wrapper{
  position: absolute;
  width: 30vw;
  height: 30vw;
  margin-top: -15vw;
  margin-left: -15vw;
  width: var(--wrapperSize);
  height: var(--wrapperSize);
  margin-top: calc(var(--wrapperSize) / 2 * -1);
  margin-left: calc(var(--wrapperSize) / 2 * -1);
  top: 50%;
  left: 50%;
}
.wrapper .trailMask{
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation: rotateAnim 3500ms linear infinite;
          animation: rotateAnim 3500ms linear infinite;
}
.wrapper .trailMask::after{
  content: '';
  position: absolute;
  width: 10%;
  height: 10%;
  top: 45%;
  border-radius: 100%;
  background-color: honeydew;
}
.wrapper .ping{
  position: absolute;
  width: 40%;
  height: 47%;
  bottom: 0;
  right: 80%;
  border-radius: 50% 50% 40% 40%;
  background-color: #42a2e5;
  background: linear-gradient(0deg, rgba(250,221,168,1) 0%, rgba(250,221,168,1) 14%, rgba(66,162,229,1) 15%, rgba(66,162,229,1) 100%);
  box-shadow: -.5vw 0 rgba(0,0,0,.3) inset;
  -webkit-transform-origin: 50% 200%;
          transform-origin: 50% 200%;
  -webkit-animation: pingAnim 3500ms linear infinite;
          animation: pingAnim 3500ms linear infinite;
}
.wrapper .ping::before{
  content: '';
  position: absolute;
  width: 20%;
  height: 60%;
  bottom: -45%;
  left: 40%;
  border-radius: 0 0 .4vw .4vw;
  background-color: #e2a67f;
  box-shadow: -.5vw 0 rgba(0,0,0,.3) inset;
}
.wrapper .ping:nth-of-type(2){
  right: -20%;
  background-color: #D9422D;
  background-color: rgb(217, 66, 45);
  background: linear-gradient(0deg, rgba(250,221,168,1) 0%, rgba(250,221,168,1) 14%, rgb(217, 66, 45) 15%, rgb(217, 66, 45) 100%);
  box-shadow: .5vw 0 rgba(0,0,0,.3) inset;
  -webkit-animation: pongAnim 3500ms linear infinite;
          animation: pongAnim 3500ms linear infinite;
}
.wrapper .ping:nth-of-type(2)::before{
  box-shadow: .5vw 0 rgba(0,0,0,.3) inset;
}
@-webkit-keyframes rotateAnim{
  0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
  9%{-webkit-transform: rotate(80deg);transform: rotate(80deg);}
  21%{-webkit-transform: rotate(100deg);transform: rotate(100deg);}
  30%{-webkit-transform: rotate(180deg);transform: rotate(180deg);}
  39%{-webkit-transform: rotate(100deg);transform: rotate(100deg);}
  51%{-webkit-transform: rotate(80deg);transform: rotate(80deg);}
  60%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
  80%{-webkit-transform: rotate(180deg);transform: rotate(180deg);}
  100%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}
@keyframes rotateAnim{
  0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
  9%{-webkit-transform: rotate(80deg);transform: rotate(80deg);}
  21%{-webkit-transform: rotate(100deg);transform: rotate(100deg);}
  30%{-webkit-transform: rotate(180deg);transform: rotate(180deg);}
  39%{-webkit-transform: rotate(100deg);transform: rotate(100deg);}
  51%{-webkit-transform: rotate(80deg);transform: rotate(80deg);}
  60%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
  80%{-webkit-transform: rotate(180deg);transform: rotate(180deg);}
  100%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}
@-webkit-keyframes pingAnim{
  0%{-webkit-transform: rotate(95deg) translate(-23vw, 20vw);transform: rotate(95deg) translate(-23vw, 20vw);}
  3%{-webkit-transform: rotate(80deg) translate(-30vw, 15vw);transform: rotate(80deg) translate(-30vw, 15vw);}
  40%{-webkit-transform: rotate(85deg) translate(-24vw, 28vw);transform: rotate(85deg) translate(-24vw, 28vw);}
  60%{-webkit-transform: rotate(95deg) translate(-23vw, 20vw);transform: rotate(95deg) translate(-23vw, 20vw);}
  63%{-webkit-transform: rotate(80deg) translate(-30vw, 15vw);transform: rotate(80deg) translate(-30vw, 15vw);}
  80%{-webkit-transform: rotate(85deg) translate(-24vw, 28vw);transform: rotate(85deg) translate(-24vw, 28vw);}
  100%{-webkit-transform: rotate(95deg) translate(-23vw, 20vw);transform: rotate(95deg) translate(-23vw, 20vw);}
}
@keyframes pingAnim{
  0%{-webkit-transform: rotate(95deg) translate(-23vw, 20vw);transform: rotate(95deg) translate(-23vw, 20vw);}
  3%{-webkit-transform: rotate(80deg) translate(-30vw, 15vw);transform: rotate(80deg) translate(-30vw, 15vw);}
  40%{-webkit-transform: rotate(85deg) translate(-24vw, 28vw);transform: rotate(85deg) translate(-24vw, 28vw);}
  60%{-webkit-transform: rotate(95deg) translate(-23vw, 20vw);transform: rotate(95deg) translate(-23vw, 20vw);}
  63%{-webkit-transform: rotate(80deg) translate(-30vw, 15vw);transform: rotate(80deg) translate(-30vw, 15vw);}
  80%{-webkit-transform: rotate(85deg) translate(-24vw, 28vw);transform: rotate(85deg) translate(-24vw, 28vw);}
  100%{-webkit-transform: rotate(95deg) translate(-23vw, 20vw);transform: rotate(95deg) translate(-23vw, 20vw);}
}
@-webkit-keyframes pongAnim{
  0%{-webkit-transform: rotate(85deg) translate(-20vw, -30vw) scale(-1, -1);transform: rotate(85deg) translate(-20vw, -30vw) scale(-1, -1);}
  26%{-webkit-transform: rotate(80deg) translate(-19vw, -31vw) scale(-1, -1);transform: rotate(80deg) translate(-19vw, -31vw) scale(-1, -1);}
  32%{-webkit-transform: rotate(95deg) translate(-30vw, -20vw) scale(-1, -1);transform: rotate(95deg) translate(-30vw, -20vw) scale(-1, -1);}
  50%{-webkit-transform: rotate(85deg) translate(-20vw, -30vw) scale(-1, -1);transform: rotate(85deg) translate(-20vw, -30vw) scale(-1, -1);}

  76%{-webkit-transform: rotate(80deg) translate(-19vw, -31vw) scale(-1, -1);transform: rotate(80deg) translate(-19vw, -31vw) scale(-1, -1);}
  82%{-webkit-transform: rotate(95deg) translate(-30vw, -20vw) scale(-1, -1);transform: rotate(95deg) translate(-30vw, -20vw) scale(-1, -1);}
  100%{-webkit-transform: rotate(85deg) translate(-20vw, -30vw) scale(-1, -1);transform: rotate(85deg) translate(-20vw, -30vw) scale(-1, -1);}
}
@keyframes pongAnim{
  0%{-webkit-transform: rotate(85deg) translate(-20vw, -30vw) scale(-1, -1);transform: rotate(85deg) translate(-20vw, -30vw) scale(-1, -1);}
  26%{-webkit-transform: rotate(80deg) translate(-19vw, -31vw) scale(-1, -1);transform: rotate(80deg) translate(-19vw, -31vw) scale(-1, -1);}
  32%{-webkit-transform: rotate(95deg) translate(-30vw, -20vw) scale(-1, -1);transform: rotate(95deg) translate(-30vw, -20vw) scale(-1, -1);}
  50%{-webkit-transform: rotate(85deg) translate(-20vw, -30vw) scale(-1, -1);transform: rotate(85deg) translate(-20vw, -30vw) scale(-1, -1);}

  76%{-webkit-transform: rotate(80deg) translate(-19vw, -31vw) scale(-1, -1);transform: rotate(80deg) translate(-19vw, -31vw) scale(-1, -1);}
  82%{-webkit-transform: rotate(95deg) translate(-30vw, -20vw) scale(-1, -1);transform: rotate(95deg) translate(-30vw, -20vw) scale(-1, -1);}
  100%{-webkit-transform: rotate(85deg) translate(-20vw, -30vw) scale(-1, -1);transform: rotate(85deg) translate(-20vw, -30vw) scale(-1, -1);}
}