Как на 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; }

C L I C K M E

Вариант 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; }

C L I C K M E

Ответ

Сложная анимация перемещения
Основа этой анимации - перемещение отдельной буквы вместе с фильтрами, создающими тень.
На первом этапе все буквы из начальных позиций собираются в середину слова. На втором этапе буквы разбегаются из середины на исходные позиции
Все перемещения букв реализуются командой изменения значения атрибута "X", задающего горизонтальную координату буквы:
C
Чтобы не запутаться в последовательности начала и окончания разных анимаций, необходимо продумать систему присвоения имен уникальных идентификаторов анимаций.
В данном примере команда начала анимации для каждой буквы включает название буквы. Например: begin="anC", begin="anL" Для анимаций возврата букв на исходную позицию:
begin="anBackC", begin="anBackL" Логика последовательности выполнения анимаций реализуется при помощи конструкции: begin="anBackC.end+0.25s" Словами это звучит так, - анимация возврата буквы "L" начнется после окончания анимации возврата буквы "C", после паузы равной 0.25s (секунды)
Смотреть интересней в полно-экраном режиме снипета
* { 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); }