How to resize SVG Tweens on Scroll to fit with section's background

Question

How to resize a SVG properly to make it zoom on scroll and blend with background.

As you can see in the codepen, the example code is not perfect and performing what i want to achieve.

I am struggling to do it with CSS alignment the XG SVG need properly zoom and blend with video background.

The initial size of XG SVG is bigger and not middle and center aliened.

While I am scrolling it's not zooming and blend with background.

What I want

1. In this example I want to keep the SVG smaller center and middle aligned. (initial stage)
2. When I scroll it should fit to the document section height. (on stage 2)
3. It will zoom and washout with video background.(on stage 3)

The same animation already exist on accenture.com/in-en

My code what I achieved now:

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

Thanks Please help.