<div class="container">
  <img src="https://placekitten.com/400/400" width="400" height="400" alt="kitten img" />
  <svg id="kittenOverlay" width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line id="line1" x1="10" x2="390" y1="10" y2="390" stroke="orange" stroke-width="5"/>
  </svg>
</div>

.container {
  position: relative;
}
.container>svg {
  position: absolute;
  top: 0;
  left: 0;
}

const svg = document.getElementById('kittenOverlay');
const line1 = svg.getElementById('line1');

const onFrame = ts => {
  const x1 = 200 + 190 * Math.sin(ts / 1e3);
  const x2 = 200 + 190 * Math.sin(2 * Math.PI + ts / (1e3 * 1.05));
  const y1 = 200 + 190 * Math.sin(Math.PI + 1.07 * ts / 1e3);
  const y2 = 200 + 190 * Math.sin(ts / 8e2);
  line1.setAttribute('x1', x1);
  line1.setAttribute('x2', x2);
  line1.setAttribute('y1', y1);
  line1.setAttribute('y2', y2);
  requestAnimationFrame(onFrame);
};

onFrame();