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

154

08 июня 2019, 19:50

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

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

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

<div class="solar-system"> 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 400">  
   
  <defs> 
    <filter  
      id="dropShadow"	 
      x="-20%" y="-20%"  
      width="150%" height="150%"> 
      <feGaussianBlur stdDeviation="5" /> 
    </filter> 
    <filter  
      id="dropShadow2"  
      x="-20%" y="-20%"  
      width="120%" height="120%"> 
      <feGaussianBlur stdDeviation="2" /> 
    </filter> 
  </defs> 
   
  <circle class="sun" cx="250" cy="175" r="25" />  
  <g> 
    <animateTransform  
      attributeName="transform"  
      type="rotate"  
      values="0 250 175;360 250 175"  
      dur="12s" 
      repeatCount="indefinite" /> 
    <circle class="mercury-orbit" cx="250" cy="175" r="65" /> 
    <circle class="mercury" cx="185" cy="175" r="6" /> 
  </g> 
   
</div>

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

Answer 1

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

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

<div class="solar-system"> 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
      viewBox="0 0 500 400" >  
 <defs> 
   <filter id="dropShadow2"  
		  x="-20%" y="-20%"  
	  	width="150%" height="150%"> 
		<feGaussianBlur   stdDeviation="4" /> 
	 </filter> 
	  <radialGradient id="gradSun"> 
        <stop offset="80%" stop-color="yellow"></stop> 
        <stop offset="100%" stop-color="gold" ></stop> 
    </radialGradient> 
 </defs>	  
 <circle class="sun" cx="250" cy="175" r="20"  /> 
  
 </svg>

Update 11.12.2018

Анимация пульсации солнца
1. Для изменения размера Звезды по имени Солнце @Виктор Цой,- анимируется радиус
  <circle class="sun">
2. Для изменения окраски активного солнца,- анимируются атрибуты градиента
  <radialGradient id="gradSun">

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

 <div class="solar-system"> 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
      viewBox="0 0 500 400" >  
 <defs> 
    <filter id="dropShadow2"  
		x="-20%" y="-20%"  
		width="150%" height="150%"> 
		<feGaussianBlur   stdDeviation="4" /> 
	 </filter> 
	  <radialGradient id="gradSun"> 
        <stop offset="80%" stop-color="yellow"> 
		 <animate attributeName="offset" values="80%;20%;80%" dur="6s" repeatCount="indefinite" /> 
		 </stop> 
        <stop offset="100%" stop-color="gold" > 
		<animate attributeName="stop-color" values="gold;red;gold" dur="6s" repeatCount="indefinite" /> 
		</stop> 
      </radialGradient> 
 </defs>	  
 <circle class="sun" cx="250" cy="175" r="18"  > 
 <animate attributeName="r" values="18;18;22;22;22;18" dur="6s" repeatCount="indefinite" /> 
  </circle> 
  
 </svg>

Анимация вращения одной планеты вокруг солнца

Все объекты, чтобы не было рассогласования траекторий движения, имеют одинаковый центр вращения 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); 
 }

<div class="solar-system"> 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
      viewBox="0 0 500 400" >  
 <defs> 
 <filter id="dropShadow1"  
    x="-20%" y="-20%"  
		width="150%" height="150%"> 
	<feGaussianBlur   stdDeviation="1" /> 
 </filter> 
    <filter id="dropShadow2"  
		x="-20%" y="-20%"  
		width="150%" height="150%"> 
		<feGaussianBlur   stdDeviation="4" /> 
	</filter> 
	 <radialGradient id="gradSun"> 
        <stop offset="80%" stop-color="yellow"> 
		 <animate attributeName="offset" values="80%;20%;80%" dur="6s" repeatCount="indefinite" /> 
		 </stop> 
        <stop offset="100%" stop-color="gold" > 
		<animate attributeName="stop-color" values="gold;red;gold" dur="6s" repeatCount="indefinite" /> 
		</stop> 
      </radialGradient> 
 <linearGradient id="gradEarth"> 
	<stop offset="40%" stop-color="dodgerblue"></stop> 
	<stop offset="100%" stop-color="yellowgreen" ></stop> 
 </linearGradient>	   
 </defs>	  
 <!-- Earth --> 
   <g> 
  <animateTransform  
	  attributeName="transform"  
	  type="rotate" 
      values="0 250 175;360 250 175"  
	  dur="12s" 
	  repeatCount="indefinite" 
  /> 
 <circle class="Earth-orbit" cx="250" cy="175" r="90"     /> 
 <circle class="Earth" cx="160" cy="175" r="10" transform="rotate(45 250 175)"  /> 
</g> 
 <circle class="sun" cx="250" cy="175" r="20"  />  
  
  
 </svg>

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

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

<div class="solar-system"> 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
      viewBox="0 0 500 400" >  
   
  <defs> 
	<filter id="dropShadow1"  
    	x="-20%" y="-20%"  
		width="150%" height="150%"> 
	 <feGaussianBlur   stdDeviation="1" /> 
	</filter> 
	 <filter id="dropShadow2"  
		x="-20%" y="-20%"  
		width="150%" height="150%"> 
		<feGaussianBlur   stdDeviation="4" /> 
	 </filter> 
	  <radialGradient id="gradSun"> 
        <stop offset="80%" stop-color="yellow"></stop> 
        <stop offset="100%" stop-color="gold" ></stop> 
    </radialGradient> 
		<linearGradient id="gradEarth"> 
			<stop offset="40%" stop-color="dodgerblue"></stop> 
			<stop offset="100%" stop-color="yellowgreen" ></stop> 
		</linearGradient> 
	<linearGradient id="gradMercury">  
	    <stop offset="20%" stop-color="#824549"></stop> 
      <stop offset="20%" stop-color="#956356"></stop>   
      <stop offset="80%" stop-color="#5F3631" ></stop> 
		  <stop offset="100%" stop-color="#807019" ></stop> 
    </linearGradient> 
     
	  <linearGradient id="gradVenus"> 
        <stop offset="40%" stop-color="#805050"></stop> 
        <stop offset="100%" stop-color="yellow" ></stop> 
      </linearGradient> 
	   
	  	<linearGradient id="gradMars"> 
        <stop offset="40%" stop-color="crimson"></stop> 
        <stop offset="100%" stop-color="yellow" ></stop> 
      </linearGradient>   
     
	 <linearGradient id="gradJupiter"> 
    <stop offset="10%" stop-color="#AE5D49"></stop> 
    <stop offset="10%" stop-color="#783632" ></stop> 
		<stop offset="20%" stop-color="#C58460" ></stop> 
		<stop offset="20%" stop-color="#866D65" ></stop> 
		<stop offset="30%" stop-color="#995645" ></stop> 
		<stop offset="30%" stop-color="#C58460" ></stop> 
		<stop offset="40%" stop-color="#AE5D49" ></stop> 
		<stop offset="40%" stop-color="#C58460" ></stop> 
		<stop offset="50%" stop-color="#AE5D49"></stop> 
    <stop offset="50%" stop-color="#783632" ></stop> 
		<stop offset="60%" stop-color="#C58460" ></stop> 
		<stop offset="60%" stop-color="#866D65" ></stop>  
		<stop offset="70%" stop-color="#995645" ></stop> 
		<stop offset="70%" stop-color="#C58460" ></stop> 
		<stop offset="80%" stop-color="#AE5D49" ></stop> 
		<stop offset="80%" stop-color="#943A31" ></stop> 
		 
    </linearGradient>   
	 
	   
  </defs> 
 <g id="btn1"> 
	 <circle  cx="30" cy="45" r="8" fill="url(#gradEarth)" filter="url(#dropShadow1)" />  
	 <text id="txt1" x="15" y="70" font-size="1rem" fill="gold" >Start</text> 
 </g> 
 <!-- mercury --> 
  <g> 
  <animateTransform  
	  attributeName="transform"  
	  type="rotate" 
      begin="btn1.click"  	   
	  values="0 250 175;360 250 175"  
	  dur="8s" 
	  repeatCount="indefinite" 
  /> 
 <circle class="mercury-orbit" cx="250" cy="175" r="40"   /> 
 <circle class="mercury" cx="210" cy="175" r="6"  /> 
</g>  
   <!-- venus --> 
   <g> 
  <animateTransform  
	  attributeName="transform"  
	  type="rotate" 
	  begin="btn1.click" 
	  values="0 250 175;360 250 175"  
	  dur="10s" 
	  repeatCount="indefinite" 
  /> 
 <circle class="venus-orbit" cx="250" cy="175" r="60"     /> 
 <circle class="venus" transform="rotate(-45 250 175)" cx="190" cy="175" r="10"   /> 
</g>  
 <!-- Earth --> 
   <g> 
  <animateTransform  
	  attributeName="transform"  
	  type="rotate" 
      begin="btn1.click"	   
	  values="0 250 175;360 250 175"  
	  dur="12s" 
	  repeatCount="indefinite" 
  /> 
 <circle class="Earth-orbit" cx="250" cy="175" r="90"     /> 
 <circle class="Earth" cx="160" cy="175" r="10" transform="rotate(45 250 175)"  /> 
</g> 
    <!-- Mars --> 
  <g> 
  <animateTransform  
	  attributeName="transform"  
	  type="rotate" 
      begin="btn1.click"	   
	  values="0 250 175;360 250 175"  
	  dur="14s" 
	  repeatCount="indefinite" 
  /> 
 <circle class="Mars-orbit" cx="250" cy="175" r="120"     /> 
 <circle class="Mars" cx="130" cy="175" r="8" transform="rotate(90 250 175)"  /> 
</g>   
    <!-- Jupiter --> 
    <g> 
  <animateTransform  
	  attributeName="transform"  
	  type="rotate"  
	  begin="btn1.click" 
	  values="0 250 175;360 250 175"  
	  dur="16s" 
	  repeatCount="indefinite" 
  /> 
 <circle class="Jupiter-orbit" cx="250" cy="175" r="180"     /> 
 <circle class="Jupiter " cx="70" cy="175" r="20" transform="rotate(180 250 175)"  /> 
</g> 
	 <circle class="sun" cx="250" cy="175" r="20"  />  
	 
</div> 
<audio src="https://svg-art.ru/files/zodiac.mp3" autoplay="autoplay"></audio>

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

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

<div class="solar-system"> 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
      viewBox="0 0 500 400" >  
   
  <defs> 
	<filter id="dropShadow1"  
    	x="-20%" y="-20%"  
		width="150%" height="150%" 
	> 
	 <feGaussianBlur   stdDeviation="1" /> 
	</filter> 
	 <filter id="dropShadow2"  
		x="-20%" y="-20%"  
		width="150%" height="150%"> 
		<feGaussianBlur   stdDeviation="4" /> 
	 </filter> 
	  <radialGradient id="gradSun"> 
        <stop offset="80%" stop-color="yellow"> 
		 <animate attributeName="offset" values="80%;20%;80%" dur="12s" repeatCount="indefinite" /> 
		 </stop> 
        <stop offset="100%" stop-color="gold" > 
		<animate attributeName="stop-color" values="gold;red;gold" dur="6s" repeatCount="indefinite" /> 
		</stop> 
      </radialGradient> 
		<linearGradient id="gradEarth"> 
			<stop offset="40%" stop-color="dodgerblue"></stop> 
			<stop offset="100%" stop-color="yellowgreen" ></stop> 
		</linearGradient> 
	<linearGradient id="gradMercury">  
	    <stop offset="20%" stop-color="#824549"></stop> 
        <stop offset="20%" stop-color="#956356"></stop>   
        <stop offset="80%" stop-color="#5F3631" ></stop> 
		<stop offset="100%" stop-color="#807019" ></stop> 
    </linearGradient> 
	  <linearGradient id="gradVenus"> 
        <stop offset="40%" stop-color="#805050"></stop> 
        <stop offset="100%" stop-color="yellow" ></stop> 
      </linearGradient> 
	   
	  	<linearGradient id="gradMars"> 
        <stop offset="40%" stop-color="crimson"></stop> 
        <stop offset="100%" stop-color="yellow" ></stop> 
    </linearGradient>   
	    <linearGradient id="gradJupiter"> 
        <stop offset="10%" stop-color="#AE5D49"></stop> 
        <stop offset="10%" stop-color="#783632" ></stop> 
		<stop offset="20%" stop-color="#C58460" ></stop> 
		<stop offset="20%" stop-color="#866D65" ></stop> 
		<stop offset="30%" stop-color="#995645" ></stop> 
		<stop offset="30%" stop-color="#C58460" ></stop> 
		<stop offset="40%" stop-color="#AE5D49" ></stop> 
		<stop offset="40%" stop-color="#C58460" ></stop> 
		<stop offset="50%" stop-color="#AE5D49"></stop> 
        <stop offset="50%" stop-color="#783632" ></stop> 
		<stop offset="60%" stop-color="#C58460" ></stop> 
		<stop offset="60%" stop-color="#866D65" ></stop>  
		<stop offset="70%" stop-color="#995645" ></stop> 
		<stop offset="70%" stop-color="#C58460" ></stop> 
		<stop offset="80%" stop-color="#AE5D49" ></stop> 
		<stop offset="80%" stop-color="#943A31" ></stop> 
		 
    </linearGradient>   
	 
	   
  </defs> 
 <g id="btn1"> 
	 <circle  cx="30" cy="45" r="8" fill="url(#gradEarth)" filter="url(#dropShadow1)" />  
	 <text id="txt1" x="15" y="70" font-size="1rem" fill="gold" >Start</text> 
 </g> 
 <!-- mercury --> 
  <g> 
  <animateTransform  
	  attributeName="transform"  
	  type="rotate" 
      begin="btn1.click"  	   
	  values="0 250 175;360 250 175"  
	  dur="8s" 
	  repeatCount="indefinite" 
  /> 
 <circle class="mercury-orbit" cx="250" cy="175" r="40"   /> 
 <circle class="mercury" cx="210" cy="175" r="6"  /> 
</g>  
   <!-- venus --> 
   <g> 
  <animateTransform  
	  attributeName="transform"  
	  type="rotate" 
	  begin="btn1.click" 
	  values="0 250 175;360 250 175"  
	  dur="10s" 
	  repeatCount="indefinite" 
  /> 
 <circle class="venus-orbit" cx="250" cy="175" r="60"     /> 
 <circle class="venus" transform="rotate(-45 250 175)" cx="190" cy="175" r="10"   /> 
</g>  
 <!-- Earth --> 
   <g> 
  <animateTransform  
	  attributeName="transform"  
	  type="rotate" 
      begin="btn1.click"	   
	  values="0 250 175;360 250 175"  
	  dur="12s" 
	  repeatCount="indefinite" 
  /> 
 <circle class="Earth-orbit" cx="250" cy="175" r="90"     /> 
 <circle class="Earth" cx="160" cy="175" r="10" transform="rotate(45 250 175)"  /> 
</g> 
    <!-- Mars --> 
  <g> 
  <animateTransform  
	  attributeName="transform"  
	  type="rotate" 
      begin="btn1.click"	   
	  values="0 250 175;360 250 175"  
	  dur="14s" 
	  repeatCount="indefinite" 
  /> 
 <circle class="Mars-orbit" cx="250" cy="175" r="120"     /> 
 <circle class="Mars" cx="130" cy="175" r="8" transform="rotate(90 250 175)"  /> 
</g>   
    <!-- Jupiter --> 
    <g> 
  <animateTransform  
	  attributeName="transform"  
	  type="rotate"  
	  begin="btn1.click" 
	  values="0 250 175;360 250 175"  
	  dur="16s" 
	  repeatCount="indefinite" 
  /> 
 <circle class="Jupiter-orbit" cx="250" cy="175" r="180"     /> 
 <circle class="Jupiter " cx="70" cy="175" r="20" transform="rotate(180 250 175)"  /> 
</g> 
  <circle class="sun" cx="250" cy="175" r="18"  > 
     <animate attributeName="r" values="18;18;22;22;22;18" dur="12s" repeatCount="indefinite" /> 
  </circle> 
	 
</div> 
<audio src="https://svg-art.ru/files/zodiac.mp3" autoplay="autoplay"></audio>

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

<div class="solar-system"> 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
      viewBox="0 0 500 400" >  
   
  <defs> 
	<filter id="dropShadow1"  
    	x="-20%" y="-20%"  
		width="150%" height="150%" 
	> 
	 <feGaussianBlur   stdDeviation="1" /> 
	</filter> 
	 <filter id="dropShadow2"  
		x="-20%" y="-20%"  
		width="150%" height="150%"> 
		<feGaussianBlur   stdDeviation="4" /> 
	 </filter> 
	  <radialGradient id="gradSun"> 
        <stop offset="80%" stop-color="yellow"> 
		 <animate attributeName="offset" values="80%;20%;80%" dur="12s" repeatCount="indefinite" /> 
		 </stop> 
        <stop offset="100%" stop-color="gold" > 
		<animate attributeName="stop-color" values="gold;red;gold" dur="6s" repeatCount="indefinite" /> 
		</stop> 
      </radialGradient> 
		<linearGradient id="gradEarth"> 
			<stop offset="40%" stop-color="dodgerblue"></stop> 
			<stop offset="100%" stop-color="yellowgreen" ></stop> 
		</linearGradient> 
	<linearGradient id="gradMercury">  
	    <stop offset="20%" stop-color="#824549"></stop> 
        <stop offset="20%" stop-color="#956356"></stop>   
        <stop offset="80%" stop-color="#5F3631" ></stop> 
		<stop offset="100%" stop-color="#807019" ></stop> 
    </linearGradient> 
	  <linearGradient id="gradVenus"> 
        <stop offset="40%" stop-color="#805050"></stop> 
        <stop offset="100%" stop-color="yellow" ></stop> 
      </linearGradient> 
	   
	  	<linearGradient id="gradMars"> 
        <stop offset="40%" stop-color="crimson"></stop> 
        <stop offset="100%" stop-color="yellow" ></stop> 
    </linearGradient>   
	    <linearGradient id="gradJupiter"> 
        <stop offset="10%" stop-color="#AE5D49"></stop> 
        <stop offset="10%" stop-color="#783632" ></stop> 
		<stop offset="20%" stop-color="#C58460" ></stop> 
		<stop offset="20%" stop-color="#866D65" ></stop> 
		<stop offset="30%" stop-color="#995645" ></stop> 
		<stop offset="30%" stop-color="#C58460" ></stop> 
		<stop offset="40%" stop-color="#AE5D49" ></stop> 
		<stop offset="40%" stop-color="#C58460" ></stop> 
		<stop offset="50%" stop-color="#AE5D49"></stop> 
        <stop offset="50%" stop-color="#783632" ></stop> 
		<stop offset="60%" stop-color="#C58460" ></stop> 
		<stop offset="60%" stop-color="#866D65" ></stop>  
		<stop offset="70%" stop-color="#995645" ></stop> 
		<stop offset="70%" stop-color="#C58460" ></stop> 
		<stop offset="80%" stop-color="#AE5D49" ></stop> 
		<stop offset="80%" stop-color="#943A31" ></stop> 
		 
    </linearGradient>   
 
	   
  </defs> 
  
 <g id="btn1" onclick='play()' > 
	 <circle  cx="30" cy="45" r="8" fill="url(#gradEarth)" filter="url(#dropShadow1)" />  
	 <text id="txt1" x="15" y="70" font-size="1rem" fill="gold" >Start</text> 
 </g> 
 <!-- mercury --> 
  <g> 
  <animateTransform  
	  attributeName="transform"  
	  type="rotate" 
      begin="btn1.click"  	   
	  values="0 250 175;360 250 175"  
	  dur="8s" 
	  repeatCount="indefinite" 
  /> 
 <circle class="mercury-orbit" cx="250" cy="175" r="40"   /> 
 <circle class="mercury" cx="210" cy="175" r="6"  /> 
</g>  
   <!-- venus --> 
   <g> 
  <animateTransform  
	  attributeName="transform"  
	  type="rotate" 
	  begin="btn1.click" 
	  values="0 250 175;360 250 175"  
	  dur="10s" 
	  repeatCount="indefinite" 
  /> 
 <circle class="venus-orbit" cx="250" cy="175" r="60"     /> 
 <circle class="venus" transform="rotate(-45 250 175)" cx="190" cy="175" r="10"   /> 
</g>  
 <!-- Earth --> 
   <g> 
  <animateTransform  
	  attributeName="transform"  
	  type="rotate" 
      begin="btn1.click"	   
	  values="0 250 175;360 250 175"  
	  dur="12s" 
	  repeatCount="indefinite" 
  /> 
 <circle class="Earth-orbit" cx="250" cy="175" r="90"     /> 
 <circle class="Earth" cx="160" cy="175" r="10" transform="rotate(45 250 175)"  /> 
</g> 
    <!-- Mars --> 
  <g> 
  <animateTransform  
	  attributeName="transform"  
	  type="rotate" 
      begin="btn1.click"	   
	  values="0 250 175;360 250 175"  
	  dur="14s" 
	  repeatCount="indefinite" 
  /> 
 <circle class="Mars-orbit" cx="250" cy="175" r="120"     /> 
 <circle class="Mars" cx="130" cy="175" r="8" transform="rotate(90 250 175)"  /> 
</g>   
    <!-- Jupiter --> 
    <g> 
  <animateTransform  
	  attributeName="transform"  
	  type="rotate"  
	  begin="btn1.click" 
	  values="0 250 175;360 250 175"  
	  dur="16s" 
	  repeatCount="indefinite" 
  /> 
 <circle class="Jupiter-orbit" cx="250" cy="175" r="180"     /> 
 <circle class="Jupiter " cx="70" cy="175" r="20" transform="rotate(180 250 175)"  /> 
</g> 
  <circle class="sun" cx="250" cy="175" r="18"  > 
     <animate attributeName="r" values="18;18;22;22;22;18" dur="12s" repeatCount="indefinite" /> 
  </circle> 
	 
</div>  
<audio src="https://svg-art.ru/files/zodiac.mp3" autoplay="autoplay"></audio>  
 
 
<script> 
var zodiac = new Audio(); 
zodiac.src = 'https://svg-art.ru/files/zodiac.mp3'; 
 
function play() { 
  zodiac.play(); 
} 
</script>