Is it possible to keep a gradient Stationary while rotating - css

Question

I am attempting to rotate a 'cog' using CSS (an SVG cog).
However I was wondering if it was possible to keep the gradient at a constant angle so that it appears more realistic.
e.g. cog rotates 20deg using CSS transforms but the gradient stays at 0deg so it looks like there is a constant light source.

Answer 1

You can just animate the background angle from 360 to 0 while animation the rotation from 0 to 360. it will make the background stay static. for make available animation of background angle use CSS.registerProperty.
As here:
CSS.registerProperty({
name: '--deg',
syntax: '<angle>',
inherits: false,
initialValue: '0deg',
});
:root {
--deg: 0deg;
}
body {
width: 100%;
height: 100vh;
margin:0;
padding:0;
overflow:hidden;
}
#d {
overflow:hidden;
width: 100px;
height: 100px;
position: absolute;
right:0;
left:0;
bottom:0;
top:0;
margin:auto;
background: linear-gradient(var(--deg), red, yellow, green);
transform-origin: center center;
animation: rotation 2s linear infinite;
}
#keyframes rotation {
0% {transform: rotate(0deg); --deg: 360deg}
100% {transform: rotate(360deg); --deg: 0deg}
}
<div id="d"></div>

Answer 2

So it turns out that you can't rotate the gradient in an SVG with CSS (or at least I couldn't find it if you can).
Instead using native SVG rotation on the gradient was the solution.
They key is to add the following within the <linearGradient>
<animateTransform
attributeName="gradientTransform"
type="rotate"
from="0 250 250"
to="360 250 250"
dur="10s"
repeatCount="indefinite"/>
body {
display: flex;
align-items: center;
justify-content: center;
}
.cog {
width: 500px;
height: 500px;
animation: rotation-0 10s linear infinite;
}
#keyframes rotation-0 {
0% {
transform: rotate(1deg);
}
100% {
transform: rotate(-359deg);
}
}
<svg class="cog" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" xml:space="preserve">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="20%" style="stop-color:#28b493;stop-opacity:1" />
<stop offset="80%" style="stop-color:#007c9b;stop-opacity:1" />
<animateTransform
attributeName="gradientTransform"
type="rotate"
from="0 22 22"
to="360 22 22"
dur="10s"
repeatCount="indefinite"/>
</linearGradient>
</defs>
<path fill="url(#grad)" d="M44,24.707v-5.5l-6.574-2.738c-0.184-0.516-0.377-1.015-0.613-1.505l2.656-6.606l-3.891-3.889l-6.549,2.696 c-0.498-0.242-1.008-0.445-1.535-0.634L24.707,0h-5.5l-2.718,6.509c-0.548,0.194-1.075,0.397-1.595,0.646L8.357,4.528L4.469,8.416 l2.665,6.478c-0.259,0.532-0.467,1.074-0.667,1.633L0,19.293v5.5l6.472,2.697c0.199,0.559,0.413,1.1,0.67,1.633l-2.615,6.52 l3.888,3.889l6.494-2.676c0.522,0.248,1.054,0.447,1.601,0.635L19.293,44h5.5l2.721-6.543c0.523-0.193,1.039-0.396,1.533-0.633 l6.596,2.643l3.889-3.889l-2.709-6.562c0.232-0.494,0.418-0.994,0.602-1.504L44,24.707z M21.957,31.583 c-5.289,0-9.582-4.292-9.582-9.583s4.293-9.583,9.582-9.583c5.292,0,9.583,4.293,9.583,9.583S27.248,31.583,21.957,31.583z"/>
</svg>

Answer 3

.box-cirlce {width:100%; position:relative;}
.cog-small {
width: 80px;
height: 80px;
position: absolute;
top: 0;
left: 0;
background: url('https://ladaworld.com/299-large_default/differential-24-splines-side-gear.jpg') center center no-repeat;
background-size: contain;
}
#cog {
-webkit-animation: cog 5s infinite;
-moz-animation: cog 5s infinite;
-ms-animation: cog 5s infinite;
animation: cog 5s infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear
}
#-webkit-keyframes cog {
100%{ -webkit-transform: rotate(360deg)}
}
#-moz-keyframes cog {
100%{ -webkit-transform: rotate(360deg)}
}
#-ms-keyframes cog {
100%{ -webkit-transform: rotate(360deg)}
}
#keyframes cog {
100%{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg)
}
}
<div class="box-cirlce"><div class="cog-small" id="cog"></div></div>