svg drawing

by Michał Oręziak

HTML

<h2>Scroll down this window to draw a PM logo.</h2>
<p>Scroll back up to reverse the drawing.</p>

<svg>
  <path d="m 0.84521333,222.01448 c 0,-1.73533 23.83873667,-117.99739 30.99196767,-151.148586 l 1.29873,-6.01887 H 63.30557 93.47524 l 0.81645,8.1299 c 0.91874,9.14845 0.0789,22.74317 -2.40141,38.874696 -2.09841,13.64733 -4.0731,19.7036 -9.20128,28.21977 -3.28565,5.4564 -3.53507,6.24483 -1.31604,4.16016 2.53994,-2.38616 3.7895,-2.57215 17.2813,-2.57215 16.97452,0 15.95814,-1.28977 11.6515,14.78547 -1.58737,5.92512 -2.69743,10.96161 -2.46681,11.19221 0.2306,0.23074 4.94761,-5.51999 10.48222,-12.77918 l 10.0629,-13.1985 h 15.9091 c 11.97364,0 15.90413,0.35449 15.88905,1.43306 -0.013,0.78821 -1.53442,6.57338 -3.3854,12.85597 -1.85102,6.28263 -3.23205,11.55635 -3.06901,11.71939 0.16314,0.16314 4.65295,-5.60468 9.97754,-12.8172 l 9.68112,-13.11361 12.8976,-0.0387 12.89761,-0.0387 -0.01,6.01887 c -0.007,3.3104 -1.81157,12.9482 -4.01258,21.41735 -2.20141,8.46915 -4.00228,15.58908 -4.00228,15.82209 0,0.23301 1.80565,-0.95365 4.01258,-2.63695 5.54944,-4.23275 5.31129,-1.08253 -0.33496,4.43086 -4.8209,4.70752 -7.117,5.36788 -7.117,2.04692 0,-1.20909 2.3181,-11.14025 5.15137,-22.06923 2.83323,-10.92897 5.15481,-20.51576 5.15904,-21.30393 0.006,-1.05039 -3.02081,-1.43309 -11.33371,-1.43309 h -11.34112 l -11.87431,16.00703 c -10.99137,14.8168 -14.74043,18.5096 -14.74043,14.51928 0,-0.86594 1.80568,-7.53073 4.01258,-14.81072 2.20693,-7.27995 4.01261,-13.8105 4.01261,-14.51232 0,-0.88287 -4.14104,-1.17649 -13.44022,-0.95304 l -13.44021,0.32303 -12.05129,15.57267 c -10.84687,14.01631 -14.98085,17.98261 -14.93653,14.33066 0.008,-0.68307 1.77543,-7.81974 3.92698,-15.85926 l 3.91191,-14.6173 -12.812,0.0328 -12.812,0.0328 -12.54934,13.43798 c -31.310216,33.52729 -35.103923,37.32337 -36.202244,36.22507 -0.724216,-0.72424 0.01917,-4.49627 2.116558,-10.73782 l 3.232949,-9.62142 9.757567,-6.03733 c 10.78265,-6.67159 23.87499,-19.53634 28.73952,-28.23993 7.69332,-13.76484...

CSS

body {
  height: 2000px;
  background: #000;
  color: white;
}

svg {
  position: fixed;
  top: 15%;
  left: 40%;
  width: 400px;
  height: 210px;
  margin-left: -50px;
}

JavaScript

let pm = document.getElementById("pm");
let length = pm.getTotalLength();

pm.style.strokeDasharray = length;
pm.style.strokeDashoffset = length;

window.addEventListener("scroll", draw);

function draw() {
  let scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

  let path = length * scrollpercent;


  pm.style.strokeDashoffset = length - path;
}