<div class="stage">
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
</div>
.stage {
  background-color: #fff;
  filter: contrast(10);
  padding: 2em;
  width: 100%;
  height: 10em;
}

.blob {
  background-color: #000;
  border-radius: 50%;
  height: 4em;
  position: absolute;
  width: 4em;
  
  &:nth-child(1) {
    animation: wobble 3s ease infinite;
    filter: blur(16px);
    left: 2em;
    top: 5.3em;
  }
  
  &:nth-child(2) {
    animation: wobble 3.1s ease infinite;
    filter: blur(15px);
    left: 5em;
  }
  
  &:nth-child(3) {
    animation: wobble 2.9s ease infinite;
    filter: blur(12px);
    left: 7.5em;
    top: 5.5em;
  }
  
  &:nth-child(4) {
    animation: wobble 3.15s ease infinite;
    filter: blur(11px);
    left: 10.7em;
    top: 3em;
  }
  
  &:nth-child(5) {
    animation: wobble 2.85s ease infinite;
    filter: blur(18px);
    left: 13.5em;
    top: 5.9em;
  }
  
}

@keyframes wobble {
  50% { transform: translate(1em, .5em) }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.