Hypercube or Telegraf Animated Logo?

hypercube.css

:root {
  --ouset-cube-border-size: 10px;
  --ouset-cube-border-color: rgb(220 38 38);
  --inset-shadow-color-primary: rgba(0 0 0 / 0.3);
  --inset-shadow-color-secondary: rgba(0 0 0 / 0.1);
  --inset-margin: 30px;
  --block-size: 200px;
  --shape-size: 150px;
}

body {
  background: rgb(30 41 59);
  zoom: 3.5;
}

.container {
  display: flex;
}

.block {
  position: absolute;
  width: var(--block-size);
  height: var(--block-size);
  transform: translate3d(-50%, -50%, 0);
  left: 50%;
  top: 50%;
}

.shape {
  width: var(--shape-size);
  height: var(--shape-size);
}

.cube {
  position: relative;
  transition: transform 16s;
  transform-style: preserve-3d;
}


.cube.outer {
  width: var(--block-size);
  height: var(--block-size);
  transform-style: preserve-3d;
  animation: spin 10s infinite cubic-bezier(0.67, 0.03, 0.31, 0.98);
}

.cube.outer > .cube {
  width: var(--shape-size);
  height: var(--shape-size);
  transform: translateX(10px) translateY(10px);
  animation: spin-inner 8.33s infinite cubic-bezier(0.67, 0.03, 0.31, 0.98);
}

.side {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: all 0.2s linear;
  border: var(--ouset-cube-border-size) solid var(--ouset-cube-border-color);
  box-shadow: inset 0 -20px 20px -10px var(--inset-shadow-color-primary), inset 20px 0 20px -10px var(--inset-shadow-color-primary), inset 0 20px 20px -10px var(--inset-shadow-color-primary), inset -20px 0 20px -10px var(--inset-shadow-color-primary);
  box-sizing: border-box;
}


.side.left {
  transform: translateX(calc(0px - var(--shape-size) / 2)) rotateY(-90deg);
}

.cube.outer > .side.left {
  transform: translateX(-100px) rotateY(-90deg);

}

.side.right {
  transform: translateX(calc(var(--shape-size) / 2)) rotateY(90deg);
}

.cube.outer >.side.right {
  transform: translateX(100px) rotateY(90deg);
}

.side.top {
  transform: translateY(calc(0px - var(--shape-size) / 2)) rotateX(90deg);
}

.cube.outer > .side.top {
  transform: translateY(-100px) rotateX(90deg);
}

.cube.outer > .cube .side {
  border: none;
  background: #fff;
  box-shadow: inset 0 -20px 20px -10px var(--inset-shadow-color-secondary), inset 20px 0 20px -10px var(--inset-shadow-color-secondary), inset 0 20px 20px -10px var(--inset-shadow-color-secondary), inset -20px 0 20px -10px var(--inset-shadow-color-secondary);
}

.side.bottom {
  transform: translateY(calc(var(--shape-size) / 2)) rotateX(-90deg);
}

.cube.outer > .side.bottom {
  transform: translateY(100px) rotateX(-90deg);
}

.side.front {
  transform: translateZ(calc(var(--shape-size) / 2));
}

.cube.outer > .side.front {
  transform: translateZ(100px);
}

.side.back {
  transform: translateZ(calc(0px - var(--shape-size) / 2)) rotateX(180deg);
}

.cube.outer > .side.back {
  transform: translateZ(-100px) rotateX(180deg);
}



@keyframes spin {
  0% {
    transform: rotateX(45deg) rotateY(-45deg);
  }

  25% {
    transform: rotateX(-45deg) rotateY(-45deg);
  }

  50% {
    transform: rotateX(-45deg) rotateY(45deg);
  }

  75% {
    transform: rotateX(45deg) rotateY(45deg);
  }

  100% {
    transform: rotateX(45deg) rotateY(-45deg);
  }

}

@keyframes spin-inner {
  0% {
    transform: translateX(var(--inset-margin)) translateY(var(--inset-margin)) rotateY(-45deg) rotateX(45deg);
  }

  20% {
    transform: translateX(var(--inset-margin)) translateY(var(--inset-margin)) rotateY(-225deg) rotateX(225deg);
  }

  40% {
    transform: translateX(var(--inset-margin)) translateY(var(--inset-margin)) rotateY(-225deg) rotateX(225deg);
  }

  60% {
    transform: translateX(var(--inset-margin)) translateY(var(--inset-margin)) rotateY(-405deg) rotateX(225deg);
  }

  80% {
    transform: translateX(var(--inset-margin)) translateY(var(--inset-margin)) rotateY(-225deg) rotateX(405deg);
  }

  100% {
    transform: translateX(var(--inset-margin)) translateY(var(--inset-margin)) rotateY(-45deg) rotateX(405deg);
  }
}


/* Hide Edit on jsbin button */
#edit-with-js-bin {
  display: none !important;
  opacity: 0 !important;
}

hypercube.html

<div class="container">
  <div class="block">
    <div class="shape">
      <div class="cube outer">
        <div class="side left"></div>
        <div class="side right"></div>
        <div class="side top"></div>
        <div class="side bottom"></div>
        <div class="side front"></div>
        <div class="side back"></div>

        <div class="cube">
          <div class="side left"></div>
          <div class="side right"></div>
          <div class="side top"></div>
          <div class="side bottom"></div>
          <div class="side front"></div>
          <div class="side back"></div>
        </div>
      </div>
    </div>
  </div>
</div>