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"...

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;

console.log(colour_count);

const svg = $('#a');

const recolour = function() {

  $.each(colours, function(key, obj) {
  
   console.log(key);
    
    if (key === (colour_count - 1)) {
    
   console.log(key,colours[0]);
    
      $('PATH[class="' + obj.cls + '"]', svg).attr('style','fill: ' + colours[0].colour + '');

      setTimeout(function() {
      
       
        recolour();

      }, 3000);

    } else {
    
    console.log(key,colours[key + 1]);

      $('PATH[class="' + obj.cls + '"]', svg).css('fill', colours[key + 1].colour);

    }

  });

}

recolour();