JSFiddle - React, Tailwind, and code Playground

HTML

<svg height="600" width="600">
  <circle cx="300" cy="300" r="200" fill="yellow" id="face"/>
  <circle cx="210" cy="240" r="25" fill="black" />
  <circle cx="410" cy="240" r="25" fill="black" />
  <circle cx="210" cy="240" r="10" fill="white" />
  <circle cx="410" cy="240" r="10" fill="white" />
  <path fill="#1500CO" stroke="#1500CO" stroke-width="5" d="M 250,410 q 50,75 100,0 z" />
  <line x1="150" x2="265" y1="180" y2="200" stroke-width="4" stroke="#7CB342" stroke-linecap="round" />
  <line x1="330" x2="450" y1="200" y2="180" stroke-width="4" stroke="#7CB342" stroke-linecap="round" />
  <line x1="270" x2="300" y1="355" y2="300" stroke-width="4" stroke="#7CB342" stroke-linecap="round" />
  
  </svg>

JavaScript

var shape =$("#face");
shape.click(function(){

//alert("click the shape");
shape.attr("fill","#ffcc00")
shape.attr("fill","#ffcc00")
shape.attr("fill","#ffcc00")
shape.attr("fill","#ffcc00")
});