<svg width="442" height="350" viewBox="0 0 442 350" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
        <filter id="blur">
            <feGaussianBlur stdDeviation="1" />
        </filter>
    </defs>
<g opacity="1">
<path class="hex" opacity="0.1" d="M143.59 221.309L159.432 248.756H191.117L206.959 221.309L191.117 193.859H159.432L143.59 221.309Z" fill="black" stroke="#646464" stroke-width="0.9002" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M96.0583 138.963L111.901 166.413H143.589L159.432 138.963L143.589 111.512H111.901L96.0583 138.963Z" fill="black" stroke="#646464" stroke-width="0.9002" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M96.0583 193.859L111.901 221.309H143.589L159.432 193.859L143.589 166.413H111.901L96.0583 193.859Z" fill="black" stroke="#646464" stroke-width="0.9002" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M191.121 138.963L206.963 166.413L238.648 166.409L254.49 138.963L238.648 111.512H206.963L191.121 138.963Z" fill="black" stroke="#646464" stroke-width="0.9002" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M111.901 56.6158H143.589L159.432 84.066L143.589 111.512H111.901L96.0583 84.066L111.901 56.6158Z" fill="black" stroke="#646464" stroke-width="0.9002" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M254.49 84.066H286.179L302.022 111.512L286.179 138.963H254.49L238.648 111.512L254.49 84.066Z" fill="black" stroke="#646464" stroke-width="0.9002" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M159.432 29.1656L143.589 1.71925H111.901L96.0583 29.1656L111.901 56.6158H143.589L159.432 29.1656Z" fill="black" stroke="#646464" stroke-width="0.9002" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M64.3736 84.066L48.5273 56.6158L16.8424 56.6196L1 84.066L16.8424 111.512H48.5273L64.3736 84.066Z" fill="black" stroke="#646464" stroke-width="0.9002" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M206.963 56.6158L191.121 29.1656H159.432L143.59 56.6158L159.432 84.066L191.121 84.0622L206.963 56.6158Z" fill="black" stroke="#646464" stroke-width="0.9002" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M111.901 56.6158L96.0585 29.1656L64.3736 29.1694L48.5273 56.6158L64.3736 84.066H96.0585L111.901 56.6158Z" fill="black" stroke="#646464" stroke-width="0.9002" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M111.901 166.413L96.0585 138.963H64.3736L48.5273 166.413L64.3736 193.859H96.0585L111.901 166.413Z" fill="black" stroke="#646464" stroke-width="0.9002" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M206.963 166.413L191.121 138.963H159.432L143.59 166.413L159.432 193.859H191.117L206.963 166.413Z" fill="black" stroke="#646464" stroke-width="0.9002" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M254.49 84.0621L238.648 56.6158H206.963L191.121 84.0621L206.963 111.512H238.648L254.49 84.0621Z" fill="black" stroke="#646464" stroke-width="0.9002" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M111.901 111.512L96.0585 84.066H64.3736L48.5273 111.512L64.3736 138.963H96.0585L111.901 111.512Z" fill="black" stroke="#646464" stroke-width="0.9002" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M199.952 25.5273L214.112 1H242.423L256.579 25.5273L242.423 50.0545H214.112L199.952 25.5273Z" fill="black" stroke="#646464" stroke-width="0.8044" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M157.485 99.1052L171.641 74.578H199.952L214.112 99.1052L199.956 123.633H171.641L157.485 99.1052Z" fill="black" stroke="#646464" stroke-width="0.8044" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M157.485 50.0545L171.641 25.5273H199.952L214.112 50.0545L199.952 74.578H171.641L157.485 50.0545Z" fill="black" stroke="#646464" stroke-width="0.8044" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M242.423 99.1052L256.579 74.578L284.894 74.5818L299.049 99.1052L284.894 123.633H256.579L242.423 99.1052Z" fill="black" stroke="#646464" stroke-width="0.8044" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M171.641 172.683H199.956L214.112 148.16L199.956 123.633H171.641L157.485 148.16L171.641 172.683Z" fill="black" stroke="#646464" stroke-width="0.8044" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M299.05 148.16H327.361L341.517 123.632L327.361 99.1052H299.05L284.894 123.632L299.05 148.16Z" fill="black" stroke="#646464" stroke-width="0.8044" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M214.112 197.21L199.956 221.738H171.641L157.485 197.21L171.641 172.683H199.956L214.112 197.21Z" fill="black" stroke="#646464" stroke-width="0.8044" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M129.174 148.156L115.014 172.683H86.7028L72.5471 148.156L86.7028 123.633H115.014L129.174 148.156Z" fill="black" stroke="#646464" stroke-width="0.8044" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M256.583 172.683L242.423 197.21H214.112L199.956 172.683L214.112 148.16H242.423L256.583 172.683Z" fill="black" stroke="#646464" stroke-width="0.8044" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M171.641 172.683L157.485 197.21H129.174L115.014 172.683L129.174 148.156L157.485 148.16L171.641 172.683Z" fill="black" stroke="#646464" stroke-width="0.8044" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M171.641 74.578L157.485 99.1052H129.174L115.014 74.578L129.17 50.0545H157.485L171.641 74.578Z" fill="black" stroke="#646464" stroke-width="0.8044" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M256.579 74.578L242.423 99.1052H214.112L199.952 74.578L214.112 50.0545H242.423L256.579 74.578Z" fill="black" stroke="#646464" stroke-width="0.8044" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M299.049 148.16L284.894 172.687L256.582 172.683L242.423 148.16L256.579 123.633H284.894L299.049 148.16Z" fill="black" stroke="#646464" stroke-width="0.8044" stroke-miterlimit="10"/>
<path class="hex" opacity="0.1" d="M171.641 123.632L157.485 148.16L129.174 148.156L115.014 123.632L129.174 99.1052H157.485L171.641 123.632Z" fill="black" stroke="#646464" stroke-width="0.8044" stroke-miterlimit="10"/>
</g>
</svg>

body {
  background: #000;
}
.active {
  fill: #fff;
/*   stroke: red; */
  stroke-width: 2;
  opacity: 1;
  transition: opacity 1s ease-in-out;
/*   filter:url(#blur); */
  
}

.hex {
  padding: 5px;
}

path.hex::hover {
  fill: #009aff;
  opacity: 1;
}

.color-1 {
/*   fill: #D4145A; */
  fill: #000;
  
  stroke: #D4145A;
  filter: drop-shadow(6px 6px 5px #D4145A);
  
}

.color-2 {
/*   fill: #FBB03B; */
  fill: #000;
  
  stroke: #FBB03B;
  filter: drop-shadow(6px 6px 5px #FBB03B);
  
}

.color-3 {
/*   fill: #29ABE2; */
  fill: #000;
  
  stroke: #29ABE2;
  filter: drop-shadow(6px 6px 5px #29ABE2);
  
  
}

.color-4 {
/*   fill: #22B573; */
  fill: #000;
  
  stroke: #22B573;
  filter: drop-shadow(6px 6px 5px #22B573);
  
}

.color-5 {
/*   fill: #29ABE2; */
  fill: #000;
  
  stroke: #29ABE2;
  filter: drop-shadow(6px 6px 5px #29ABE2);
  
}

.color-6 {
/*   fill: #00A99D; */
  fill: #000;
  
  stroke: #00A99D;
  filter: drop-shadow(6px 6px 5px #00A99D);
  
  
}

.color-7 {
/*   fill: #F15A24; */
  fill: #000;
  
  stroke: #F15A24;
  filter: drop-shadow(6px 6px 5px #F15A24);
  
}

.color-8 {
/*   fill: #93278F; */
  fill: #000;
  stroke: #93278F;
  filter: drop-shadow(6px 6px 5px #93278F);
  
}



body {
  margin: 100px auto;
  text-align: center;
}

// get an array of hex elements

// randomly pick an element

// add class

// wait 2 sec

// remove class
const hexList = document.getElementsByClassName('hex');

const colorArr = ['#D4145A', '#FBB03B', '#29ABE2', '#22B573', '#29ABE2', '#00A99D', '#F15A24', '#93278F']

// Anything inside setInterval will retrigger based on inerval set i.e. 1000ms
setInterval(function(){
     const randomInt = Math.floor(Math.random() * hexList.length);
  const randomColorNum = Math.floor(Math.random() * colorArr.length + 1);
   const randomElement = hexList[randomInt];
   blink(randomInt, randomElement, randomColorNum)
  // console.log(randomElement);
      // randomElement.classList.remove('active')
     
}, 500);

function blink(randomInt, randomElement, randomColorNum) {
  randomElement.classList.add('active');
  const clrname = `color-${randomColorNum}`
  console.log(clrname);
  randomElement.classList.add(clrname);
 
  // console.log(randomElement.classList);

  // wait implemented using setTimeout
  setTimeout(function()    {
    randomElement.classList.remove('active');
  randomElement.classList.remove(clrname);
    
  console.log('after', randomElement);
}, 1000);
  
  
}