Question:
How to correctly implement an SVG element gradient animation at an angle and with a delay?
svg {
transform: rotate(250deg);
}
<svg>
<circle r="27" cx="28" cy="28" fill="url(#lightGradient)"/>
<linearGradient id="lightGradient">
<stop offset="0%" stop-color="rgba(0,99,71, 1)">
<animate attributeName="stop-color" values="rgba(0,99,71, 0.62); rgba(0,99,71, 0.12)" dur="4s" repeatCount="indefinite"/>
</stop>
<stop offset="100%" stop-color="rgba(228,210,9, 1)">
<animate attributeName="stop-color" values="rgba(228,210,9, 0.62); rgba(228,210,9, 0.22)" dur="4s" repeatCount="indefinite" />
</stop>
</linearGradient>
</svg>
Answer:
-
The slope angle of the gradient is provided by the following parameters:
x1="45" x2="0" y1="75" y2="0"
-
Animation of the gradient transition from one color to another:
.crc1 ~ defs stop { transition: 3s;
Picking up the color values of the initial gradient – stop:first-child
and final – stop:last-child
, you can get very interesting effects:
Animation starts on hover:
.crc1 {
fill: url('#grad1');
}
.crc1 ~ defs stop {
transition: 3s;
}
.crc1 ~ defs stop:first-child {
stop-color: #24bed2;
}
.crc1:hover ~ defs stop:last-child {
stop-color: #F4FFAF;
}
<svg class="the-svg" width="200px" height="200" viewBox="-10 -10 120 120">
<circle class="crc1" cx="50" cy="50" r="50" stroke="#F4FFAF"/>
<defs>
<linearGradient id="grad1" x1="45" x2="0" y1="75" y2="0" gradientUnits="userSpaceOnUse">
<stop offset="2%" stop-color="#2C2C2C"/>
<stop offset="50%" stop-color="#2C2C2C"/>
</linearGradient>
</defs>
</svg>