JSFiddle - React, Tailwind, and code Playground

by Yoghurts

HTML

<body style="height:300px">
    <svg style="height:100%;width:100%">
        <ellipse cx="300" cy="150" rx="200" ry="80" class="blue">
    </svg>
</body>

CSS

.blue {
    fill:RGB(76, 158, 217);
}
.red {
    fill:RGB(255, 170, 215);
}

JavaScript

var svg = document.getElementsByTagName("ellipse")[0];
svg.addEventListener("mouseover", function (e) {
    e.target.classList.toggle("red");
    e.target.classList.toggle("blue");
});
svg.addEventListener("mouseout", function (e) {
    e.target.classList.toggle("red");
    e.target.classList.toggle("blue");
});