Воващ

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

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

один из вариантов использовать Animate