JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="588px" height="512px" viewBox="0 0 588 512">
    <g id="clock_bottom_3" transform="translate(72 306)">
        <ellipse fill="blue" cx="87" cy="52" rx="87" ry="52"></ellipse>
    </g>
</svg>

CSS

#clock_bottom_3 {transition: transform 0.3s;}

svg:hover #clock_bottom_3 {transform: translate(72px, 320px);}