Анимация градиента SVG под углом

#css #css3 #svg #анимация

Как правильно реализовать анимацию градиента SVG элемента под углом и с задержкой?



svg {
  transform: rotate(250deg);
}




    

Ответы

Ответ 1

Угол наклона градиента обеспечивают параметры:

x1="45" x2="0" y1="75" y2="0"  
Анимация перехода градиента из одного цвета в другой:


.crc1 ~ defs stop {
  transition: 3s;    

Подбирая значения цвета начального градиента -stop:first-child    

и конечного - stop:last-child можно получить очень интересные эффекты:   

Анимация начинается при наведении курсора:



.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;
}