Дело в том что при ресайзе окна, нужно выключать анимацию, так как размеры холста заданы в % и они меняются без анимации в отличии от фигуры, таким образом фигуры режется.

Предлагаю переделать так:
    function render(position, shape, animation){
        $TARGET_CONTAINER.css("top", position * stepLength + "vh");
        TARGET_SHAPE.animate(shape, animation, 'linear').animate({fill: getRandomColor() }, 500, 'backOut');
    }

и соответственно вызывать при скролле:
render(newPosition, shapes[Math.floor(newPosition)], 200);

а при ресайзе:
render(newPosition, shapes[Math.floor(newPosition)], 0);