JavaScriptのぶら下がりアニメーションライブラリについて

svgを使えばと。

書き方

一辺が50pxの正方形であれば、

<svg>
<path d="M 0,0 L 50,0 L 50,50 L0,50 Z" fill="red" stroke="none"/>
</svg>

で、描けます。
pathのdの中身(パスという)が重要です。
Mはパスをこの座標から描き始める、という命令です。
つまり、鉛筆を置いた、ということです。
L 50,0は、「50,0の点まで直線を引く」という命令
Zはパスを閉じる、つまり鉛筆を置いた点まで直線を引くという命令です。
fillは、塗り潰しの色です。
strokeは、実際にパスで引いた線の色です。
L意外にも、曲線を描くヤツがあります。

Q:例えばM0,0Q0,50 50,50だと、0,0…0,50と0,50…50,50の直線を滑らかに結んでいます。

C:例えばM0,0C0,50 50,0 50,50だと、0,0…0,50と50,0…50,50の直線を滑らかに結んでいます。Qとあんまり変わりませんね。
円を描く場合は、circleを使います。

<circle id="move_circle" cx="50" cy="50" r="50" fill="#f00"></circle>

多分、本計画にはいらないとは思いますが、svg図形に動きを付けたければ

<animateMotion dur="5s" repeatCount="indefinite" >
<mpath xlink:href="#path"></mpath>
</animateMotion>

を、pathなら中に挟むと、
xlink:href=で指定したpathの線上を通るように、durで指定した時間に1周、repeatCountで指定した回数周ります。

もし、これでも出来ない動きなら、真面目にjs操りをお勧めします。