<svg width="100%" height="400" viewBox="0 0 1041 398" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill:white;fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
    <g transform="matrix(1,0,0,1,-86.6187,-180.708)">
        <g id="graph">
            <path d="M111,566L314,542L536,471L782,419L955,346L1099,213" stroke-dasharray="1073 1073" stroke-dashoffset="1073" style="fill:none;stroke:white;stroke-width:2px;"/>
            <g id="graphPoints">
              <g id="point" class="points">
                <g transform="matrix(1,0,0,1,0,-1)">
                    <circle cx="110.5" cy="566.5" r="11.5" style="fill:none;stroke:white;stroke-width:2px;"/>
                </g>
                <g transform="matrix(0.5,0,0,0.5,55.25,282.25)">
                    <circle cx="110.5" cy="566.5" r="11.5"/>
                </g>
                <g transform="matrix(1,0,0,1,-0.763723,30)">
                    <text x="87.02px" y="513.333px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:12px;">2012</text>
                </g>
            </g>
            <g id="point1" class="points" transform="matrix(1,0,0,1,202.667,-23.6667)">
                <g transform="matrix(1,0,0,1,0,-1)">
                    <circle cx="110.5" cy="566.5" r="11.5" style="fill:none;stroke:white;stroke-width:2px;"/>
                </g>
                <g transform="matrix(0.5,0,0,0.5,55.25,282.25)">
                    <circle cx="110.5" cy="566.5" r="11.5"/>
                </g>
                <g transform="matrix(1,0,0,1,-2.43038,30.6667)">
                    <text x="87.02px" y="513.333px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:12px;">2013</text>
                </g>
            </g>
            <g id="point2" class="points" transform="matrix(1,0,0,1,426.667,-95.6667)">
                <g transform="matrix(1,0,0,1,0,-1)">
                    <circle cx="110.5" cy="566.5" r="11.5" style="fill:none;stroke:white;stroke-width:2px;"/>
                </g>
                <g transform="matrix(0.5,0,0,0.5,55.25,282.25)">
                    <circle cx="110.5" cy="566.5" r="11.5"/>
                </g>
                <g transform="matrix(1,0,0,1,-7.43038,32.6667)">
                    <text x="87.02px" y="513.333px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:12px;">2014</text>
                </g>
            </g>
            <g id="point3" class="points" transform="matrix(1,0,0,1,671.667,-146.667)">
                <g transform="matrix(1,0,0,1,0,-1)">
                    <circle cx="110.5" cy="566.5" r="11.5" style="fill:none;stroke:white;stroke-width:2px;"/>
                </g>
                <g transform="matrix(0.5,0,0,0.5,55.25,282.25)">
                    <circle cx="110.5" cy="566.5" r="11.5"/>
                </g>
                <g transform="matrix(1,0,0,1,-4.43038,30.6667)">
                    <text x="87.02px" y="513.333px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:12px;">2015</text>
                </g>
            </g>
            <g id="point4" class="points"  transform="matrix(1,0,0,1,844.667,-219.667)">
                <g transform="matrix(1,0,0,1,0,-1)">
                    <circle cx="110.5" cy="566.5" r="11.5" style="fill:none;stroke:white;stroke-width:2px;"/>
                </g>
                <g transform="matrix(0.5,0,0,0.5,55.25,282.25)">
                    <circle cx="110.5" cy="566.5" r="11.5"/>
                </g>
                <g transform="matrix(1,0,0,1,-19.4304,26.6667)">
                    <text x="87.02px" y="513.333px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:12px;">2016</text>
                </g>
            </g>
            <g id="point5" class="points"  transform="matrix(1,0,0,1,989.167,-353.667)">
                <g transform="matrix(1,0,0,1,0,-1)">
                    <circle cx="110.5" cy="566.5" r="11.5" style="fill:none;stroke:white;stroke-width:2px;"/>
                </g>
                <g transform="matrix(0.5,0,0,0.5,55.25,282.25)">
                    <circle cx="110.5" cy="566.5" r="11.5"/>
                </g>
                <g transform="matrix(1,0,0,1,-4.93038,29.6667)">
                    <text x="87.02px" y="513.333px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:12px;">2017</text>
                </g>
            </g>
          </g>
        </g>
    </g>
</svg>

html {
  background-color: black;
}

svg {
  color: #5bf;
}

.points {
    opacity: 0;
    transition: 1s cubic-bezier(.3, 0, 0, 1.3);
  }
  .points.visible {
    opacity: 1;
  }

const getProgress = ({elapsed, total}) =>
  Math.min(elapsed / total, 1);

const easeOut = progress =>
  Math.pow(--progress, 5) + 1;

// Animate path
{
const element = document.querySelector("path");

const dashOffset = 1073;

const time = {
  start: performance.now(),
  total: 1500
};

const tick = now => {
  time.elapsed = now - time.start;
  const progress = getProgress(time);
  const easing = easeOut(progress);
  const position = dashOffset - (easing * dashOffset);
  element.setAttribute("stroke-dashoffset", position);
  
  if (progress < 1) {
    requestAnimationFrame(tick);
  } else {
    showPoints();
}
}
requestAnimationFrame(tick);
}

// Show points
const showPoints = () => {
  const graphPoints = Array.prototype.slice.call(document.querySelectorAll("#graphPoints > g"));

  let offset = 0;
      graphPoints.forEach(function(point) {
      
      setTimeout(function(){
        const currClass = point.getAttribute("class");
      point.setAttribute("class", currClass + " " + "visible");
      }, offset);
      offset += 50;
      
});
}