Step 1

Assign a class to your SVG code embed.

Step 2

In the variables panel, establish the color sets for your logo's animation sequence.

Be sure to include the original logo colors in these sets as well.

Step 3

Create a set of base logo color variables and link them to the original color set.

Step 4

Copy the variable CSS from your base logo color set and link it paste it to the appropriate fill in your SVG.

Step 5

In a new code embed and define custom classes for each color set you wish to cycle through.

Use the base logo CSS variable, like 'logo-base--color-1', for each color. Removing the 'var()' and link it to the color set.

<style>
   
.color-set-1{
    --logo-base--color-1:var(--color-set-1--color-1);
    --logo-base--color-2:var(--color-set-1--color-2);
    --logo-base--color-3:var(--color-set-1--color-3);
}
.color-set-2{
    --logo-base--color-1:var(--color-set-2--color-1);
    --logo-base--color-2:var(--color-set-2--color-2);
    --logo-base--color-3:var(--color-set-2--color-3);
}
.color-set-3{
    --logo-base--color-1:var(--color-set-3--color-1);
    --logo-base--color-2:var(--color-set-3--color-2);
    --logo-base--color-3:var(--color-set-3--color-3);
}
.color-set-4{
    --logo-base--color-1:var(--color-set-4--color-1);
    --logo-base--color-2:var(--color-set-4--color-2);
    --logo-base--color-3:var(--color-set-4--color-3);
}
</style>

Step 6

Add the following code to enable smooth color transitions, replacing "color-logo" with your class from Step 1.

.color-logo svg path {
	transition: fill 3s ease-in-out;
}

This will enable the fill to transition smoothly between colors.

You can modify the timing by adjusting the '3' to your preference.

Step 7

Copy and paste code into the before </body> tag.

Remember to change the '.color-logo' to the same class in step 1.

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const containers = document.querySelectorAll('.color-logo');
    const colorClasses = ['color-set-1', 'color-set-2', 'color-set-3', 'color-set-4'];
    let currentSet = 0;

    function updateColors() {
      containers.forEach(container => {
        container.classList.remove(...colorClasses);

        container.classList.add(colorClasses[currentSet]);
      });

      currentSet = (currentSet + 1) % colorClasses.length;

      // Next update after 5 seconds (3s transition + 2s pause)
      setTimeout(pauseBeforeNext, 3000);
    }

    // 2s pause before next color set update
    function pauseBeforeNext() {
      setTimeout(updateColors, 2000);
    }
    pauseBeforeNext();
  });
</script>

Add more color sets by updating 'const colorClasses = ['color-set-1', 'color-set-2', 'color-set-3', 'color-set-4'];' with new class names matching those in Step 5.

Adjust animation duration by modifying 'setTimeout(pauseBeforeNext, 3000);' and change color transition pauses with 'setTimeout(updateColors, 2000);'.