Cacher is the code snippet organizer for pro developers

<h1>Bauhaus</h1>
<h2>Asagiri Design</h2>


<svg>
  <polygon id="triangle" points="400,100 140, 550 660,550"/>
</svg>
<svg><use xlink:href="#triangle" /></svg>
<svg><use xlink:href="#triangle" /></svg>
<svg><use xlink:href="#triangle" /></svg>
<svg><use xlink:href="#triangle" /></svg>
<svg><use xlink:href="#triangle" /></svg>
<svg><use xlink:href="#triangle" /></svg>
<svg><use xlink:href="#triangle" /></svg>
<svg><use xlink:href="#triangle" /></svg>
<svg><use xlink:href="#triangle" /></svg>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

@import "compass/css3";
@import url('https://fonts.googleapis.com/css?family=BenchNine');

$animation-duration: 6s;
$number-of-triangles: 4;
$size: 800px;

html {
  background: #000;
}

body {
  height: $size;
  left: 50%;
  color: white;
  margin-left: -$size/2;
  margin-top: -$size/2;
  perspective: 1000px;
  position: absolute;
  top: 50%;
  width: $size;
  font-family: 'BenchNine', sans-serif;
}

h1 {
  color: white;
  position: absolute;
  top: calc(50% - 40px);
  left: calc(50% - 100px);
  background: #999;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 80px;
  box-sizing: border-box;
  animation-name: title;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}
h2 {
  position: absolute;
  top: calc(85% - 40px);
  left: calc(50% - 150px);
  // background: #999;
  color: white;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 80px;
  box-sizing: border-box;
}

svg {
  animation: dash $animation-duration ease-in-out forwards infinite alternate;
  fill: none;
  height: 100%;
  position: absolute;
  stroke-dasharray: 1560;
  stroke-dashoffset: 1560;
  stroke-width: 10px;
  width: 100%;
  box-shadow: 0px 0px 8px orange;

  @for $i from 1 through $number-of-triangles {
    &:nth-child(#{$i}) {
      stroke: hsla(((360 / $number-of-triangles) * $i), 120, 40, 0.8);
      transform: rotate((720deg / $number-of-triangles) * $i*1.2);
    }
  }
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
    transform: rotate(120deg);
  }
}

@keyframes title {
  0% {
    background: tomato;
    border-radius: 40px 0 40px 0;
  }
  50% {
    background: teal;
    // border-radius: 0;
    transform: rotate(0deg);
  }
  80% {
    background: orange;
    border-radius: 0 40px 0 40px;
    transform: rotate(180deg);
  }
  100% {
    background: tomato;
    border-radius: 40px 0 40px 0;
    transform: rotate(360deg);
  }
}