Максим

Если бы Вы попробовали отдебажить какие классы видит ваша программа при наведении, то определили бы что класс необходимо присвоить картинке, а в js коде нужно использовать e.target.classList.contains("item")
https://codepen.io/zb-venom/pen/jOyBZdX

if (e.target.classList.contains("item")) {
    value.innerHTML = e.target.parentNode.dataset.text;
   }  else {
    value.innerHTML = '';
   }

Анимация вдоль кривой работает примерно так:
- берутся координаты точки на кривой (px=242, py=51)
- берутся координаты центра окружности (сx=242, сy=51)
- значения складываются (x = cx + px, y = cy + py) и окружность перемещается в полученные координаты.

Исправить можно перемещением начальной точки кривой в точку (0, 0) и последующим сдвигом этой кривой при помощи transform=translate()

<path d="m 0 0 c-118.35-13.036-33.219 195.03-196.4 83.472" fill="none" stroke="#000" stroke-width=".2" id="path" transform="translate(241.82 50.942)"/>
<circle cx="241.82" cy="50.942" r="7.3" fill="#fff" stroke="#006700" id="circle" />

document.addEventListener("click", (e) => {
    let currentId = "";
    if (e.target.classList.value === "playing-field-item") {
        currentId = e.target.id;
    }
    console.log(currentId);
})

Есть, но я бы не сказала, что много. И нужно как-то подтверждать квалификацию. Иначе вам предложат только место помощника вроде клавиатурной обезьяны. Типа не анализировать данные, а лазить собирать...
Вы бы лучше по фриланс-сайтам и полазили, чем тут спрашивать. Кстати, навыки анализа как раз пригодятся. Смотрите два направления:

1. Лента проектов. Очень часто выполненный проект не закрывается, а так и продолжает висеть. То есть вы можете отматывать ленту и на месяц, и на полгода... И смотреть, кого там ищут.
   
2. Каталог фрилансеров. Выбираете интересующее вас направление, смотрите, какие у аналитиков навыки, как они опсываются, за что этих людей благодарят в отзывах. И чего лежит в их портфолио.
   

Профит.

Тест лучше рисовать моноширинным шрифтом, чтобы не дергалась строка при перемене узких и широких букв.
В кадре меняется весь текст. Относительно исходного в нём заменяется одна из позиций на случайную букву.
Здесь чуть хитрее: буквы меняются очень быстро, каждый кадр, в течени 1/4 времени, отведённого на каждую смену – так интереснее:
Не разберусь, почему при доп. клике цикл проигрывается дважды..

Не очень удачное решение..
Во-первых анимация не бесконечна, во-вторых это явно повлияет на производительность.

Изучите этот пример, возможно он вам поможет найти более подходящее решение

Можно же решить просто средствами CSS:

.cart-servise:hover i {
color: #fff;
}

Решение на jquery

то, что для этого нужно.
как минимум - html и css.
дополнительно - js.

Выводится фиксированное количество разрядов числа, вместо отсутствующих подставляются нули:

function output(value) {
  const digits = document.querySelectorAll('селектор span`ов');
  const { length } = digits;

  Array
    .from(`${value}`.padStart(length, 0).slice(-length))
    .forEach((n, i) => digits[i].innerText = n);
}

Число выводится как оно есть, количество span'ов не фиксировано:

function output(value) {
  document.querySelector('селектор родительского элемента span`ов').innerHTML = Array
    .from(`${value}`, n => `<span>${n}</span>`)
    .join('');
}

Вы родителю .item присваиваете высоту .hidden. Там ещё label рядом лежит, у которого своя высота есть + бордер + маргин. Замените 70 в расчёте h на высоту лейбла + его нижний маргин, и логика будет правильной. А ещё лучше просто сделайте так: let h = parent.scrollHeight;

"123"
  .split('')
  .map(digit => Number(digit))
  .filter(digit => ! isNaN(digit))
  .reduce((sum, digit) => sum + digit, 0)

https://svg-art.ru/?p=1783