<figure>
  <svg id="bolt1" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" xml:space="preserve">
    <polygon points="40,1 17,37 31,37 24,63 50,27 36,27" />
  </svg>
    <svg id="bolt2" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" xml:space="preserve">
    <polygon points="36,27 50,27 24,63 31,37   17,37 40,1" data-start="100" />
  </svg>
</figure>

body {
  height: 100vh;
  background: rgb(0, 45, 45);
  background: linear-gradient(
    20deg,
    rgba(0, 45, 45, 1) 0%,
    rgba(0, 0, 0, 1) 51%,
    rgba(0, 45, 45, 1) 89%
  );
}

figure {
  width: 300px;
  margin: 20px auto;
  position: relative;
  animation: rotate 10s infinite linear forwards;
  transform-style: preserve-3d;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

svg:nth-of-type(1){
  transform: translateZ(-20px)
}

svg * {
  fill: none;
  stroke: #fff;
  stroke-width: .3;
  stroke-linejoin: bevel;
  stroke-miterlimit: 10;
}

@keyframes rotate {
  from {
    transform: rotateY(50deg)
  }
  to {
    transform: rotateY(410deg)
  }
}

const options = {
  start: "autostart",
  type: "scenario",
  duration: 200,
  animTimingFunction: Vivus.EASE_OUT
};

new Vivus("bolt1", options);
new Vivus("bolt2", options);