<svg width="500" height="500" id="svg">
  <defs>
    <pattern id="sine" viewBox="0 0 100 1000" width="100" height="1000" patternUnits="userSpaceOnUse">
      <path id="wave" fill="#def"/>
    </pattern>
  </defs>
  <circle cx="250"  cy="250" r="240" fill="url(#sine)" stroke="navy"/>
</svg>

const sine = document.getElementById('sine');
const wave = document.getElementById('wave');
function moveWave(position) {
  const waveHeight = Math.round(Math.cos(position / 25) * 20);
  wave.setAttribute('d', `M0 1000 V 500 Q 25 ${500 + waveHeight}, 50 500 T 100 500 V 1000 Z`);
  sine.setAttribute('patternTransform', `translate(${position / 2}, ${position})`);
}


let current = -250, previous = 0;
document.getElementById('svg').addEventListener('mousemove', (e) => {
  current = -e.offsetX;
});
function animate() {
  if(current !== previous) {
    moveWave(current);
    previous = current;
  }
  window.requestAnimationFrame(animate);
}
animate();