SVG drawing on scroll

by Pranab Dey

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="frame">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" id="star-svg">
<g stroke="red" stroke-width="3" fill="none">
<path class="path" id="star-path" d="M0 0 L50 80 L0 80 L50 120 L0 120 L50 200"></path>
  </g>
</svg>
</div>

CSS

@media screen and (max-width: 568px) {
  svg{
    width: 300px;
    height: 300px;
    transition: 0.2s linear;
  }
}
.path,.path2 {
  stroke-dashoffset: 800;
  stroke-dasharray: 800;
}
svg {
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  max-width: 480px;
  max-height: 340px;
  transition: 0.2s linear;
}
.frame{
  height: 500px;
}

JavaScript

$(document).ready(function() {
  var $dashOffset = $(".path").css("stroke-dashoffset");
  $(window).scroll(function() {
    var $percentageComplete = (($(window).scrollTop() / ($("html").height() - $(window).height())) * 100);
    var $newUnit = parseInt($dashOffset, 10);
    var $offsetUnit = $percentageComplete * 5;
    $(".path").css("stroke-dashoffset", $newUnit - $offsetUnit);
  });
});