Color cycle logo on hover

..
                          .:+:-.
                        ..::*=:..
                     ....::####:...
                  ...-=::--*##=-::::=.
                ....::##############=.
          ........::#@#############@:.
        ..:%::=::::-#################%
      ....::*#####=##################+
  ......:==%#########################.
:::#:===+##########################-:.
   .....:--%#########################:
       ...::*#####-##################+
         .:=::-::::=#################@
          .........:#+#############+:.
                ....::############%@+.
                   ..:-:::-###=:::..:.
                     ....::###%:...
                        ...:-=:..
                          .:%::.

assets/sass/components/_logo.scss

@@ -1,4 +1,4 @@
-$_desaturate_amount: 35%;
+$_desaturate_amount: 25%;
 
 $_color_1: #ff6800;
 $_color_2: #e8ff00;
@@ -16,14 +16,102 @@ $_color_4_dark: desaturate($_color_4, $_desaturate_amount);
   margin-bottom: 1em;
 }
 
-.logo__color_1 { fill: $_color_1; }
-.logo__color_2 { fill: $_color_2; }
-.logo__color_3 { fill: $_color_3; }
-.logo__color_4 { fill: $_color_4; }
+.logo__color_1 { fill: $_color_1; transition: fill 200ms ease; }
+.logo__color_2 { fill: $_color_2; transition: fill 200ms ease; }
+.logo__color_3 { fill: $_color_3; transition: fill 200ms ease; }
+.logo__color_4 { fill: $_color_4; transition: fill 200ms ease; }
+
+.logo__link:hover,
+.logo__link:focus {
+  .logo__color {
+    animation-duration: 0.6s;
+    animation-iteration-count: infinite;
+  }
+  .logo__color_1 {
+    animation-name: cycle_color_1;
+    fill: $_color_3;
+  }
+  .logo__color_2 {
+    animation-name: cycle_color_2;
+    fill: $_color_4;
+  }
+  .logo__color_3 {
+    animation-name: cycle_color_3;
+    fill: $_color_1;
+  }
+  .logo__color_4 {
+    animation-name: cycle_color_4;
+    fill: $_color_2;
+  }
+}
+
+@keyframes cycle_color_1 {
+  from { fill: $_color_1; }
+  25%  { fill: $_color_2; }
+  50%  { fill: $_color_3; }
+  75%  { fill: $_color_4; }
+  to   { fill: $_color_1; }
+}
+
+@keyframes cycle_color_2 {
+  from { fill: $_color_2; }
+  25%  { fill: $_color_3; }
+  50%  { fill: $_color_4; }
+  75%  { fill: $_color_1; }
+  to   { fill: $_color_2; }
+}
+
+@keyframes cycle_color_3 {
+  from { fill: $_color_3; }
+  25%  { fill: $_color_4; }
+  50%  { fill: $_color_1; }
+  75%  { fill: $_color_2; }
+  to   { fill: $_color_3; }
+}
+
+@keyframes cycle_color_4 {
+  from { fill: $_color_4; }
+  25%  { fill: $_color_1; }
+  50%  { fill: $_color_2; }
+  75%  { fill: $_color_3; }
+  to   { fill: $_color_4; }
+}
 
 @media (prefers-color-scheme: dark) {
   .logo__color_1 { fill: $_color_1_dark; }
   .logo__color_2 { fill: $_color_2_dark; }
   .logo__color_3 { fill: $_color_3_dark; }
   .logo__color_4 { fill: $_color_4_dark; }
+
+  @keyframes cycle_color_1 {
+    from { fill: $_color_1_dark; }
+    25%  { fill: $_color_2_dark; }
+    50%  { fill: $_color_3_dark; }
+    75%  { fill: $_color_4_dark; }
+    to   { fill: $_color_1_dark; }
+  }
+
+  @keyframes cycle_color_2 {
+    from { fill: $_color_2_dark; }
+    25%  { fill: $_color_3_dark; }
+    50%  { fill: $_color_4_dark; }
+    75%  { fill: $_color_1_dark; }
+    to   { fill: $_color_2_dark; }
+  }
+
+  @keyframes cycle_color_3 {
+    from { fill: $_color_3_dark; }
+    25%  { fill: $_color_4_dark; }
+    50%  { fill: $_color_1_dark; }
+    75%  { fill: $_color_2_dark; }
+    to   { fill: $_color_3_dark; }
+  }
+
+  @keyframes cycle_color_4 {
+    from { fill: $_color_4_dark; }
+    25%  { fill: $_color_1_dark; }
+    50%  { fill: $_color_2_dark; }
+    75%  { fill: $_color_3_dark; }
+    to   { fill: $_color_4_dark; }
+  }
 }

layouts/partials/header.html

@@ -1,7 +1,9 @@
 <header class="site-header" role="banner">
   <div class="site-header__container">
     <h1 class="logo__wrapper">
-      <a class="site-header__home-link" href="/">{{ partial "logo.svg" . }}</a>
+      <a class="site-header__home-link logo__link" href="/">
+        {{ partial "logo.svg" . }}
+      </a>
     </h1>
   </div>
 </header>

resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -454,23 +454,144 @@ main {
   margin-bottom: 1em; }
 
 .logo__color_1 {
-  fill: #ff6800; }
+  fill: #ff6800;
+  transition: fill 200ms ease; }
 
 .logo__color_2 {
-  fill: #e8ff00; }
+  fill: #e8ff00;
+  transition: fill 200ms ease; }
 
 .logo__color_3 {
-  fill: #00a9ff; }
+  fill: #00a9ff;
+  transition: fill 200ms ease; }
 
 .logo__color_4 {
+  fill: #b346e2;
+  transition: fill 200ms ease; }
+
+.logo__link:hover .logo__color,
+.logo__link:focus .logo__color {
+  animation-duration: 0.6s;
+  animation-iteration-count: infinite; }
+
+.logo__link:hover .logo__color_1,
+.logo__link:focus .logo__color_1 {
+  animation-name: cycle_color_1;
+  fill: #00a9ff; }
+
+.logo__link:hover .logo__color_2,
+.logo__link:focus .logo__color_2 {
+  animation-name: cycle_color_2;
   fill: #b346e2; }
 
+.logo__link:hover .logo__color_3,
+.logo__link:focus .logo__color_3 {
+  animation-name: cycle_color_3;
+  fill: #ff6800; }
+
+.logo__link:hover .logo__color_4,
+.logo__link:focus .logo__color_4 {
+  animation-name: cycle_color_4;
+  fill: #e8ff00; }
+
+@keyframes cycle_color_1 {
+  from {
+    fill: #ff6800; }
+  25% {
+    fill: #e8ff00; }
+  50% {
+    fill: #00a9ff; }
+  75% {
+    fill: #b346e2; }
+  to {
+    fill: #ff6800; } }
+
+@keyframes cycle_color_2 {
+  from {
+    fill: #e8ff00; }
+  25% {
+    fill: #00a9ff; }
+  50% {
+    fill: #b346e2; }
+  75% {
+    fill: #ff6800; }
+  to {
+    fill: #e8ff00; } }
+
+@keyframes cycle_color_3 {
+  from {
+    fill: #00a9ff; }
+  25% {
+    fill: #b346e2; }
+  50% {
+    fill: #ff6800; }
+  75% {
+    fill: #e8ff00; }
+  to {
+    fill: #00a9ff; } }
+
+@keyframes cycle_color_4 {
+  from {
+    fill: #b346e2; }
+  25% {
+    fill: #ff6800; }
+  50% {
+    fill: #e8ff00; }
+  75% {
+    fill: #00a9ff; }
+  to {
+    fill: #b346e2; } }
+
 @media (prefers-color-scheme: dark) {
   .logo__color_1 {
-    fill: #d2702d; }
+    fill: #df6e20; }
   .logo__color_2 {
-    fill: #c3d22d; }
+    fill: #cedf20; }
   .logo__color_3 {
-    fill: #2d9ad2; }
+    fill: #209fdf; }
   .logo__color_4 {
-    fill: #a46bbd; } }
+    fill: #a861c7; }
+  @keyframes cycle_color_1 {
+    from {
+      fill: #df6e20; }
+    25% {
+      fill: #cedf20; }
+    50% {
+      fill: #209fdf; }
+    75% {
+      fill: #a861c7; }
+    to {
+      fill: #df6e20; } }
+  @keyframes cycle_color_2 {
+    from {
+      fill: #cedf20; }
+    25% {
+      fill: #209fdf; }
+    50% {
+      fill: #a861c7; }
+    75% {
+      fill: #df6e20; }
+    to {
+      fill: #cedf20; } }
+  @keyframes cycle_color_3 {
+    from {
+      fill: #209fdf; }
+    25% {
+      fill: #a861c7; }
+    50% {
+      fill: #df6e20; }
+    75% {
+      fill: #cedf20; }
+    to {
+      fill: #209fdf; } }
+  @keyframes cycle_color_4 {
+    from {
+      fill: #a861c7; }
+    25% {
+      fill: #df6e20; }
+    50% {
+      fill: #cedf20; }
+    75% {
+      fill: #209fdf; }
+    to {
+      fill: #a861c7; } } }