Create "bobblehead" animation jquery

Question

A bobblehead effect would be a "U" animation shape in my mind with slightly shorter stems.

I've tried using various arcs/semi-circles to create a bobblehead effect but nothing is working correctly.

I must use transform with translate due to it being an SVG. I am also using animejs but I cannot see a method to achieve this on that library either. jQuery animation steps seems the most simple?

This is the effect I'm looking to achieve:

[![enter image description here][1]][1]

Using this code:

function loopBobble() {

    var end = 180;

    $({
        counter: 0
    }).animate({
        counter: end
    },{
        duration: 1000,
        easing: "swing",
        step: function(t, fx) {
        
            var a = t / 60; // from degrees to radians
            var x = Math.cos(a) * 10;
            var y = Math.sin(a) * 10;
            $('#bobble').attr('style', 'transform: translateX(' + x + 'px) translateY(' + y + 'px);');

            if (t == end) {
                loopBobble();
            }
        }
    });
}
loopBobble();

The best I am able to achieve with the creepy face is this result:

[![enter image description here][2]][2]

Is my approach correct? I would have assumed a "U" shape animation would be built into animejs or jquery. I cannot find much online. I am no mathematician