Анимация по траектории движения в адаптивном SVG

Пытаюсь сделать анимацию с зеленым носком. Я хочу переместить воздушный шар над нарисованной линией, и графика / анимация должны быть масштабируемыми.

У меня проблема с тем, чтобы выровнять воздушный шар svg с нарисованной линией. Как только ширина браузера не равна ширине области просмотра svgs, анимация не работает. Я почти уверен, что это не настоящий дух масштабируемой (!) Векторной графики. Так что я делаю не так? Как я могу выровнять воздушный шар по линии, даже если размер svg меняется?

Вот упрощенный код небольшого проекта:

TweenMax.to("#balloon", 3, {
    bezier: {
      values: MorphSVGPlugin.pathDataToBezier("#Path23",{
        //matrix:[1.5,0,0,1.5,0,scaleX+"%"],
        offsetX: -50,
        offsetY: -50,
       align:"#balloon"}),
      type: "cubic"
    },
    ease: Linear.easeNone,
    repeat: -1,
    force3D: true
  });

CodePen