.wrapper
  - for (let j = 1; j <= 4; j++)
      .triangle(style=`--i: ${j}; --l: ${[1,4].includes(j) ? 0 : 1}; --t: ${[1,2].includes(j)  ? 0 : 1}`)

$filter: contrast(20%) sepia(100%) hue-rotate(270deg) contrast(450%);
$t: 3s;
$dark: black;
$light: white;

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(1vmin 1vmin 1vmin rgba(0,0,0,0.5));
  background: radial-gradient(#545454, #212121);
}

.wrapper {
  position: relative;
  width: 85vmin;
  height: 85vmin;
  background: $light;
  animation: i $t*2 steps(1) infinite;
  overflow: hidden;
}

@keyframes i {
  0%, 100% { filter: $filter; }
  50% { filter: invert(100%) $filter; }
}

.triangle {
  $s: 70%;
  display: block;
  width: $s;
  height: $s;
  position: absolute;
  left: calc(var(--l) * 30%);
  top: calc(var(--t) * 30%);
  transform-origin: center center;
  animation: 
    s $t cubic-bezier(0.65, 0.18, 0.38, 0.85) infinite, 
    triangle $t steps(1) infinite;
}

@keyframes triangle {
  0% { 
    mix-blend-mode: darken;
    background-image: linear-gradient(45deg, $dark 0, $dark 50%, $light 50%, $light 100%);
  }
  50% { 
    mix-blend-mode: difference;
    background-image: linear-gradient(225deg, $dark 0, $dark 50%, $light 50%, $light 100%);
  }
}

@keyframes s {
  0% {
    transform: rotate(calc(90deg * var(--i))) scale(1.5);
  }
  40%, 50% {
    transform: rotate(calc(90deg * var(--i))) scale(0.43);
  }
  100% {
    transform: rotate(calc(90deg * (var(--i) + 2))) scale(0.43);
  }
}