JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="stage" width="500" height="400"  viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <ellipse id="ellipseRed" cx="100" cy="300" rx="40" ry="50" fill="#c00" />
	<ellipse id="ellipseBlue" cx="300" cy="300" rx="40" ry="50" fill="#00c" />
</svg>

JavaScript

$('#ellipseRed').click(function() {
    $(this)
    .css({"border": "none"})
    .animate(
        {"min-height": -150},
        {duration: 1000,
         step: function(top){
             this.setAttribute("transform", "translate(0,"+top+")");
         }
        }
    );
});

$('#ellipseBlue').click(function() {
    // Get the value of the transform attribute
    var ellipse_red = $('#ellipseRed')[0];
    var xforms = ellipse_red.getAttribute('transform');
    var parts  = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
    var firstX,firstY;
    // If the transform attribute doesn't exist then add it.
    if(parts == null){
        ellipse_red.setAttribute('transform','translate(0,0)');
        firstX = 0;
        firstY = 0;
    }
    // Otherwise take the values read.
    else{
        firstX = parts[1];
        firstY = parts[2];
    }
    // Set the arrive point
    var animation = {};
    animation.x = firstX + 200;
    animation.y = firstY - 100;
    
    // Try to animate!
    ellipse_red
    .css({"min-height": 0})
    .css({"left":0})
    .animate(
        {"min-height": animation.y},
        {"left": animation.x},
        {duration: 1000,
         step: function(top, left){
             this.setAttribute("transform", "translate("+left+","+top+")");
         }
        }
    );
});