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

#css #css3 #html5 #svg #анимация

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

 

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



.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);
}

  


  

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

Ответы

Ответ 1

Для создания  объектов вращения и придания им объема используются градиенты и фильтр
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);
 }

  




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

Запуск анимации - кнопка 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);
 }

  





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



.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);
 }

  





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);
 }