Шляпа кота

Расширьте анимацию кота, чтобы и кот и его шляпа <img src="img/hat.png"> летали по противоположным сторонам эллипса.

Или пусть шляпа летает вокруг кота. Или ещё что-нибудь интересное придумайте.

Чтобы упростить расположение множества объектов, неплохо будет переключиться на абсолютное позиционирование. Тогда top и left будут считаться относительно левого верхнего угла документа. Чтобы не использовать отрицательные координаты, вы можете добавить заданное число пикселей к значениям position.

<img src="img/cat.png" id="cat" style="position: absolute">

<img src="img/hat.png" id="hat" style="position: absolute">

<script>

  var cat = document.querySelector("#cat");

  var hat = document.querySelector("#hat");

  // Your code here.

</script>