JSFiddle - React, Tailwind, and code Playground

HTML

<h2>The cursor is: <span id="inout" class="outside">outside</span></h2>

<svg xmlns="http://www.w3.org/2000/svg" width="250" height="200">
    <path id="shape" d="M150,120 q26,75 -80,50  c-80,-25 -53,-125 -26,-125  c53,-25 107,-25 107,50  q107,-50 53,50 z"
          stroke-width="4" fill="yellow" stroke="limegreen" />
</svg>

CSS

.inside {
    color: lime;
}

.outside {
    color: red;
}

JavaScript

const shape = document.querySelector('#shape'),
	  status = document.querySelector('#inout');

document.body.onmousemove = function(e) {
    const x = e.clientX,
    	  y = e.clientY;
    
    if(document.elementFromPoint(x, y) === shape) {
    	status.className = status.textContent = 'inside';
    }
    else {
    	status.className = status.textContent = 'outside';
    }
}