<div class="blip">
</div>

body {
  background: #111;
}
.blip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 16px;
  width: 16px;
  // background: cyan;
  border: solid 2px cyan;
  border-radius: 100%;
  &:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 6px;
    width: 6px;
    background: cyan;
    border-radius: 100%;
    box-shadow: 0 0 14px 4px cyan;
    animation: beat 4s infinite;
  }
}

.sphere {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 4px;
  width: 4px;
  background: cyan;
  border-radius: 100%;
  box-shadow: 0 0 10px 4px cyan;
  animation: beat 1s infinite;
  // animation: move 4s infinite;
}

@keyframes beat {
  0% { 
    transform: translate(-50%, -50%) scale(1) 
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.6)
  }
  100% { 
    transform: translate(-50%, -50%) scale(1)
  }
}

@keyframes move {
  0% { 
    top: 50%;
    left: 50%;
    opacity: 1;
  }
  100% { 
    top: 40%;
    left: 50%;
    opacity: 0;
  }
}

function prop(min, max) {
  var rand = Math.floor(Math.random() * (max - min + 1)) + min;
  return rand = rand+"%";
}

function spawnSphere() {
  var top = prop(30, 70);
  var left = prop(30, 70);
  console.log(top, left);
  var $sphere = '<div class="sphere"></div>';
  $("body").append( $sphere ).find(".sphere:last").animate({
    top: top,
    left: left,
    opacity: 0
  }, 4000, function(){
    $("body").find(".sphere:first").remove();
  });
}
setInterval("spawnSphere()", 500);