1
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.