3

Как можно нарисовать именно такое солнце на CSS или SVG, чтобы оно еще вращалось и переливалось от желтого до оранжевого цвета?

Можно ли такое сделать?

введите сюда описание изображения

2 ответа 2

8

такое солнце на css или svg, чтобы оно еще вращалось и переливалось от желтого до оранжевого цвета

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	   width="300" height="300" viewBox="0 0 300 300" >  

<defs>
  <linearGradient id="Lgrad" x1="0%" x2="100%" y1="0%" y2="0%" >
   <stop stop-color="yellow" offset="0.1">
   <animate
    attributeName="stop-color"
	dur="6s"
	values="yellow;orange;yellow"
	begin="0s"
	
	repeatCount="indefinite"  /> 
   </stop>
   <stop stop-color="orange" offset="1">
    <animate
	 attributeName="stop-color"
	 dur="3s"
	 values="orange;yellow;orange"
	 begin="0s"
	 	 repeatCount="indefinite" /> 
   </stop>
   
  
  </linearGradient>
 </defs>
 <g id="sun">
<circle cx="150" cy="150" r="100"   stroke="url(#Lgrad)" stroke-width="100" stroke-dasharray="7.85" />
<circle cx="150" cy="150" r="100"  fill="url(#Lgrad)" stroke="yellow"  /> 
 </g> 
   <animateTransform xlink:href="#sun" attributeName="transform" type="rotate" dur="10s" values="0 150 150;360 150 150" repeatCount="indefinite" />
</svg>	 

Вариант с радиальным градиентом красивей смотрится

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	   width="300" height="300" viewBox="0 0 300 300" >  

<defs>
  <radialGradient id="Rgrad"  >
   <stop stop-color="yellow" offset="0.25">
  <!-- Анимация смены цвета градиента -->
  <animate
    attributeName="stop-color"
	dur="8s"
	values="yellow;orange;yellow"
	begin="0s"
	
	repeatCount="indefinite"  /> 
   </stop>
   <stop stop-color="orange" offset="1">
    <animate
	 attributeName="stop-color"
	 dur="4s"
	 values="orange;yellow;orange"
	 begin="0s"
	 
	 repeatCount="indefinite" /> 
   </stop>
   
  
  </radialGradient>
 </defs>
 <g id="sun">
<circle cx="150" cy="150" r="100"  fill="url(#Rgrad)" stroke="url(#Rgrad)" stroke-width="100" stroke-dasharray="7.85" />

 </g> 
      <!--Анимация вращения солнца -->
     
   <animateTransform
     xlink:href="#sun"
     attributeName="transform"
     type="rotate"
     dur="16s"
     values="0 150 150;360 150 150;0 150 150"
     repeatCount="indefinite" />
</svg>

7

Один из способов:

circle {
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
    fill: orange;
    stroke: orange;
  }
  50% {
    transform: rotate(1turn);
    fill: yellow;
    stroke: yellow;
  }
  100% {
    transform: rotate(2turn);
    fill: orange;
    stroke: orange;
  }
}
<svg viewbox="-100 -100 200 200" height=100vh>
  <circle r=60 stroke-dasharray=3.14 stroke-width=20 ></circle>
<svg>

Ваш ответ

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