JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<svg id="a" xmlns="http://www.w3.org/2000/svg" width="100mm" height="100mm" viewBox="0 0 283.5 283.5" class="coloured">
  <defs>
    <style>
      .b {
        fill: #ff4989;
      }
      .c {
        fill: #fef3ee;
      }
      .d {
        fill: #ff1761;
      }
      .e {
        fill: #ffbc25;
      }
      .f {
        fill: #ff5c24;
      }
      .g {
        fill: #66dafc;
      }
      .h {
        fill: #975333;
      }
      .i {
        fill: #1dd89f;
      }
    </style>
  </defs>
  <rect class="c" x="0" y="0" width="283.5" height="283.5" />
  <g>
    <path class="d" d="M107.4,36.7h0c0-1.6-1.3-2.8-2.8-2.8h-22.7c-1.6,0-2.8,1.3-2.8,2.8h0c0,1.6,1.3,2.8,2.8,2.8h22.7c1.6,0,2.8-1.3,2.8-2.8Z" />
    <path class="d" d="M148.4,123.7h0c1.1-1.1,1.1-2.9,0-4l-18.3-18.3c-1.1-1.1-2.9-1.1-4,0h0c-1.1,1.1-1.1,2.9,0,4l18.3,18.3c1.1,1.1,2.9,1.1,4,0Z" />
    <path class="d" d="M262.7,136.1l-20.7-9.3c-1.4-.6-3.1,0-3.8,1.4-.6,1.4,0,3.1,1.4,3.8l20.7,9.3c1.4,.6,3.1,0,3.7-1.4h0c.6-1.4,0-3.1-1.4-3.8Z" />
    <path class="d" d="M44.4,6c1.1,1.1,2.9,1.1,4,0L54.4,0h-8l-2,2c-1.1,1.1-1.1,2.9,0,4Z" />
    <path class="d" d="M17.3,91.3l32.1-10.9c1.5-.5,2.3-2.1,1.8-3.6h0c-.5-1.5-2.1-2.3-3.6-1.8l-32.1,10.9c-1.5,.5-2.3,2.1-1.8,3.6,.5,1.5,2.1,2.3,3.6,1.8Z" />
    <path class="d" d="M62.6,156.7h0c.4,1.5,2,2.4,3.5,2l26.2-7.3c1.5-.4,2.4-2,2-3.5h0c-.4-1.5-2-2.4-3.5-2l-26.2,7.3c-1.5,.4-2.4,2-2,3.5Z" />
    <path class="d" d="M35.6,190.4l-5.7,6.3c-1.1,1.2-1,3,.2,4,1.2,1.1,2.9,1,4-.2l5.7-6.3c1.1-1.2,1-2.9-.2-4-1.2-1.1-3-1-4,.2Z" />
    <path class="d" d="M224.8,65.6c1.6,0,2.8-1.3,2.8-2.8h0c0-1.6-1.3-2.8-2.8-2.8s-2.8,1.3-2.8,2.8h0c0,1.6,1.3,2.8,2.8,2.8Z" />
    <path class="d" d="M272.5,176.6l-15.3,16.8c-1.1,1.2-1,3,.2,4,1.2,1.1,3,1,4-.2l15.3-16.8c1.1-1.2,1-3-.2-4-1.2-1.1-2.9-1-4,.2Z" />
    <path class="d" d="M64.4,269.4c-1.1-1.1-2.9-1.1-4,0l-14,14h8l10-10c1.1-1.1,1.1-2.9,0-4Z" />
    <path class="d"...

CSS

PATH {
  transition: fill .25s ease;
}

JavaScript

let colours = [{
    'cls': 'b',
    'colour': '#ff4989'
  },
  {
    'cls': 'd',
    'colour': '#ff1761'
  },
  {
    'cls': 'e',
    'colour': '#ffbc25'
  },
  {
    'cls': 'f',
    'colour': '#ff5c24'
  },
  {
    'cls': 'g',
    'colour': '#66dafc'
  },
  {
    'cls': 'h',
    'colour': '#975333'
  },
  {
    'cls': 'i',
    'colour': '#1dd89f'
  }
];

let colour_count = colours.length;

const svg = $('SVG');

let count = 0;

const recolour = function() {

  count++;


  $.each(colours, function(key, obj) {

    // new key (start from 1)
    let new_key = key + 1;
    
    // work out our next new key 
    let next_key = new_key + count;
      
    // if next key is greater than colour count  
    if (next_key > colour_count) {

    	next_key = next_key - colour_count

    }

    // if new key is the last key
    if (new_key === colour_count) {

      // update last path elements fill style
      $('PATH[class="' + obj.cls + '"]', svg).attr('style', 'fill: ' + colours[next_key - 1].colour + ' !important;');

      // one second delay
      setTimeout(function() {

        // if count is equal to colour count
        if(count === colour_count) {
        
          // reset counter to 0
        	count = 0;
        
        }

        // re run recolour
        recolour();

      }, 1000);

    
    } else {

      // update path elements fill style
      $('PATH[class="' + obj.cls + '"]', svg).attr('style', 'fill: ' + colours[next_key - 1].colour + ' !important;');

    }

  });

}

// one second delay
setTimeout(function() {

  // run recolour
	recolour();

}, 1000);