<!--https://dsgnmax.ru/animation-path-svg--> <script src="https://unpkg.com/animejs@3.1.0/lib/anime.min.js"></script> <script>
    var visibilitychangeLogEl = document.querySelector('.vector');
        anime({
          targets: '.vector path',  //вместо .vector указать свой класс svg-элемента
          strokeDashoffset: [anime.setDashoffset, 0],
          easing: 'easeInOutSine',  //Плавность анимации
          duration: 3000,   //Длительность анимации
          delay: function(el, i) { return i * 300 },   //Задержка перед проигрыванием каждого элемента в svg-файле
          direction: 'alternate',
          loop: true,     // true - анимация зацикливается, false - нет, число - количество повторений
        });
</script> <style>
    .vector path{
            /*stroke-dasharray: 20;   Длинна штриха*/
            stroke-linecap: round;  /*Скругленные углы у штрихов butt, round, square*/
            /*stroke-linejoin: miter; /*Как будут выглядеть углы обводки bevel, miter, round*/
            /*stroke-miterlimit: 8; /*Соприкосновение двух линий под острым углом. работает только с stroke-linejoin - miter */
            /*stroke: green;  /*Цвет обводки*/
           /* stroke-width: 6;    /*Толщина обводки*/
        }
</style>  

   <!--https://dsgnmax.ru/animation-path-svg--> <script src="https://unpkg.com/animejs@3.1.0/lib/anime.min.js"></script> <script>
  document.addEventListener('DOMContentLoaded', function() {
    var observer = new IntersectionObserver(function(entries) {
      // для каждой записи-цели проверяем, пересекается ли элемент с зоной видимости
      entries.forEach(entry => {
        if (entry.isIntersecting) { // если элемент появляется в зоне видимости
          anime({
            targets: '.vector path', // тут указываем ваш класс элемента
            strokeDashoffset: [anime.setDashoffset, 0],
            easing: 'easeInOutSine',    //Плавность анимации
            duration: 3000, //Длительность анимации
            delay: function(el, i) { return i * 300 },
            direction: 'alternate',
            loop: true, // true - анимация зацикливается, false - нет, число - количество повторений
          });
          
          // Опционально отменяем наблюдение если анимация должна проиграть только один раз
          observer.unobserve(entry.target);
        }
      });
    }, { 
      threshold: 0.1  // Задаем порог срабатывания 10%
    });
    
    // Начинаем наблюдение за элементом .vector
    var elementToObserve = document.querySelector('.vector');
    if(elementToObserve) observer.observe(elementToObserve);
  });
</script> <style>
    .vector path{
            /*stroke-dasharray: 20;   Длинна штриха*/
            stroke-linecap: round;  /*Скругленные углы у штрихов butt, round, square*/
            /*stroke-linejoin: miter; /*Как будут выглядеть углы обводки bevel, miter, round*/
            /*stroke-miterlimit: 8; /*Соприкосновение двух линий под острым углом. работает только с stroke-linejoin - miter */
            /*stroke: green;  /*Цвет обводки*/
           /* stroke-width: 6;    /*Толщина обводки*/
        }
</style>