如何调整滚动时SVG补间动画尺寸以适配区块背景

当前已有的示例代码不够完善，无法实现预期效果。
目前遇到CSS对齐相关问题：XG SVG需要实现正确的缩放效果，并与视频背景融合。
现有实现存在两个明显问题：一是XG SVG初始尺寸偏大，且没有实现居中对齐；二是页面滚动时无法触发预期的缩放和背景融合效果。

预期实现效果 #

• 初始状态下，SVG尺寸更小，且水平垂直居中对齐
• 滚动到第二阶段时，SVG尺寸适配所在文档区块的高度
• 滚动到第三阶段时，SVG放大并逐渐隐去，融入视频背景

该动画效果已有成熟落地实现可参考。

现有已完成代码的示例路径：

https://codepen.io/BhumikaD/pen/bGodLLg

效果示意：

恳请各位提供实现思路或代码方案，谢谢！

内容的提问来源于stack exchange，提问作者Bhumika Das