I have implemented a code which draws a line svg stroke from a specific position to the end of an element but what my problem is that the svg line dashoffset is being generated from the very top of my window which I want it to be triggered right after the viewport of mentioned svg container.

example: https://altsdigital.com/

var triangle = document.getElementById("star-path");
var length = triangle.getTotalLength();

triangle.style.strokeDasharray = length;

triangle.style.strokeDashoffset = length;

window.addEventListener("scroll", myFunction);

function myFunction(e) {

    var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    // console.log(scrollpercent)
    var draw = length * scrollpercent;
    triangle.style.strokeDashoffset = length - draw;
}