<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <div class="lDraw"> <svg class="lDraw_sec" viewBox="0 0 1064 4500" stroke-width="2" fill="none" stroke="#194375"> <path id="triangle" d="M249,0l730,862L0,1556l1038,793L21,3202l1043,608l-759,759"></path> </svg> </div> </div> </div>

#mySVG{position:fixed;width:400px;height:210px;} .lDraw_sec{width:1000px;margin-left:100px;} .lDraw{position:absolute;top:0;height:500px;z-index:-9;}

var triangle = document.getElementById("triangle"); var length = triangle.getTotalLength(); triangle.style.strokeDasharray = length; triangle.style.strokeDashoffset = length; window.addEventListener("scroll", myFunction); function myFunction() { alert("Im in"); var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight); var draw = length * scrollpercent; triangle.style.strokeDashoffset = length - draw; }