<div class = "centered">
  <div class = "blob-1"></div>
  <div class = "blob-2"></div>
</div>

html,body{
  background:#000;
  margin:0;
}
.centered{
  width:400px;
  height:400px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#000;
  filter: blur(10px) contrast(20);
}
.blob-1,.blob-2{
  width:70px;
  height:70px;
  position:absolute;
  background:#fff;
  border-radius:50%;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
}
.blob-1{
  left:20%;
  animation:osc-l 2.5s ease infinite;
}
.blob-2{
  left:80%;
  animation:osc-r 2.5s ease infinite;
  background:#0ff;
}
@keyframes osc-l{
  0%{left:20%;}
  50%{left:50%;}
  100%{left:20%;}
}
@keyframes osc-r{
  0%{left:80%;}
  50%{left:50%;}
  100%{left:80%;}
}