I am trying to make a custom cursor(circle as cursor). But the div is not visible however it is translating but is not visible.
HTML CODE
<body>
<div class="container">
<div class="cursor">
<!-- <svg height="100" width="100">
<circle cx="15%" cy="15%" r="12%" stroke-width="0"></circle>
</svg> -->
</div>
<div class="header">
<div class="menu-wrapper">
<div class="menu-stroke"></div>
<div class="menu-stroke"></div>
</div>
<div class="logo">
<a>
<img
src="https://uploads-ssl.webflow.com/60ec058b2e9d9a78efb4e45b/60f9757ec552987c5e48622c_logo.svg"
width="26"
height="36"
/>
</a>
</div>
<div class="contact">
<span class="contact-head">CONTACT</span>
<img
src="https://uploads-ssl.webflow.com/60ec058b2e9d9a78efb4e45b/60f04597b1bddea37f0be3c5_small-link.svg"
width= "26"
height="26"
/>
</div>
</div>
<div class="main-heading-wrapper">
<div class="heading-slider">
<div class="head-line-1">
<h1 class="head-h1 mb-0">Directrice Artistique Jr,</h6>
</div>
<div class="head-line-2">
<h1 class="head-h1">UX & UI designeuse</h6>
</div>
<div class="head-desc">
<h5 class="desc-content">Je crée des expériences digitales au service de l'utilisateur·rice.</h5>
</div>
</div>
</div>
</div>
</body>
CSS
.cursor {
width: 20px;
height: 20px;
z-index: 1000;
color: #fff5f0;
}
JAVASCRIPT
const cursor = document.querySelector('.cursor');
document?.body?.addEventListener('mousemove', onMouseMove);
function onMouseMove(e) {
TweenMax.to(cursor, 0, {
x: e.pageX,
y: e.pageY
})
}
This picture is to show that div has height and width and it is also translating but it is not visible