JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-350 -250 700 500">
  <circle r="200" class="face" fill="red" />
  <circle id="rightEye" cx="60" cy="-50" r="20" fill="#00F" />
</svg>

CSS

body {
  background: #eee;
  margin: 0;
}

svg {
  display: block;
  border: 1px solid #ccc;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

.face {
  stroke: #000;
  stroke-width: 20px;
  stroke-linecap: round
}

JavaScript

document.getElementById('leftEye').addEventListener('mouseover', function(e) {
  alert('Left Eye');
});
document.getElementById('rightEye').addEventListener('mouseover', function(e) {
  alert('Right Eye');
});