x
<html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>body { height: 2000px; background: #f1f1f1;}#mySVG { position: fixed; top: 15%; width: 400px; height: 210px; margin-left:-50px;}</style></head><body><h2>Scroll down this window to draw a triangle.</h2><p>Scroll back up to reverse the drawing.</p><svg id="mySVG"> <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z" /> Sorry, your browser does not support inline SVG.</svg><script>// Get the id of the <path> element and the length of <path>var triangle = document.getElementById("triangle");var length = triangle.getTotalLength();// The start position of the drawingtriangle.style.strokeDasharray = length;// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll drawtriangle.style.strokeDashoffset = length;// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolledwindow.addEventListener("scroll", myFunction);function myFunction() {var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight); var draw = length * scrollpercent;