danbarber.me.hugo/assets/css/components/_logo.scss

:root {
  --color-1: hsl(28, 100%, 48%);
  --color-2: hsl(41, 100%, 50%);
  --color-3: hsl(69, 100%, 43%);
  --color-4: hsl(103, 80%, 46%);
  --color-5: hsl(200, 100%, 50%);
  --color-6: hsl(234, 100%, 68%);
  --color-7: hsl(278, 100%, 63%);
  --color-8: hsl(335, 85%, 63%);

  --color-1-p3: oklch(69.72% 0.2097 49.49133450146859);
  --color-2-p3: oklch(80.92% 0.1932 75.48);
  --color-3-p3: oklch(83.84% 0.2306 120.02);
  --color-4-p3: oklch(76.31% 0.2833 139.57);
  --color-5-p3: oklch(70.72% 0.1801 242.04198289887938);
  --color-6-p3: oklch(60.22% 0.2317 273.21);
  --color-7-p3: oklch(63.36% 0.2866 309.55425882845935);
  --color-8-p3: oklch(66.97% 0.292 358.57);

  @media (prefers-color-scheme: dark) {
    --color-1: hsl(28, 90%, 48%);
    --color-2: hsl(41, 90%, 50%);
    --color-3: hsl(69, 90%, 43%);
    --color-4: hsl(103, 70%, 46%);
    --color-5: hsl(200, 90%, 50%);
    --color-6: hsl(234, 90%, 68%);
    --color-7: hsl(278, 90%, 60%);
    --color-8: hsl(335, 80%, 63%);
  }
}

.logo__wrapper {
  width: 7rem;
  line-height: 0;
  padding-bottom: 0.5em;
}

.logo__color {
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-play-state: playing;
}

.logo__color_1 {
  animation-name: cycle_color_1;
}
.logo__color_2 {
  animation-name: cycle_color_2;
}
.logo__color_3 {
  animation-name: cycle_color_3;
}
.logo__color_4 {
  animation-name: cycle_color_4;
}

.logo__color_1 {
  fill: var(--color-1-p3);
}
.logo__color_2 {
  fill: var(--color-3-p3);
}
.logo__color_3 {
  fill: var(--color-5-p3);
}
.logo__color_4 {
  fill: var(--color-7-p3);
}

@keyframes cycle_color_1 {
  0%,
  100% {
    fill: var(--color-1-p3);
  }
  12.5% {
    fill: var(--color-2-p3);
  }
  25% {
    fill: var(--color-3-p3);
  }
  37.5% {
    fill: var(--color-4-p3);
  }
  50% {
    fill: var(--color-5-p3);
  }
  62.5% {
    fill: var(--color-6-p3);
  }
  75% {
    fill: var(--color-7-p3);
  }
  87.5% {
    fill: var(--color-8-p3);
  }
}

@keyframes cycle_color_2 {
  0%,
  100% {
    fill: var(--color-3-p3);
  }
  12.5% {
    fill: var(--color-4-p3);
  }
  25% {
    fill: var(--color-5-p3);
  }
  37.5% {
    fill: var(--color-6-p3);
  }
  50% {
    fill: var(--color-7-p3);
  }
  62.5% {
    fill: var(--color-8-p3);
  }
  75% {
    fill: var(--color-1-p3);
  }
  87.5% {
    fill: var(--color-2-p3);
  }
}

@keyframes cycle_color_3 {
  0%,
  100% {
    fill: var(--color-5-p3);
  }
  12.5% {
    fill: var(--color-6-p3);
  }
  25% {
    fill: var(--color-7-p3);
  }
  37.5% {
    fill: var(--color-8-p3);
  }
  50% {
    fill: var(--color-1-p3);
  }
  62.5% {
    fill: var(--color-2-p3);
  }
  75% {
    fill: var(--color-3-p3);
  }
  87.5% {
    fill: var(--color-4-p3);
  }
}

@keyframes cycle_color_4 {
  0%,
  100% {
    fill: var(--color-7-p3);
  }
  12.5% {
    fill: var(--color-8-p3);
  }
  25% {
    fill: var(--color-1-p3);
  }
  37.5% {
    fill: var(--color-2-p3);
  }
  50% {
    fill: var(--color-3-p3);
  }
  62.5% {
    fill: var(--color-4-p3);
  }
  75% {
    fill: var(--color-5-p3);
  }
  87.5% {
    fill: var(--color-6-p3);
  }
}