JSFiddle - React, Tailwind, and code Playground

by TsarS

HTML

<div>
        <svg height="100vh" width="100%" stroke-width="4">
        <path id="star-svg"  d="M10 10  l 75 70 l -75 130 l 75 240 l-75 400" fill="transparent" stroke="#ff4081"/>        
        </svg>
    </div>

JavaScript

var path = document.querySelector('#star-svg');
    var pathLength = path.getTotalLength();

    path.style.strokeDasharray = pathLength + ' ' + pathLength;
    path.style.strokeDashoffset = pathLength;
    
     window.addEventListener('scroll', drawSvg);
     
         function drawSvg() {
        var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) /       (document.documentElement.scrollHeight - document.documentElement.clientHeight);
        var drawLength = pathLength * scrollPercentage;
        path.style.strokeDashoffset = pathLength - drawLength;
        if (scrollPercentage >= 0.99) {
            path.style.strokeDasharray = "none";
        } else {
            path.style.strokeDasharray = pathLength + ' ' + pathLength;
        }
    }