Cómo cambiar el tamaño de un SVG correctamente para que se amplíe en el desplazamiento y se mezcle con el fondo.

Como puede ver en el codepen, el código de ejemplo no es perfecto y no realiza lo que quiero lograr.

Estoy luchando para hacerlo con la alineación de CSS, el XG SVG necesita hacer zoom y combinarse correctamente con el fondo del video.

El tamaño inicial de XG SVG es más grande y no está alienado en el medio y el centro.

Mientras me desplazo, no se hace zoom ni se mezcla con el fondo.

Lo que quiero

1. En este ejemplo, quiero mantener el SVG más pequeño alineado en el centro y en el medio. (etapa inicial)
2. Cuando me desplazo, debería ajustarse a la altura de la sección del documento. (en el escenario 2)
3. Se acercará y desaparecerá con el fondo del video (en el escenario 3).

La misma animación ya existe en accenture.com/in-en

Mi código lo que logré ahora:

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

Gracias Por favor ayuda.