css – SVG gradient animation at an angle

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>
Post Views: 18
Scroll to Top