const pointer = { x: 0, y: 0 };

window.addEventListener(
  "pointermove",
  (e) => {
    pointer.x = e.clientX;
    pointer.y = e.clientY;
  },
  false
);

const paths = document.getElementsByTagName("path");
const svg = document.getElementsByTagName("svg")[0];

console.log(paths);
function animate() {
    requestAnimationFrame(animate);
    const rect = svg.getBoundingClientRect();
    const x = pointer.x - rect.left;
    const y = pointer.y - rect.top;
    for( const path of paths ) {
        const i = Number(path.getAttribute("id"));
        const xk = 0.004 * x;
        const yk = 0.004 * (y + i - 200);
        path.setAttribute(
            "transform", `translate(${x}, ${y}) scale(${xk},${yk}) rotate(${xk * i * 2},20,20)`
        );
    }
}

animate();