прокачай свои знания по работе со стандартными блоками в тильде
кастомизация стандартных блоков с помощью кода
Смотрите подробную инструкцию и код ниже
анимация появления обоводки в zero‑блоке
Инструкция

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


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

Made on
Tilda