I've made this animation which shall be incorporated in the header of a webpage.Demo with compiled Sass and uncompiled ES6 code: (function () {  var graphs = document.querySelectorAll('.graph');  var head = document.querySelector('head');  var styleTag = document.createElement('style');  var graphLength = 0;  var css = '';  var iVisible = 0;  const ANIMATION_DURATION = 12000;   function setUpAnimation () {    if (styleTag.sheet) {      styleTag.sheet.deleteRule(0);    }    head.appendChild(styleTag);     iVisible =      (graphs.length - 1) === iVisible ? 0 : (iVisible + 1);      setVisibility(graphs, iVisible);                                                  css = `@keyframes moveGraphRight {        from {            stroke-dashoffset: ${graphLength};        }        to {            stroke-dashoffset: 0;        }    }`;    styleTag.sheet.insertRule(css, 0);    setTimeout(setUpAnimation, ANIMATION_DURATION);  }  function setVisibility (graphs, iVisible) {    graphs.forEach(function (graph, i) {      if (i !== iVisible) {        graph.style['display'] = 'none';      } else {        graph.style['display'] = 'block';      }    });                  }  graphs = Array.from(graphs);  graphLength = graphs[0].getTotalLength();  graphs.forEach(function(graph, i) {    graph.style['stroke-dasharray'] = graphLength;  });  setUpAnimation(); })();  html, body, .wrap {  height: 100%; }.wrap {  padding: 10px;  border: 3px solid white;  background-color: #6f6f6f;  display: flex;  justify-content: center;  align-items: center; }h1 {  text-transform: uppercase;  color: #c7ffff;  z-index: 10;  font-size: 6rem;  font-weight: 900;  font-family: Geneva, Tahoma, Verdana, sans-serif;  text-shadow: 6px 6px 24px #b3b3b3;  letter-spacing: 8px; }svg {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  margin: auto;  z-index: 1; }.graph {  stroke-width: 10;  fill: #6f6f6f;  animation: moveGraphRight 12s ease-out infinite; }.graph:nth-of-type(1) {  stroke: lime; }.graph:nth-of-type(2) {  stroke: #00cccc; }.graph:nth-of-type(3) {  stroke: magenta; }<div class=wrap>  <h1>Some headline</h1>  <svg       width=800px       height=496px                          sodipodi:docname=graph.svg       id=graphs>               <g>      <path                           class=graph stroke-linejoin=round stroke-linecap=round            d=m 20,145.93363 26.428571,235 54.999999,-300.428569 41.42857,247.857139 37.85715,-103.57142 55.71428,162.85714 84.28572,-257.142859 57.85714,219.999999 65.71428,-164.28571 61.42858,252.85714 65.71428,-318.571429 64.28572,382.857139 60.71428,-230 0,0 0,0 -0.71428,0            inkscape:connector-curvature=0 id=lime />      <path                           class=graph hidden stroke-linejoin=round stroke-linecap=round            d=m 20,155.93363 26.428571,221 54.999999,-305.428569 41.42857,160.857139 37.85715,-83.57142 55.71428,180.85714 84.28572,-237.142859 57.85714,209.999999 65.71428,-156.28571 61.42858,262.85714 65.71428,-310.571429 64.28572,352.857139 60.71428,-235 0,0 0,0 -0.71428,0            inkscape:connector-curvature=0 />      <path                           class=graph hidden stroke-linejoin=round stroke-linecap=round            d=m 20,155.93363 20.428571,221 54.999999,-295.428569 41.42857,170.857139 37.85715,-90.57142 55.71428,175.85714 84.28572,-217.142859 57.85714,219.999999 65.71428,-140.28571 61.42858,242.85714 65.71428,-300.571429 64.28572,340.857139 60.71428,-235 0,0 0,0 -0.71428,0            inkscape:connector-curvature=0 />    </g>  </svg></div>Additionally: The uncompiled Sass code.$primCol: lighten(#555, 10%);$strokeWidth: 10;$ANIMATION_DURATION: 12s;html, body, .wrap { height: 100%;}.wrap { padding: 10px; border: 3px solid white; background-color: $primCol; display: flex; justify-content: center; align-items: center;}h1 { text-transform: uppercase; color: darken(lightCyan, 5%); z-index: 10; font-size: 6rem; font-weight: 900; font-family: Geneva, Tahoma, Verdana, sans-serif; text-shadow: 6px 6px 24px lighten(grey, 20%); letter-spacing: 8px;}svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 1;}.graph { stroke-width: $strokeWidth; fill: $primCol; animation: moveGraphRight $ANIMATION_DURATION ease-out infinite;}.graph:nth-of-type(1) { stroke: lime;}.graph:nth-of-type(2) { stroke: darken(cyan, 10%);}.graph:nth-of-type(3) { stroke: magenta;}I would be grateful for remarks concerning the design or any weak points. 
Line Graph animation with SVG and ES6 template strings
javascript;animation;ecmascript 6;sass;svg