Как можно нарисовать именно такое солнце на CSS или SVG, чтобы оно еще вращалось и переливалось от желтого до оранжевого цвета?
Можно ли такое сделать?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществутакое солнце на 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>
Один из способов:
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>