<canvas id="canvas" width="100" height="100"></canvas>
<div class="scrollText">
    <t>Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll</t>
</div>

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap');

:root{
    background: black;
    font-family: Comfortaa;
}

#canvas{
    position: fixed;
    top: 2px;
    left: 2px;
    transform: rotate(-72deg);
/*     transform: rotate(-90deg); */
}
.scrollText{
    color: white;
    font-size: 100px;
    margin: 120px;
}

// if you're here to copy this, please write your own code, mine is terrible

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    windowHeight,
    scrolled,
    docHeight,
    scrollPer;

function render(){
    windowHeight = window.innerHeight;
    scrolled = window.pageYOffset,
    docHeight = Math.max(document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight,
    document.body.scrollHeight, document.body.offsetHeight),
    scrollPer = scrolled / (docHeight - windowHeight);
    
    ctx.clearRect(0, 0, 100, 100);
    ctx.lineWidth = 5;
    makeArc('#666666',50,50,40,0, 2 * Math.PI);
    makeArc('#FFFFFF',50,50,40, ((scrollPer-0.1)*2)*Math.PI, (scrollPer*2)*Math.PI)
}
function makeArc(color,one,two,three,four,five){
    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.arc(one,two,three,four,five); // for the original change four to 0, then uncomment line 13 of css
    ctx.stroke();
}

window.onresize = function(){ render() };
window.onscroll = function(){ render() };
render();

// preview
window.onmousemove = function(){ clearInterval(previewInterval); };
function preview(){
    if(scrollPer == 1){
        clearInterval(previewInterval);
    }
    window.scrollTo({ top: scrolled + 20, behavior: 'smooth' })
}
var previewInterval = setInterval(preview, 100);