How can I make a cursor like on this website?

Question

So I really like the idea behind it thats why I wanted to ask how I can make a cursor like there: https://brandyandcoco.com/6-great-google-font-combinations/

Maybe someone knows what kind of JavaScript or whatever this is.

This question is solved and was aksed before researching on my own.

Here's a functional cursor:

var ball = document.querySelectorAll(".ball");
    var ball2 = document.querySelectorAll(".ball2");

    document.addEventListener("mousemove", fn, false);

    function fn(e) {
      for (var i = ball.length; i--; ) {
                                    /* -16 is the width/height ball divided by 2*/
        ball[i].style.left = e.clientX- 16 + "px";
        ball[i].style.top = e.clientY- 16 + "px";
      }
      for (var i = ball2.length; i--; ) {
        
        ball2[i].style.left = e.clientX - 5 + "px";
        ball2[i].style.top = e.clientY - 5 + "px";
        
      }
    }

.ball {
  display: block;
  background: #c8c8c8;
  position: fixed;
  z-index: 1000;
  width: 32px;
  height: 32px;
  opacity: 0.5;
  border-radius: 100%;
}

.ball2 {
  pointer-events: none;
  display: block;
  background: #c8c8c8;
  position: fixed;
  z-index: 1000;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  transition: left 80ms ease-out, top 80ms ease-out, box-shadow 60ms ease-out,
    opacity 0ms 300ms;
}

<span class="ball"></span>
  <span class="ball2"></span>

Answer 1

Thanks to comment of @adiga, I got this result:

var ball = document.querySelectorAll(".ball");
    var ball2 = document.querySelectorAll(".ball2");

    document.addEventListener("mousemove", fn, false);

    function fn(e) {
      for (var i = ball.length; i--; ) {
                                    /* -16 is the width/height ball divided by 2*/
        ball[i].style.left = e.clientX- 16 + "px";
        ball[i].style.top = e.clientY- 16 + "px";
      }
      for (var i = ball2.length; i--; ) {
        
        ball2[i].style.left = e.clientX - 5 + "px";
        ball2[i].style.top = e.clientY - 5 + "px";
        
      }
    }

.ball {
  display: block;
  background: #c8c8c8;
  position: fixed;
  z-index: 1000;
  width: 32px;
  height: 32px;
  opacity: 0.5;
  border-radius: 100%;
}

.ball2 {
  pointer-events: none;
  display: block;
  background: #c8c8c8;
  position: fixed;
  z-index: 1000;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  transition: left 80ms ease-out, top 80ms ease-out, box-shadow 60ms ease-out,
    opacity 0ms 300ms;
}

<span class="ball"></span>
  <span class="ball2"></span>

Hope this can help you