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

#javascript #css #svg #анимация #svg_animation

Как реализовать на 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
  




    

Ответы

Ответ 1

Сложная анимация перемещения

Основа этой анимации - перемещение отдельной буквы вместе с фильтрами, создающими тень. 


На первом этапе все буквы из начальных позиций собираются в середину
слова. 
На втором этапе буквы разбегаются из середины на исходные позиции  


Все перемещения букв реализуются командой изменения значения атрибута "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);
}



Ответ 2

Анимация тени

Анимация достигается изменением атрибута 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);
}



Ответ 3

Тени выполнены с помощью фильтров смещения - feOffset и размытия - feGaussianBlur
Чтобы получить эффект наложения одной буквы на другую пришлось для каждой буквы писать
отдельную команду с применением фильтра:   

 C


К сожалению приложение смотрится немного по разному в FireFox и в Chrome   

Ниже полный текст приложения



* {
  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);
}