Анимация планет солнечной системы

1,00
р.
У меня есть картинка планет солнечной системы.

Получилось сделать с помощью команд орбиты и сами планеты. С помощью линейных и радиальных градиентов придать им объём. Нашел топик, где реализовано вращение одной планеты вокруг солнца


.solar-system { background-color: #002 width: 50% height: 50% } .sun { fill: yellow filter: url(#dropShadow) } .mercury-orbit { stroke: rgba(255, 255, 255, .4) stroke-width: 1 fill: none } .mercury { fill: crimson filter: url(#dropShadow2) }


Но при попытке сделать анимацию для нескольких планет всё ломается. Видно только последнюю добавленную планету. Как сделать анимацию для нескольких планет?

Ответ
Для создания объектов вращения и придания им объема используются градиенты и фильтр feGaussianBlur


.solar-system{ background-color:#002 width:100% height:100% } .sun{ fill:url(#gradSun) filter:url(#dropShadow2) }



Update 11.12.2018 --
Анимация пульсации солнца
Для изменения размера Звезды по имени Солнце @Виктор Цой,- анимируется радиус Для изменения окраски активного солнца,- анимируются атрибуты градиента


.solar-system{ background-color:#002 width:100% height:100% } .sun{ fill:url(#gradSun) filter:url(#dropShadow2) }


Анимация вращения одной планеты вокруг солнца
Все объекты, чтобы не было рассогласования траекторий движения, имеют одинаковый центр вращения X = 275px, Y = 175px


.solar-system{ background-color:#002 width:100% height:100% } .sun{ fill:url(#gradSun) filter:url(#dropShadow2) } .Earth-orbit{ stroke:rgba(255,255,255,.4) stroke-width:1 fill:none } .Earth{ filter:url(#dropShadow1) fill:url(#gradEarth) }
<!-- Earth -->

Для каждой планеты создаем индивидуальные градиенты и команды анимации, как в примере выше. Ниже полный код
Запуск анимации - кнопка Start


.solar-system{ background-color:#002 width:100% height:100% } .sun{ fill:url(#gradSun) filter:url(#dropShadow2) } .mercury-orbit{ stroke: rgba(255,255,255,.4) stroke-width:1 fill:none } .mercury{ fill:url(#gradMercury) filter:url(#dropShadow1) } .venus-orbit{ stroke:rgba(255,255,255,.4) stroke-width:1 fill:none } .venus{ fill:url(#gradVenus) filter:url(#dropShadow1) } .Earth-orbit{ stroke:rgba(255,255,255,.4) stroke-width:1 fill:none } .Earth{ filter:url(#dropShadow1) fill:url(#gradEarth) } .Mars-orbit{ stroke:rgba(255,255,255,.4) stroke-width:1 fill:none } .Mars{ filter:url(#dropShadow1) fill:url(#gradMars) } .Jupiter-orbit{ stroke:rgba(255,255,255,.4) stroke-width:1 fill:none } .Jupiter{ filter:url(#dropShadow1) fill:url(#gradJupiter) }
Start <!-- mercury --> <!-- venus --> <!-- Earth --> <!-- Mars --> <!-- Jupiter -->


Вариант с анимацией активности солнца


.solar-system{ background-color:#002 width:100% height:100% } .sun{ fill:url(#gradSun) filter:url(#dropShadow2) } .mercury-orbit{ stroke: rgba(255,255,255,.4) stroke-width:1 fill:none } .mercury{ fill:url(#gradMercury) filter:url(#dropShadow1) } .venus-orbit{ stroke:rgba(255,255,255,.4) stroke-width:1 fill:none } .venus{ fill:url(#gradVenus) filter:url(#dropShadow1) } .Earth-orbit{ stroke:rgba(255,255,255,.4) stroke-width:1 fill:none } .Earth{ filter:url(#dropShadow1) fill:url(#gradEarth) } .Mars-orbit{ stroke:rgba(255,255,255,.4) stroke-width:1 fill:none } .Mars{ filter:url(#dropShadow1) fill:url(#gradMars) } .Jupiter-orbit{ stroke:rgba(255,255,255,.4) stroke-width:1 fill:none } .Jupiter{ filter:url(#dropShadow1) fill:url(#gradJupiter) }
Start <!-- mercury --> <!-- venus --> <!-- Earth --> <!-- Mars --> <!-- Jupiter -->


Update 18.04.2019
Так как современные браузеры в целях безопасности запретили автоматический запуск файлов *.mp3 пришлось добавить небольшой скрипт запуска музыки при нажатии на кнопку Start
При запущенной анимации звучит трек группы Zodiac.


.solar-system{ background-color:#002 width:100% height:100% } .sun{ fill:url(#gradSun) filter:url(#dropShadow2) } .mercury-orbit{ stroke: rgba(255,255,255,.4) stroke-width:1 fill:none } .mercury{ fill:url(#gradMercury) filter:url(#dropShadow1) } .venus-orbit{ stroke:rgba(255,255,255,.4) stroke-width:1 fill:none } .venus{ fill:url(#gradVenus) filter:url(#dropShadow1) } .Earth-orbit{ stroke:rgba(255,255,255,.4) stroke-width:1 fill:none } .Earth{ filter:url(#dropShadow1) fill:url(#gradEarth) } .Mars-orbit{ stroke:rgba(255,255,255,.4) stroke-width:1 fill:none } .Mars{ filter:url(#dropShadow1) fill:url(#gradMars) } .Jupiter-orbit{ stroke:rgba(255,255,255,.4) stroke-width:1 fill:none } .Jupiter{ filter:url(#dropShadow1) fill:url(#gradJupiter) }

Start <!-- mercury --> <!-- venus --> <!-- Earth --> <!-- Mars --> <!-- Jupiter -->


var zodiac = new Audio() zodiac.src = 'https:/vg-art.ru/files/zodiac.mp3'
function play() { zodiac.play() }