Анимация появления SVG-линий в зеро-блоке в Тильде

Добавляете новый элемент в зеро-блоке Vector
Далее создаём новый векторный элемент, либо экспортируем уже отрисованный (клик правой кнопкой мыши Import SVG here
Сохраняем
Добавляем класс векторному элементу, для этого жмём правой кнопкой мыши Add CSS Class Name
Копируем код ниже и вставляем его в блок T123
Ориентируясь по комментариям в коде вы можете настроить длительность и плавность анимации, также задержку перед проигрыванием каждого пути.
По необходимости можно задать размеры, форму скругления, толщину и цвет штрихов в стилях анимации



<!--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>