I've been thinking this kind of thing in the past days. If I can do the text-fill-color inside the text. Like this Link. What this trying to do is to when you hover it.. it will fill the text color with blue but what I want to happen is like... I can put the any shape inside the text cause I've seen some projects that looks like it. I have sample code here
let mouseCursor = document.querySelector('.cursor')
window.addEventListener("mousemove", cursor)
function cursor(e) {
mouseCursor.style.top = e.pageY + "px";
mouseCursor.style.left = e.pageX + "px"
} <
/script>*,
*::after,
*::before {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
background: black;
display: flex;
align-items: center;
justify-content: center;
}
.text {
margin: 0 auto;
}
.text h1 {
color: orange;
}
.text h2 {
font-size: 125px;
background: radial-gradient( red 20%, orange 60%, red 20%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* background-size: 100%;
background-position: 50%; */
}
.cursor {
width: 2rem;
height: 2rem;
border: 2px solid gray;
background: rgb(20, 192, 97);
border-radius: 50%;
z-index: 0;
position: absolute;
transform: translate(-50%, -50%);
position: none;
transition: all 0.5 ease;
transition-property: background, transform;
}<div class="cursor"></div>
<div class="text">
<h1> HELLO WORLD </h1>
<h2> HELLO WORLD </h2>
</div>As you see inside there is like a circle inside but it is just a circle for a gradient but I want my mouse cursor or maybe I want to put there a circle inside without using gradient color inside the text. If it's possible, I need a slightest clue or something else. need help about here will be a big thanks :)