DØ logo anim 2

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: 1;
  --gap-px: calc(var(--gap) * 1px);
  --size: 15;
	--size-px: calc(var(--size) * 1px);
  --fps: 60;
  --frame: calc(1000ms / var(--fps));
  --flicker-cycle: calc(var(--frame) * 8);
  --flicker-rotation: 4;
  --rotation-cycle: calc(var(--flicker-cycle) * var(--flicker-rotation));
  --rotations: 1;
  --lead-in: calc(var(--rotations) * var(--flicker-rotation));
  display: grid;
  grid-template: 1fr / 1fr 1fr;
  width: min-content;
  gap: var(--gap-px);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .logo {
    --gap: 0.5;
  }
}

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

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

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

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

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