Center the Mouse cursor inside the circle

const dpkCursor = document.createElement("div");
dpkCursor.classList.add("dpkCursor");
document.body.appendChild(dpkCursor);

function initCursor(speedOption = 0.25) {
  let dpkCursorMouse = { x: -100, y: -100 };
  let dpkCursorPos = { x: 0, y: 0 };
  let speed = speedOption;

  //center the circle around cursor

  window.addEventListener("mousemove", (e) => {
    dpkCursorMouse.x = e.x;
    dpkCursorMouse.y = e.y;
  });

  const updatePosition = () => {
    const offset = 15;
    dpkCursorPos.x += (dpkCursorMouse.x - dpkCursorPos.x - offset) * speed;
    dpkCursorPos.y += (dpkCursorMouse.y - dpkCursorPos.y - offset) * speed;

    // dpkCursor.style.transform = `translate3d(${dpkCursorPos.x}px ,${dpkCursorPos.y}px, 0)`;

    dpkCursor.style.transform = `translate(${dpkCursorPos.x}px ,${dpkCursorPos.y}px)`;
  };

  function loop() {
    updatePosition();
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
}

initCursor();

body{
  background:black;
}

.dpkCursor {
  height: 1.75rem;
  width: 1.75rem;
  position: fixed;

  /* Hack For Verson 2 */
  /* margin:-14px; */
  
  
  top: 0;
  left: 0;
  color: white;
  border: 2px solid #fff;
  mix-blend-mode: difference;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
}

const dpkCursor = document.createElement("div");
dpkCursor.classList.add("dpkCursor");
document.body.appendChild(dpkCursor);


function initCursor(speedOption = 0.25) {
  
    let dpkCursorMouse = { x: -100, y: -100 };
    let dpkCursorPos = { x: 0, y: 0 };
    let speed = speedOption;
   
    //center the circle around cursor       
 
    window.addEventListener("mousemove", (e) => {
      dpkCursorMouse.x = e.x;
      dpkCursorMouse.y = e.y;
    });

    const updatePosition = () => {
      dpkCursorPos.x += (dpkCursorMouse.x - dpkCursorPos.x) * speed;
      dpkCursorPos.y += (dpkCursorMouse.y - dpkCursorPos.y) * speed;

      dpkCursor.style.transform = `translate3d(calc(${dpkCursorPos.x}px - 50%) ,calc(${dpkCursorPos.y}px - 50%),0)`;
    
    };

    function loop() {
      updatePosition();
      requestAnimationFrame(loop);
    }
    requestAnimationFrame(loop);
  
}


initCursor()

body{
  background:black;
}

.dpkCursor {
  height: 1.75rem;
  width: 1.75rem;
  position: fixed;
  
  top: 0;
  left: 0;
  color: white;
  border: 2px solid #fff;
  mix-blend-mode: difference;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
}