Анимация кометы по орбите, как реализовать?

Question

[Zombie42679]

Первый раз делаю подобное - хочу реализовать следующие, чтоб зеленый круг (комета) по орбите (красная линия) бесконечно крутился, как то можно легче это всё реализовать или надо каждые 5 процентов указывать координаты?

https://codepen.io/anon/pen/wpmwjK

Answer 1

[Максим Тимофеев]

Проще и лучше - 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
Из минусов - не полная поддержка в edge, но обещают исправить
how it made: https://css-tricks.com/guide-svg-animations-smil/#...

Answer 2

[Андрей Саныч]

Вот посмотрите пример на scss https://codepen.io/ghost028/pen/bEBKXZ

Answer 3

[Exploding]

Вот вам в догонку 4-я вещь, на которую можно смотреть вечно)))
P.S. Не моё. Нашел когда-то случайно

Comments

[Дмитрий Локшин]

ахах, согласен, даже не заметил как залип=)))

Answer 4

[Stalker_RED]

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

Answer 5

[Алексей Павлов]

Посмотрите статью Павло Пономаренко Солнечная система на LibCanvas? в комментах есть версия на флэше, на Fabric.js, на canvas без библиотек (правильная ссылка), CSS-only и даже на Silverlight :)

Answer 6

[krypt3r]

Примеров вам уже накидали, но учтите, что кометы движутся по эллиптическим орбитам, а некоторые по параболическим и гиперболическим, и скорость их движения в разных точках орбиты будет разной.