to use a svg image, use https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
in HTML at bottom:
<script>
jQuery("body").append('<div class="pointer"></div>');
jQuery("body").on("mousemove", function(e) {
jQuery(".pointer").css({ top: e.clientY + "px", left: e.clientX + "px" });
});
</script>
In "Custom CSS":
*{
cursor: none!important;
}
.pointer {
cursor: none;
position: fixed;
text-align: center;
width: 52px;
height: 52px;
z-index: 1000;
transform: translate(-50%, -50%);
pointer-events: none;
mix-blend-mode: difference;
overflow: hidden;
border-radius: 50%;
background-image: url("http://localhost:10020/wp-content/uploads/2024/09/close-button.svg");
background-position: center;
background-repeat: no-repeat;
}
this is the part u change:
background-image: url("http://localhost:10020/wp-content/uploads/2024/09/close-button.svg");
get the url from wp-admin media library, when u click on an image u get File URL:
[image: 1739952320433-screenshot-2025-02-19-at-09.05.14.png]
