JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Point d'interrogation -->
<svg display="none">
  <defs>
    <g id="img-question">
      <path xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF" d="M31.9,59.9c-15.5,0-28.1-12.6-28.1-28.1S16.4,3.7,31.9,3.7C47.4,3.7,60,16.3,60,31.8S47.4,59.9,31.9,59.9z M31.9,8.1C18.8,8.1,8.2,18.7,8.2,31.8c0,13.1,10.7,23.7,23.7,23.7s23.7-10.7,23.7-23.7C55.6,18.7,45,8.1,31.9,8.1z" />
      <path xmlns="http://www.w3.org/2000/svg" fill="#FFA600" d="M20.7,25.1c0.1-1.1,0.6-3.5,2.5-5.8c2.9-3.5,7-3.9,7.7-4c4.8-0.4,7.9,2.4,8.5,2.9c0.6,0.6,3.3,3.2,3.6,7.5 c0.3,4.3-2,7.2-2.5,7.9c-2.5,3.1-5.8,3.8-6.7,3.9c0,1.2,0,2.3,0,3.5c-1.4,0-2.9,0-4.3,0c0-1.9,0-3.7,0-5.6c0-0.3,0.1-0.8,0.4-1.3 c0.8-1,2.2-0.6,4-1.2c1.5-0.5,2.5-1.4,3-1.9c1.5-1.7,2.3-4.7,1-7.4c-1.2-2.6-4-4.1-6.9-3.8c-2.9,0.4-5.2,2.5-5.8,5.4 C23.7,25.1,22.2,25.1,20.7,25.1z" />
      <path xmlns="http://www.w3.org/2000/svg" fill="#FFA600" d="M29.5 44H33.8V48.3H29.5z" />
    </g>
  </defs>
</svg>

<!-- Article f -->
<div class="hasard-choix">
  <a href="#" onclick="return false;">
    <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin">
      <use xlink:href="#img-question"></use>
    </svg>
    <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin">
      <use xlink:href="#img-question"></use>
    </svg>
    <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin">
      <use xlink:href="#img-question"></use>
    </svg>
  </a>
</div>

<!-- Article g -->
<div class="hasard-choix">
  <a href="#" onclick="return false;">
    <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin">
      <use xlink:href="#img-question"></use>
    </svg>
    <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6"...

CSS

body {
  background-color: black;
}
.hasard-choix {
  text-align: center;
  padding: 1em 0;
}

/* Animations */

@keyframes blink-out{
    0%, 20%, 40%, 60%, 80%, 100%{
        opacity: 0;
    }

    10%, 30%, 50%, 70%{
        opacity: 1;
    }
}

@keyframes blink-in{
    0%, 20%, 40%, 60%{
        opacity: 0;
    }

    10%, 30%, 50%, 70%, 90%, 100%{
        opacity: 1;
    }
}

JavaScript

const as = document.getElementsByTagName("a")

for (const a of as) {
  a.onclick = (ev) => {
    ev.preventDefault()
    randomize(a)
  }
}

const randomize = (aElement) => {
  const svgs = aElement.getElementsByTagName("svg")
  const svgIn = svgs[Math.floor(Math.random() * 3)]
  
  let delay = 0
  
  for (let svg of svgs) {
    // Reset l'animation ( pour pouvoir la rejouer plusieurs fois sans soucis )
    svg.style.animation = ""
    void svg.getClientRects()

    // Cache l'icone après l'animation
    if (svg !== svgIn) {
      svg.style.animation = `blink-out 1.5s ${delay}s forwards`
    }

    // Montre l'icone après l'animation
    else {
      svg.style.animation = `blink-in 1.5s ${delay}s forwards`
    }

    // Assure que les animations se jouent en décalé
    delay += 0.1
  }
};