Выполнить keyframes или иным способом анимировать большое количество ellipse?

#javascript #jquery #svg #анимация #smil

Мой прошлый вопрос  был задан не корректно так как отсуствовала сама возможность
анимировать эту фигуру.

Изначально требовалось создать обычный символ/букву или слово. 

В итоге надо получить вот такую штуку как на картинке. 



Что бы не усложнять я выбрал просто произвольную форму вместо буквы 

В codepen мой svg _https://codepen.io/topicstarter/pen/YBVWKx так как количество
символов не позволяют поместить код в сниппет. 

Как видно из примера, там 393 ellipse, которые залиты градиентом. 

У меня есть мысль, - сделать прорисовку этих эллипсов подобно, как делается анимация
stroke-dasharray и stroke-dashoffset, как показано здесь, но это не возможно сделать. 

Но есть возможность повторить эффект скрыв все стили для всех элементов одним разом
[class*="st"] и написать с important нужный css и в keyframes отображать с определённым
интервалом эти эллипсы. 

Вопрос : каким образом можно это реализовать без большого кол-ва кода css ??

Теги ставлю любые так как не знаю каким образом это сделать. 
    

Ответы

Ответ 1

Вариант анимации с окружностями, эллипсами

Скажу сразу, он меня не устроил, прежде всего своей ресурсо-затратностью. Уже при
количестве элементов <200, а нужно ещё больше, ощущаются заметные задержки в отрисовке.
Вторая причина,- невыразительность, при любой форме пути. 

Просто покажу, что получилось. 



.container {
   width:100%;
   height:100%;
   }
 

    
 




Вариант stroke-dashoffset

Пошаговая инструкция   


В векторном редакторе набираем слово для анимации. Выбираем шрифт и
размер: MV Boli 144px


   

Для анимации этого слова нам необходима средняя линия (path)  каждой буквы 

Убираем в редакторе заливку букв, чтобы не мешала рисовать среднюю линию. 

  


Инструментом Рисовать кривые Безье наносим узловые точки
Выделяем контур вместе с узловыми точками
Делаем узловые точки автоматически сглаженными  
Рычагами управления узловых точек придаем нужную форму кривой, чтобы повторяла внешние
контуры буквы.    


Цифры в описании выше, соответствуют цифрам на картинке     


Вот так должно получиться после выполнения этих этапов  





Сохраняем файл в формате - оптимизированный SVG и забираем из него
патчи средних линий букв.
С помощью скрипта узнаем для каждой буквы максимальную длину средней
линии


    

Анимация для одной буквы  



 
 

  


  

Повторяем анимацию для остальных букв, добавляем градиенты, фильтры. 
Тут можно долго экспериментировать с украшательствами 

Для перезапуска лучше перегрузить сниппет. Так как после окончания анимации  для
того, чтобы изображение осталось на экране применена заморозка изображения fill="freeze" 

Ниже полный код.    

Анимация начинается после клика мышкой



.container {
   width:100%;
   height:100%;
   }

    



  

Live Demo


Ответ 2

Я обратился за помощью к бывшему участнику ru.stackoverflow.com а он сам дуб дубом
и он задал вопрос на q&a и благодаря этому ответу а точнее именно участнику 0xD34F
решение этого вопроса оказалось доступным ...

Результат в примере но с градиентом  :



let state = true;
document.querySelector('button').onclick = () => {
  state = !state;
  const items = document.querySelectorAll('circle');
  items.forEach((n, i) => {
    setTimeout(() => {
      n.classList[state ? 'add' : 'remove']('st0');
    }, (state ? items.length - i : i) * 3);
  });
};
circle {
  display: none;
}

circle.st0 {
  display: inline;
  stroke: #fff;
  stroke-width: 0px;
  fill: url(#linear);
}







Отдельное спасибо Не нашему участнику 0xD34F и нашему участнику AlexandrTT
Здесь всё равно отображается stroke в codepen нет : https://codepen.io/topicstarter/pen/GzEmXr
https://codepen.io/topicstarter/pen/ZwyKzr