<h1>Scroll To Draw</h1>

<svg xmlns="http://www.w3.org/2000/svg" width="71.086" height="71.092" viewBox="0 0 71.086 71.092" id="star-svg">
  <path fill="none" stroke="white" stroke-width="1" data-name="Exclusion 8" id="frontendor-path" d="M35.544,71.092a35.556,35.556,0,0,1-13.835-68.3A35.555,35.555,0,0,1,49.379,68.3,35.317,35.317,0,0,1,35.544,71.092ZM24.026,28.4h0l-1.575,1.576L21.09,31.334l-4.983,4.988-1.361,1.357L9.762,42.665l4.983,4.984,1.361,1.36,4.983,4.984,1.361,1.361,1.635,1.635h9.97l-1.639-1.635L27.434,50.37,26.073,49.01,21.09,44.026l-1.36-1.361L21.09,41.3l4.983-4.983,1.361-1.361,4.983-4.983L33.993,28.4H24.026Zm13.644,0h0l-2.932,2.932L29.75,36.321,28.39,37.679l-4.983,4.987L28.39,47.65l4.987-4.984L34.737,41.3l4.983-4.983L47.64,28.4Zm-.6-14.3h0l-.014.014,14.309,14.31L37.1,42.693h9.967l9.28-9.277,4.983-4.987-4.983-4.984L47.006,14.1Z" fill="#fff"/>
</svg>

body {
  /* feel free to change height */
  height: 5000px;
  background: linear-gradient(
    to bottom,
    #6b36ea,
    #530ef5
  );
}

h1 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  color: white;
  text-align: center;
  font-size: 22px;
  letter-spacing: 5px;
  font-weight: 100;
  padding: 25px 15px;
}

#star-svg {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
}

// Get a reference to the <path>
var path = document.querySelector('#frontendor-path');

// Get length of path... ~577px in this case
var pathLength = path.getTotalLength();

// Make very long dashes (the length of the path itself)
path.style.strokeDasharray = pathLength + ' ' + pathLength;

// Offset the dashes so the it appears hidden entirely
path.style.strokeDashoffset = pathLength;

// Jake Archibald says so
// https://jakearchibald.com/2013/animated-line-drawing-svg/
path.getBoundingClientRect();

// When the page scrolls...
window.addEventListener("scroll", function(e) {
 
  // What % down is it? 
  // https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript/2387222#2387222
  // Had to try three or four differnet methods here. Kind of a cross-browser nightmare.
  var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    
  // Length to offset the dashes
  var drawLength = pathLength * scrollPercentage;
  
  // Draw in reverse
  path.style.strokeDashoffset = pathLength - drawLength;
    
  // When complete, remove the dash array, otherwise shape isn't quite sharp
 // Accounts for fuzzy math
  if (scrollPercentage >= 0.99) {
    path.style.strokeDasharray = "none";
    
  } else {
    path.style.strokeDasharray = pathLength + ' ' + pathLength;
  }
  
});