Пару ссылок по анимации:
learn.javascript.ru,
w3schools.com.
Примерно так: определяете основные точки (например, так)
![b0720a43048041c69d0abf3f553cf1f6.png](https://habrastorage.org/files/b07/20a/430/b0720a43048041c69d0abf3f553cf1f6.png)
Затем указываете координаты.
Сейчас попробую набросать пример.
UPD Вот пример со "сглаживанием". А вот без. Разница заметна - в первом случае получается чуть более "криво".