DØ logo anim

by phloe

HTML

<div class="logo">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

html {
  height: 100%;
  background: #222;
}
body {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 100%;
}

.logo {
  --gap: 0.5;
  --gap-px: calc(var(--gap) * 1px);
  --size: 15px;
  --fps: 60;
  --frame: calc(1000ms / var(--fps));
  --flicker-cycle: calc(var(--frame) * 8);
  --rotation-cycle: calc(var(--flicker-cycle) * 4);
  display: grid;
  grid-template: 1fr / 1fr 1fr;
  width: min-content;
  gap: var(--gap-px);
}

.logo div {
   background: #FFF;
   width: var(--size);
   aspect-ratio: 1;
   opacity: 0;
}

.logo > :nth-child(1) {
  animation:
    flicker var(--flicker-cycle) 23 step-start forwards,
    clip var(--flicker-cycle) 23 step-start forwards,
    rotate var(--rotation-cycle) 6 step-start forwards;
  grid-area: 1 / 1;
}

.logo > :nth-child(2) {
  animation:
     flicker var(--flicker-cycle) calc(var(--rotation-cycle) * 2) 1 step-start forwards,
     clip var(--flicker-cycle) calc(var(--rotation-cycle) * 2) 1 step-start forwards;
  transform: rotate(270deg);
  grid-area: 1 / 2;
}

.logo > :nth-child(3) {
  animation:
     flicker var(--flicker-cycle) calc(var(--rotation-cycle) * 4) 1 step-start forwards,
     clip var(--flicker-cycle) calc(var(--rotation-cycle) * 4) 1 step-start forwards;
  transform: rotate(90deg);
  grid-area: 1 / 2;
}

.logo > :nth-child(4) {
  animation: flicker var(--flicker-cycle) calc(var(--flicker-cycle) * 24) step-start forwards;
  grid-area: 1 / 2;
  aspect-ratio: auto;
  margin: calc(var(--size) + var(--gap-px)) auto auto calc(var(--size) + var(--gap-px));
	width: max(var(--size) * 0.05, 1px);
	height: var(--gap-px);
}

@keyframes flicker {
  0%, 50% {
    opacity: 0;
  }
  25%, 75%, 100% {
    opacity: 1;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(270deg);
  }
  25% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(90deg);
  }
  75% {
    transform: rotate(180deg);
  }
  100%...