<div class="container">
  <span class="ch1"> </span>
  <span class="ch2">F</span>
  <span class="ch3">r</span>
  <span class="ch4">o</span>
  <span class="ch5">n</span>
  <span class="ch6">t</span>
  <span class="ch7">e</span>
  <span class="ch8">n</span>
  <span class="ch9">d</span>
  <span class="ch10"> </span>
  <span class="ch11"> </span>
  <span class="ch12">C</span>
  <span class="ch13">o</span>
  <span class="ch14">m</span>
  <span class="ch15">m</span>
  <span class="ch16">u</span>
  <span class="ch17">n</span>
  <span class="ch18">i</span>
  <span class="ch19">t</span>
  <span class="ch20">y</span>
  <span class="ch21"> </span>
</div>

body {
  background-color: #004e58;
}

.container {
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
@font-face {
  font-family: "Dusseldot";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/108082/Dusseldot-variable-web.woff2")
      format("woff2 supports variations"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/108082/Dusseldot-variable-web.woff2")
      format("woff2-variations");
  font-display: swap;
  font-weight: 50 250;
}

span {
  font-size: 55px;
  font-family: "Dusseldot";
  text-shadow: -5px 6px 13px rgba(150, 150, 150, 1);
  height: 250px;
  position: absolute;
  width: 80px;
  // left: 800px;
  top: 50px;
  color: #f67d7e;
  transform-origin: bottom center;
  text-align: center;
  font-weight: 250;
}

@for $i from 1 through 100 {
  @keyframes spin#{$i} {
    0% {
      transform: rotate(($i * 17) + deg);
      font-variation-settings: "wdth" 50;
    }

    20% {
      font-variation-settings: "wdth" 145;
    }
    30% {
      font-variation-settings: "wdth" 155;
    }
    50% {
      font-variation-settings: "wdth" 250;
    }
    70% {
      font-variation-settings: "wdth" 155;
    }
    80% {
      font-variation-settings: "wdth" 145;
    }

    100% {
      transform: rotate((($i * 17) + 360) + deg);
      font-variation-settings: "wdth" 50;
    }
  }

  .ch#{$i} {
    transform: rotate(($i * 17) + deg);
    animation: spin#{$i} 10s linear infinite;
  }
}