circle, strokeDashoffset, scrollTop, 그래프

<div class="content" style="height: 3000px; color: #fff;">
    <p style="position: fixed;">
       <span class="darray"></span>
    </p>
</div>

<svg id="circleIndicator" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="25" stroke="yellow" stroke-width="3" fill="none"></circle>
    <text id="scrollPercentText" x="50" y="50" text-anchor="middle" dominant-baseline="middle" Fill="#fff" font-size="16">0%</text>
</svg>

let circleIndicator= document.getElementById('circleIndicator');
let circle = circleIndicator.querySelector('circle');
let textElement = document.getElementById('scrollPercentText');
let darrayElement = document.querySelector('.darray');

let radius = circle.getAttribute('r');
let circum = 2 * Math.PI * radius;
circle.style.strokeDasharray = circum;

function setProgress(percent){
    let offset = circum * (1 - percent / 100);
    circle.style.strokeDashoffset = offset;
    textElement.textContent = Math.round(percent) + '%';
    darrayElement.innerHTML = `strokeDasharray: ${circum.toFixed(2)}<br>strokeDashoffset: ${offset.toFixed(2)}`;
}

window.addEventListener('scroll', ()=> {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    const scrollPercent = (scrollTop / scrollHeight) * 100;
    setProgress(scrollPercent);
});

window.addEventListener('mousemove', (e) =>{
    circleIndicator.style.left = e.clientX + 'px';
    circleIndicator.style.top = e.clientY + 'px';
})
setProgress(0)