SVG Animation

index.html

<div class="svg-wrapper">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <svg class='shape' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 313.8 159.5" enable-background="new 0 0 313.8 159.5" xml:space="preserve">
    <polygon class='yellow' fill="#FFCF2B" points="205.9,58.2 22.4,135.5 261.5,72.3 "/>
    <polygon class='green' fill="#00C081" points="162.8,47.3 22.4,135.5 206.1,58.3 "/>
    <polygon class='shadow' fill="#BBBDBF" points="22.4,135.5 220.7,112.3 293.1,135.6 "/>
    <polygon class='blue' fill="#0076BF" points="273.7,31.8 151.6,18.5 22.3,135.5 162.9,47.4 206.1,58.3 "/>
    <path fill="none" stroke="#90C364" stroke-miterlimit="10" d="M275.6,31.1"/>
    <path fill="none" stroke="#90C364" stroke-miterlimit="10" d="M22.4,135.5"/>
  </svg>
</div>

style.css

html, body {
  background: #f2f2f2;
  height: 100%;
  overflow: hidden;
  text-align: center;
}
.svg-wrapper {
  height: 0px;
	margin: 0 auto;
  position: relative;
  top: 20%;
  width: 320px;
  background: #E0E0E0;
}
.yellow {
  fill: transparent;
  stroke-width: 2px;
  stroke-dashoffset: 0;
  stroke-dasharray: 10 40;
  stroke: #FFCF2B;
  animation: 3s .2s draw-yellow infinite;
}
.blue {
  fill: transparent;
  stroke-width: 2px;
  stroke-dashoffset: 40;
  stroke-dasharray: 100 40;
  stroke: #0076BF;
  animation: 3s .1s draw-blue infinite;
}
.green {
  fill: transparent;
  stroke-width: 2px;
  stroke-dashoffset: 0;
  stroke-dasharray: 10 40;
  stroke: #00C081;
  animation: 3s .3s draw-green infinite;
}
.shadow {
/*  fill: transparent;
  stroke-width: 2px;
  stroke-dashoffset: -110;
  stroke-dasharray: 10 40;
  stroke: #BBBDBF;*/
  animation: 3s .5s draw-shadow infinite;
}
@keyframes draw-yellow {
  0% {
    stroke-dasharray: 0 540;
    stroke-dashoffset: -75;
  }
  50% {
    fill: #FFCF2B;
    stroke-dasharray: 760;
    stroke-dashoffset: 0;
  }
  100% {
    fill: transparent;
    stroke-dasharray: 0 540;
    stroke-dashoffset: 5;
  }
}
@keyframes draw-blue {
  0% {
    stroke-dasharray: 0 540;
    stroke-dashoffset: -75;
  }
  50% {
    fill: #0076BF;
    stroke-dasharray: 760;
    stroke-dashoffset: 0;
  }
  100% {
    fill: transparent;
    stroke-dasharray: 0 540;
    stroke-dashoffset: -45;
  }
}
@keyframes draw-green {
  0% {
    stroke-dasharray: 140 540;
    stroke-dashoffset: -75;
  }
  50% {
    fill: #00C081;
    stroke-dasharray: 760;
    stroke-dashoffset: 0;
  }
  100% {
    fill: transparent;
    stroke-dasharray: 0 540;
    stroke-dashoffset: -175;
  }
}
@keyframes draw-shadow {
/*  0% {
    stroke-dasharray: 140 800;
    stroke-dashoffset: -600;
  }
  50% {
    fill: #BBBDBF;
    stroke-dasharray: 1060;
    stroke-dashoffset: 130;
  }
  100% {
    fill: transparent;
    stroke-dasharray: 0 860;
    stroke-dashoffset: 300;
  }*/
  0% {
    fill: transparent;
  }
  35% {
    fill: #BBBDBF;
  }
  100% {
    fill: transparent;
  }
}

SVG-Animation.markdown

SVG Animation

Inspired by https://glass.eleks.com/

A bit off in Safari.

Forked from Sean McCaffery's Pen SVG Animation.

A Pen by James Sterling on CodePen.

License.