Как на SVG реализовать анимацию теней и z-index?

Как реализовать на SVG подобный пример с игрой теней и изменением z-index элементов?
Для полного эффекта развернуть на весь экран и кликнуть для просмотра анимации.


const shadows = document.getElementsByClassName("shadows")[0]
const shadowsChildren = shadows.children
let count = 0
let left = false
shadows.addEventListener("click", function() {
let interval = setInterval(function() {
!left ? count++ : count--
shadowsChildren[left ? count : count - 1].style.zIndex = left ? count : shadowsChildren.length - count
shadowsChildren[left ? count : count - 1].className = !left ? 'span' : ''

if (count === shadowsChildren.length) {
left = true
clearInterval(interval)
}

if (count === 0) {
left = false
clearInterval(interval)
}
}, 100)
}) * {
margin: 0
padding: 0
}

html,
body {
width: 100%
height: 100%
background: #272727
}

.container {
position: fixed
width: 100vw
height: 100vh
display: flex
align-items: center
justify-content: center
background: orange
}

.shadows {
cursor: pointer
background: orange
position: relative
text-shadow: -15px 5px 20px #303030
width: 80vw
color: orange
text-align: center
letter-spacing: -20px
transition: all 0.25s ease-out .2s
font-family: fantasy
font-size: 200px
}

span {
position: relative
margin-left: -10px
transition: all 0.25s ease-out
}

span.span {
text-shadow: 15px 5px 20px #303030
transition: all 0.25s ease-out
}

Вариант css:hover


* {
margin: 0
padding: 0
}

html,
body {
width: 100%
height: 100%
background: #272727
}

.container {
position: fixed
width: 100vw
height: 100vh
display: flex
align-items: center
justify-content: center
background: orange
}

.shadows {
cursor: pointer
background: orange
position: relative
text-shadow: -15px 5px 20px #303030
width: 80vw
color: orange
text-align: center
letter-spacing: -20px
transition: all 0.25s ease-out .2s
font-family: fantasy
font-size: 200px
}

span {
position: relative
margin-left: -18px
transition: all 0.25s ease-out
}

.shadows:hover span {
text-shadow: 15px 5px 20px #303030
}

.shadows:hover span:nth-child(1) {
z-index: 8
}

.shadows:hover span:nth-child(2) {
z-index: 7
}

.shadows:hover span:nth-child(3) {
z-index: 6
}

.shadows:hover span:nth-child(4) {
z-index: 5
}

.shadows:hover span:nth-child(5) {
z-index: 4
}

.shadows:hover span:nth-child(6) {
z-index: 3
}

.shadows:hover span:nth-child(7) {
z-index: 2
}

.shadows:hover span:nth-child(8) {
z-index: 1
}


Ответ
Анимация тени
Анимация достигается изменением атрибута dx фильтра feOffset
Команда на выполнение:



* {
margin: 0
padding: 0
}

text {
text-align: center
font-family: sans-serif
font-size: 200px
font-weight: 900
fill: #FFA500
-webkit-filter: url(#shadowLetter)
filter: url(#shadowLetter)
}




<!-- Анимация тени Повторяющиеся цифры в атрибуте values, создают паузы в крайних позициях -->
attributeName="dx"
values="-12 20 20 -12 -12"
dur="3s"
fill="freeze"
repeatCount="indefinite"/>








C
L
I
C
K
M
E