Z
Z
Zombie426792018-01-10 10:16:58
css
Zombie42679, 2018-01-10 10:16:58

Animation of a comet in orbit, how to implement?

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 the question

In order to leave comments, you need to log in

6 answer(s)
A
Andrey Sanych, 2018-01-10
@Zombie42679

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

M
Maxim Timofeev, 2018-01-10
@webinar

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 /#...

E
Exploding, 2018-01-10
@Exploding

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

S
Stalker_RED, 2018-01-11
@Stalker_RED

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

A
Alexey Pavlov, 2018-01-11
@lexxpavlov

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 :)

K
krypt3r, 2018-01-11
@krypt3r

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.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question