Как правильно реализовать анимацию градиента SVG элемента под углом и с задержкой?
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>