<svg width="282px" height="82px" viewBox="0 0 282 82" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group">
            <circle id="red" fill="#EE4747" cx="41" cy="41" r="41"></circle>
            <circle id="yellow" fill="#FFC848" cx="141" cy="41" r="41"></circle>
            <circle id="green" fill="#1EC4B4" cx="241" cy="41" r="41"></circle>
        </g>
    </g>
</svg>

:root {
	--animation-time: 2s; 
}

html, body {
  height: 100%;
}

body {
  display: flex;
  padding: 0;
  background-color: #222;
  justify-content: center;
  align-items: center;
}

@keyframes flicker {
  0% {
    opacity: 0;
  } 100% {
    opacity: 1;
  }
}

#red {
  animation: flicker var(--animation-time) ease alternate infinite;
}

const red = document.querySelector('#red');

function setProperty(duration) {
  red.style.setProperty('--animation-time', duration +'s');
}

function changeAnimationTime() {
  const animationDuration = Math.random();
  setProperty(animationDuration);
}

setInterval(changeAnimationTime, 1000);