.container
  .triangle
  .triangle
.container
  .triangle.shadow
  .triangle.shadow
a(href='https://dribbble.com/shots/5251211-Triangle' target='_blank') original artwork by Wenvery

$scale:2.3em;
$speed:3s;
$easing:cubic-bezier(0.645, 0.045, 0.355, 1);

$bg: #c5f9e2;
$color_1: #ff1668;
$color_2: #1626f5;

body{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background:$bg;
}

a{
  position:fixed;
  bottom:0;
  text-align:center;
  width:100%;
  padding:10px;
  color:rgba(black,0.3);
  z-index:12;
}

.container{
  position:absolute;
  &:last-of-type{z-index:-1;margin:1%}
  animation: rotate $speed linear infinite;
}

.triangle {
	position: relative;
	text-align: left;
  transform-origin: 33.33% 66.66%;
  
  &:before,&:after {
    content: '';
    position: absolute;
    background: inherit;
  }
  
  &,&:before,&:after {
    width:  $scale;
    height: $scale;
    border-top-right-radius: 20%;
  }
  
  &:before{
    transform: 
      rotate(-135deg) 
      skewX(-45deg) 
      scale(1.414,.707) 
      translate(0,-50%)
  }
  
  &:after{
    transform:
      rotate(135deg)
      skewY(-45deg)
      scale(.707,1.414)
      translate(50%)
  }
  
  &:first-of-type{
    background:$color_1;
    transform:
      rotate(-60deg)
      skewX(-30deg)
      scale(1,.866)
      translate(143.33%, 110%);
    animation: first $speed $easing infinite;
  }
  
  &:last-of-type{
    background:$color_2;
    transform:
      rotate(0deg)
      skewX(-30deg)
      scale(1,.866)
      translate(-100%,-4%);
    animation: last $speed $easing infinite;
  }
  
  &.shadow {
    &,&:before,&:after {
      background:darken($bg,8);
      backface-visibility: hidden;
      perspective: 1000;
      filter: blur(0.5em);
    }
  }
}

@keyframes rotate {
  from{transform:rotate(0deg)}
  to{transform:rotate(-360deg)}
}

@keyframes first {
  0%{transform:
      rotate(-60deg)
      skewX(-30deg)
      scale(1,.866)
      translate(143.33%, 110%);}
  33%{transform:
      rotate(-60deg)
      skewX(-30deg)
      scale(1,.866)
      translate(-76.67%, -120%);}
  66%{transform:
      rotate(-60deg)
      skewX(-30deg)
      scale(1,.866)
      translate(-76.67%, 112%);}
}

@keyframes last {
  0%{transform:
      rotate(0deg)
      skewX(-30deg)
      scale(1,.866)
      translate(-100%,-4%);}
  33%{transform:
      rotate(0deg)
      skewX(-30deg)
      scale(1,.866)
      translate(134%,-4%);}
  66%{transform:
      rotate(0deg)
      skewX(-30deg)
      scale(1,.866)
      translate(-89%,-214%);}
}

//https://dribbble.com/shots/5251211-Triangle