Воващ

если цель сохранить положение блока, при скролле , то

https://developer.mozilla.org/ru/docs/Web/JavaScri...

решал подобную задачу
линии строил svg -> path
положение нужных фигур находил Element.getBoundingClientRect()

Ну и математика, в данном случае я бы поступил примерно так:
нашёл бы центры кругов, протянул бы path

стоит отметить, что каждый из path строится попарно, при рендере страницы => на разных устройствах решает задачу

Сложно сказать не видя весь код, но есть предположение, что забыл

<canvas id="myChart" width="400" height="400"></canvas>

Тык

Первое что надумалось взять таблицу или массив соответствия, проверять по ней и заменять при необходимости.

Стоит обернуть в хук useCallback.

будет примерно так

const request =  useCallback(async (url, method = 'GET', body = null, headers ={}) => {
        setLoading(true)
        try{
            if (body) {
                body = JSON.stringify(body)
                headers['Content-Type'] = 'application/json'
            }

            const response = await fetch(url, {method, body, headers})
            const data = await response.json()

            if (! response.ok){
                throw new Error(data.message || 'Что-то пошло не так')
            }

            setLoading(false)

            return data
        }catch(e){
            setLoading(false)
            setError(e.message)
            throw e
        }
    }, [])

Сделал наглядно, чтобы понял логику действий, есть более короткое решение

const hanldeTextEditor = () => {
  let commands = [[3, 'a'], [1, 'b']]
  let text = ''
  
  commands.forEach((command)=>{
    for (let i = 0; i < command[0]; i++)
  text = text + command[1];
    console.log(text);
  })
  }

hanldeTextEditor()

перебери все символы строки, проверь на соответствие и выведи что нужно, столько раз сколько нужно

Анимация вызывается когда доскроллил до блока, чтобы определить положение блока стоит почитать о методах:

getBoundingClientRect
window.innerHeight
window.innerWidth

логично проверять значение инпута в который попадает текст

if(input.value === ''){
 alert("Пусто");
    return;
}

Можно взять все .product__item => перебирая их найти в них значения data-filter -> перевести в чиселко ->
по условию скрыть то, что нужно скрыть

let assortments = document.querySelectorAll('.product__item');

assortments.forEach(item =>{
  let any = parseInt(item.getElementsByTagName("P")[0].getAttribute("data-filter"));
  if(any < 2000){
    item.classList.add('none');
  }
});

весь прогон обернуть в функцию, передать туда значению по которому желаем фильтровать