<div class="shape">
  <div class="shape-l-big"></div>
  <div class="shape-l-med"></div>
  <div class="shape-l-small">
    <div class="shape-text">css</div>  
  </div>
</div>
<div class="shape">
  <div class="shape-l-big"></div>
  <div class="shape-l-med"></div>
  <div class="shape-l-small">
    <div class="shape-text">is</div>  
  </div>
</div>
<div class="shape">
  <div class="shape-l-big"></div>
  <div class="shape-l-med"></div>
  <div class="shape-l-small">
    <div class="shape-text">super</div>  
  </div>
</div>
<div class="shape">
  <div class="shape-l-big"></div>
  <div class="shape-l-med"></div>
  <div class="shape-l-small">
    <div class="shape-text">fuckin</div>  
  </div>
</div>
<div class="shape">
  <div class="shape-l-big"></div>
  <div class="shape-l-med"></div>
  <div class="shape-l-small">
    <div class="shape-text">cool</div>  
  </div>
</div>

$shape-1: polygon(93% 0, 100% 84%, 13% 100%, 0 11%);
$shape-2: polygon(100% 6%, 100% 91%, 6% 100%, 0 0);
$shape-3: polygon(100% 0, 94% 100%, 13% 100%, 0 11%);
$shape-4: polygon(100% 0, 100% 84%, 3% 100%, 0 15%);
$shape-5: polygon(100% 16%, 94% 100%, 3% 100%, 0 0);
$shape-6: polygon(90% 0, 100% 95%, 0 100%, 6% 0);
$shape-7: polygon(100% 0, 89% 100%, 0 100%, 8% 4%);
$shape-8: polygon(100% 4%, 89% 100%, 4% 100%, 0 1%);
$shape-9: polygon(95% 0, 100% 88%, 0 100%, 4% 9%);
$shape-10: polygon(100% 8%, 96% 90%, 6% 100%, 0 0);

@keyframes morph-1 {
  0% { clip-path: $shape-1; }
  20% { clip-path: $shape-2; }
  40% { clip-path: $shape-3; }
  60% { clip-path: $shape-4; }
  80% { clip-path: $shape-5; }
  100% { clip-path: $shape-1; }
}

@keyframes morph-2 {
  0% { clip-path: $shape-2; }
  20% { clip-path: $shape-5; }
  40% { clip-path: $shape-6; }
  60% { clip-path: $shape-7; }
  80% { clip-path: $shape-8; }
  100% { clip-path: $shape-2; }
}

@keyframes morph-3 {
  0% { clip-path: $shape-3; }
  20% { clip-path: $shape-8; }
  40% { clip-path: $shape-9; }
  60% { clip-path: $shape-10; }
  80% { clip-path: $shape-1; }
  100% { clip-path: $shape-3; }
}

@keyframes morph-4 {
  0% { clip-path: $shape-4; }
  20% { clip-path: $shape-10; }
  40% { clip-path: $shape-9; }
  60% { clip-path: $shape-8; }
  80% { clip-path: $shape-7; }
  100% { clip-path: $shape-4; }
}

@keyframes morph-5 {
  0% { clip-path: $shape-5; }
  20% { clip-path: $shape-7; }
  40% { clip-path: $shape-6; }
  60% { clip-path: $shape-5; }
  80% { clip-path: $shape-4; }
  100% { clip-path: $shape-5; }
}

@keyframes morph-6 {
  0% { clip-path: $shape-6; }
  20% { clip-path: $shape-4; }
  40% { clip-path: $shape-3; }
  60% { clip-path: $shape-2; }
  80% { clip-path: $shape-1; }
  100% { clip-path: $shape-6; }
}

@keyframes morph-7 {
  0% { clip-path: $shape-7; }
  20% { clip-path: $shape-10; }
  40% { clip-path: $shape-1; }
  60% { clip-path: $shape-9; }
  80% { clip-path: $shape-2; }
  100% { clip-path: $shape-7; }
}

@keyframes morph-8 {
  0% { clip-path: $shape-8; }
  20% { clip-path: $shape-7; }
  40% { clip-path: $shape-3; }
  60% { clip-path: $shape-6; }
  80% { clip-path: $shape-4; }
  100% { clip-path: $shape-8; }
}

@keyframes morph-9 {
  0% { clip-path: $shape-9; }
  20% { clip-path: $shape-8; }
  40% { clip-path: $shape-4; }
  60% { clip-path: $shape-10; }
  80% { clip-path: $shape-7; }
  100% { clip-path: $shape-9; }
}

@keyframes morph-10 {
  0% { clip-path: $shape-10; }
  20% { clip-path: $shape-5; }
  40% { clip-path: $shape-3; }
  60% { clip-path: $shape-8; }
  80% { clip-path: $shape-5; }
  100% { clip-path: $shape-10; }
}

* {
  box-sizing: border-box;
}

html, body {
  font-size: 8vw;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  @media all and (min-width: 420px) {
    flex-direction: row;     
    font-size: 6vw;
  }
}

.shape {

  align-items: center;
  justify-content: center;
  display: flex;
  height: 3.25rem;
  margin: 0 0.25rem;
  position: relative;
  width: 3.25rem;
  > * {
    animation-duration: 25s;
    animation-iteration-count: infinite;    
    animation-timing-function: cubic-bezier(.17,.67,.83,.67);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  &:nth-child(1) {
    .shape-l-big {
      animation-name: morph-1;
      background: #C5CAE9;
    }
    .shape-l-med {
      animation-name: morph-2;
      background: #3F51B5;
    }
    .shape-l-small {
      animation-name: morph-3;
    }
  }
  &:nth-child(2) {
    .shape-l-big {
      animation-name: morph-4;
      background: #FFECB3;
    }
    .shape-l-med {
      animation-name: morph-5;
      background: #FFC107;
    }
    .shape-l-small {
      animation-name: morph-6;
    }
  }
  &:nth-child(3) {
    .shape-l-big {
      animation-name: morph-7;
      background: #FFCCBC;
    }
    .shape-l-med {
      animation-name: morph-8;
      background: #FF5722;
    }
    .shape-l-small {
      animation-name: morph-9;
    }
  }
  &:nth-child(4) {
    .shape-l-big {
      animation-name: morph-10;
      background: #CFD8DC;
    }
    .shape-l-med {
      animation-name: morph-1;
      background: #607D8B;
    }
    .shape-l-small {
      animation-name: morph-4;
    }
  }
  &:nth-child(5) {
    .shape-l-big {
      animation-name: morph-8;
      background: #DCEDC8;
    }
    .shape-l-med {
      animation-name: morph-5;
      background: #8BC34A;
    }
    .shape-l-small {
      animation-name: morph-2;
    }
  }
}

.shape-l-big { 
  height: 98%;
  width: 98%;
}

.shape-l-med {
  height: 87.5%;
  width: 87.5%;
}

.shape-l-small {
  align-items: center;
  background: #212121;
  display: flex;
  justify-content: center;
  height: 75%;
  width: 75%;
}


.shape-text {
  display: block;
  color: #f1f1f1;
  font-family: "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
  font-size: 0.5rem;
  text-align: center;
  text-transform: uppercase;
}