Как сделать анимацию c одного цвета градиента на другой с помощью transition

Необходимо сделать плавный, красивый переход с одного основного цвета градиента, например красного на синий.
Код примера:


.crc1 { fill: url('#grad1') }

Для плавности нужно использовать анимацию при наведении курсора на svg элемент.

Ответ
Вариант #1
В начальном состоянии градиент имеет один цвет - красный

При наведении курсора градиент состоит из двух цветов:
.crc1:hover ~ defs stop:first-child { stop-color: #24bed2 } .crc1:hover ~ defs stop:last-child { stop-color: #32ffe4 }
Ниже полный код


.crc1 { fill: url('#grad1') } .crc1 ~ defs stop { transition: 2s } .crc1:hover ~ defs stop:first-child { stop-color: #24bed2 } .crc1:hover ~ defs stop:last-child { stop-color: #32ffe4 }

Вариант #2
Двухцветный градиент.
Техника реализации та же, что и в первом варианте, но в начальном и конечном состоянии анимации у градиента два цвета меняются на два других цвета.
При подборе цветовой гаммы можно найти интересные варианты.
Например: вариант ниже напоминает море, когда на смену ночи приходит яркий, солнечный день.


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

Вариант #3
Анимация градиента для текста


.crc1 { fill: url('#grad1') } .crc1 ~ defs stop { transition: 2s } .crc1 ~ defs stop:first-child { stop-color: dodgerblue } .crc1:hover ~ defs stop:last-child { stop-color: gold } <!-- <circle class="crc11" cx="50" cy="50" r="50"/> --> Text