Максим

Скачайте нормальный шрифт и будет вам счастье.

Если не лень, то можно сохранить каждую фигуру отдельно(желательно в svg) и позиционировать на фоне, таким образом у фигур будет плавающая позиция и на других экранах можно перестроить по другому, убрать половину на мобильных и т.д.. выглядеть это будет примерно так :

background: url(../images/other/decor-figure-1.svg) no-repeat 53% 6%,
            url(../images/other/decor-figure-2.svg) no-repeat 45% 22%,
            url(../images/other/decor-figure-3.svg) no-repeat 82% 22%,
            url(../images/other/decor-figure-4.svg) no-repeat 45% 96%,
            url(../images/other/decor-figure-5.svg) no-repeat 83% 82%

Если бы Вы попробовали отдебажить какие классы видит ваша программа при наведении, то определили бы что класс необходимо присвоить картинке, а в 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.