Animation of a comet in orbit, how to implement?

Question

css

For the first time I do this - I want to implement the following, so that the green circle (comet) in orbit (red line) spins endlessly, how can it be easier to implement all this or do I need to indicate the coordinates every 5 percent?
https://codepen.io/anon/pen/wpmwjK

Answer 1

Here is an example on scss https://codepen.io/ghost028/pen/bEBKXZ

Answer 2

Easier and better - svg:
https://codepen.io/dinks/pen/ECbpG
https://codepen.io/semenchenko/pen/BwGOKo
https://codepen.io/Scott-Hutcheson/pen/oeJRWP?q= sv...
https://codepen.io/diogocera/pen/YyYPZB
Of the minuses - not full support in edge, but they promise to fix
how it's made: https://css-tricks.com/guide-svg-animations-smil /#...

Answer 3

Here's the 4th thing for you to catch up with, which you can look at forever )))
PS Not mine. Found by accident

Answer 4

https://jsfiddle.net/wm5mfqtd/show/

Answer 5

Check out Pavlo Ponomarenko 's Solar System article on LibCanvas ? in the comments there is a version on flash , on Fabric.js , on canvas without libraries ( correct link ), CSS-only and even on Silverlight :)

Answer 6

Examples have already been thrown at you, but keep in mind that comets move in elliptical orbits, and some in parabolic and hyperbolic ones, and the speed of their movement at different points in the orbit will be different.