Нужно реализовать циклическое изменение цвета svg элемента в течении к примеру 5 секунд, но цвет должен меняться сверху в низ(это и не получается). Как это сделать через css?
Вот такой результат хочу получить, сама стрелка это svg. Не выходит такая анимация цвета заливки
<svg class="main-arrow main-arrow_bottom">
<path d="M8.5 34.6804C8.5 34.9565 8.72386 35.1804 9 35.1804C9.27614 35.1804 9.5 34.9565 9.5 34.6804H8.5ZM9 0L9.38168 -0.32299C9.28668 -0.435254 9.14707 -0.5 9 -0.5C8.85293 -0.5 8.71332 -0.435254 8.61832 -0.32299L9 0ZM17.6183 10.9583C17.7967 11.1691 18.1122 11.1954 18.323 11.017C18.5338 10.8386 18.5601 10.5231 18.3817 10.3123L17.6183 10.9583ZM-0.381677 10.3123C-0.56006 10.5231 -0.533784 10.8386 -0.32299 11.017C-0.112195 11.1954 0.203295 11.1691 0.381677 10.9583L-0.381677 10.3123ZM9.5 34.6804V0H8.5V34.6804H9.5ZM8.61832 0.32299L17.6183 10.9583L18.3817 10.3123L9.38168 -0.32299L8.61832 0.32299ZM0.381677 10.9583L9.38168 0.32299L8.61832 -0.32299L-0.381677 10.3123L0.381677 10.9583Z" transform="translate(1 1.04108)"/>
</svg>