SVG Scrolling Animation Drawing

index.html

<!-- SVG image credit to http://www.flaticon.com/authors/freepik -->
<h1>SVG animation</h1>
<h2>Scroll down and let the magic happen!</h2>

<svg id="glasses" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1068 610" enable-background="new 0 0 1068 610" xml:space="preserve">
<path fill="none" d="M469,253c0-65-102-90-182-90c-119,0-171,12-171,133c0,68,23,163,146,163c55,0,120-8,170-82C451,346,469,294,469,253z   M785,165c-99,0-179,23-179,88c0,24,9,74,28,112c35,66,90,94,171,94c125,0,150-64,150-190C955,190,912,165,785,165z M287,145  c104,0,190,37,249,37c65,0,137-36,268-36c49,0,158,16,206,22c7,1,9,2,9,10c1,16,1,32,1,49c0,6-3,8-6,8c-15,0-23,17-26,33  c-5,30-11,60-18,89c-22,88-75,118-169,118c-123,0-170-50-213-165c-12-30-13-62-52-62c-29,0-41,30-52,62c-33,85-75,164-217,164  c-52,0-127-21-153-83c-12-31-27-107-30-130c-3-15-10-24-24-29c-6-1-7-6-7-11c0-14,0-36,1-45c1-10,3-13,14-14C88,162,210,145,287,145  z"/>
</svg>

script.js

$(document).ready(function() { 
  
  /* get the real length of the path and set it for dasharray and dashoffset */
  // console.log(document.querySelector('path').getTotalLength())

  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 * ($newUnit / 100);
    $("path").css("stroke-dashoffset", $newUnit - $offsetUnit);
    $("polygon").css("stroke-dashoffset", $newUnit - $offsetUnit);
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Lato');

$font-family-sans-serif: 'Lato', sans-serif;
$color-green: #B9f442;
$color-green-dark: #0c6602;
$color-pink: #FB5858;

body {
  background-color: $color-green;
  color: $color-green-dark;
  font-family: $font-family-sans-serif;
  font-size: 1.2em;
  height: 1100px;
  text-align: center;
}

h1 {
  margin-bottom: 0;
}
h2 {
  margin-top: 0;
}

#glasses {
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 480px;
  position: fixed;
  right: 0;
  top: 0;
  width: 50%;
}

path {
  fill: none;
  stroke: $color-pink;
  stroke-dasharray: 4709.57;
  stroke-dashoffset: 4709.57;
  stroke-width: 6;
}

svg-scrolling-animation-drawing.markdown

SVG Scrolling Animation Drawing

A Pen by Giorgio Maria Duminuco on CodePen.

License.