RAX7

Либо использовать async/await

const myArray = ["1", "2", "3", "4"];
(async function (array) {
  for (item of array) {
    await fetch(`https://jsonplaceholder.typicode.com/posts/${item}`)
      .then((response) => response.json())
      .then((response) => console.log(response))
      .catch((error) => console.error(error));
  }
})(myArray);

Либо reduce

const myArray = ["1", "2", "3", "4"];
myArray.reduce((p, item) => {
  return p
    .then(() => fetch(`https://jsonplaceholder.typicode.com/posts/${item}`))
    .then((response) => response.json())
    .then((response) => console.log(response))
    .catch((error) => console.error(error));
}, Promise.resolve());

А зачем её переделывать. Просто нормализуй число которое в нее передается

// t от 0 до 0.5:
easeOutQuint(t * 2);
// t от 0.5 до 1:
easeOutQuint((t - 0.5) * 2);

Структуру данных сделай по другому, так проще будет

К ScrollMagic можно такую прокрутку прикрутить.

beginElement и onend новые фичи и еще плохо поддерживаются браузерами. Нормальным способом сделать анимацию на svg можно с помощью библиотек на js (animejs, kutejs, gsap).
Я не знаю нормального способа как сбросить smil анимацию, можно клонировать тег animate, заменить оригинал клоном и клону задать атрибут begin = performance.now().
https://codesandbox.io/s/graph-animation-yglnz?fil...
P.s. свойства stroke-dashoffset и opacity должны нормально анимироваться через css (keyframes/transition), так что от smil анимации можно вообще избавиться.

Можешь поиграться с mix-blend-mode
или же рисовать разделение цветов курсора через линейный градиент.

Можно.

как разместить нулевые координаты в центр канваса?

ctx.translate(w/2, h/2); // сдвигаем точку (0, 0) в центр холста

window.onscroll = function(event) {

window.addEventListener('scroll', onscroll);
function onscroll(event) {

Используй линейный градиент, примерно как здесь: https://jsfiddle.net/RAX7/m2t98cjq/