<svg width="300" height="150">
  <circle id="cLeft" cx="120" cy="75" r="10" />
  <circle id="cCenter" cx="150" cy="75" r="10" />
  <circle id="cRight" cx="180" cy="75" r="10" />
</svg>
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
let cLeft= document.getElementById('cLeft'),
    cCenter = document.getElementById('cCenter'),
    cRight = document.getElementById('cRight');
let currentAnimationTime = 0;
const centreY = 75;
const amplitude = 20;
animate();    
function animate() {
  cLeft.setAttribute('cy', centreY + (amplitude * Math.sin(currentAnimationTime)));
  cCenter.setAttribute('cy', centreY + (amplitude * (Math.sin(currentAnimationTime - 1))));
  cRight.setAttribute('cy', centreY + (amplitude * (Math.sin(currentAnimationTime - 2))));
  
  currentAnimationTime += 0.15;
  requestAnimationFrame(animate);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.