How to find center of native cursor and align the custom cursor to it?

I have created a custom cursor using two div elements, both of them are circles. First one is the main cursor and other one is its follower. They use jQuery to track mouse coordinates. My problem is, when the cursor is not moving I want to make both look like concentric circles(both circle have same center) but they are not at center. I have tried it using (e.PageX -(offset – radius of circle)) but it doesn’t return any value. I am not able to explain this properly sorry new here, I have linked the codepen below:

$(document).mousemove(function(e){
 $('#cursor').css({
   "left" : (e.pageX + 'px'),
   "top" : (e.pageY   + 'px')
    });
$('#cursorFollow').css({
   "left" : (e.pageX + 'px'),
   "top" : (e.pageY   + 'px')
});
});

Codepen

Answer

The thing is you are getting the left and top of the cursor’s point to set the position of both circle and one is smaller than other so they are being painted from that exact position

If you want to center the circle to the pointer of the cursor use transform: translate(-50%, -50%); in both element it will move the circles half its size in both directions (center)

$(document).mousemove(function(e){
     $('#cursor').css({
       "left" : (e.pageX + 'px'),
       "top" : (e.pageY   + 'px')
   });
    $('#cursorFollow').css({
       "left" : (e.pageX + 'px'),
       "top" : (e.pageY   + 'px')
    });
    });

*{
/*   cursor:none; */
}
body{
  height: 300vh;
}
.cursor{
    position: absolute;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: #000;
    transform: translate(-50%, -50%);     //new
}
.cursor-follower{
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    opacity: 0.4;
    border-radius: 50%;
    background-color: #000;
    transition: 0.2s ease-out;
    pointer-events: none;
    will-change: all;
    transform: translate(-50%, -50%);       //new
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cursor" id="cursor"></div>
        <div class="cursor-follower" id="cursorFollow"></div>

Here a working pen

If you want a diferente centering please add an img of what is your desired result