<div id="js_block" class="item">
  <button>Нажми</button>
</div>

#cursor {
  width: 30px;
  position: absolute;
  transform: translate(-50%, -50%);
}

#js_block {
  height: 200px;
  width: 200px;
  position: relative;
  overflow: hidden;
  background: #fafafa;
}
#js_block.active {
  cursor: none;
}
#js_block #cursor {
  display: none;
}

let cursor = `<div id="cursor"><svg viewBox="0 0 118.71 157.08" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-30.769 -29.215)"><path d="m82.634 81.029 60.033 37.593-19.541 11.662 26.349 45.356-17.426 10.651-27.33-45.022-21.635 12.911z"/><rect transform="rotate(46.46)" x="122.55" y="-61.004" width="10.691" height="40.625"/><rect transform="rotate(-.63422)" x="81.281" y="30.234" width="10.691" height="40.625"/><rect transform="rotate(-54.846)" x="-32.734" y="60.685" width="10.691" height="40.625"/><rect transform="rotate(233.45)" x="-125.46" y="-42.084" width="10.691" height="40.625"/> </g></svg></div>`;

let block = document.querySelector("#js_block");

block.onclick = function () {
  block.classList.add("active");
  this.insertAdjacentHTML("beforeend", cursor);
  block.onmousemove = function (e) {
    document.querySelector("#cursor").style.display = "block";
    document.querySelector("#cursor").style.left = e.pageX + "px";
    document.querySelector("#cursor").style.top = e.pageY + "px";
  };
};

block.onmouseout = function () {
  block.classList.remove("active");
};