Correct order for SVG mask and a div outside the mask

[Sean_has_started_coding]

Hello all

I am trying to ensure the masked text within the SVG is visible over the red circle (the div holding the circle is outside the SVG). I need the div to be outside the SVG as the circle is created from an elaborate animation where shapes are morphed into each other.

The issue I am having is the masked text within the SVG is not visible on top of the circle. 

I have placed absolute positioning for both the SVG and the circle and ensured the Z-index is higher for the latter. I thought this would solve the issue but I had to luck.
Any help for this would be fantastic. 
Not great urgency, I'm not looking into this until next week, but would be great if someone can offer assistance.

Thanks so much.

See the Pen GRYwrYM by HappyGooner (@HappyGooner) on CodePen

[akapowl]

Hello there Sean.

 

I think you just need to put the position property and z-index on the SVG itself instead of your group #seven.

 

Does this work more like you intended?

 

(I changed the radius of your svg circle from 80 to 75 - and added some infinite yoyo repeat to the tween; latter just for better showcasing)

 

See the Pen wvYQJXb by akapowl (@akapowl) on CodePen

[Sean_has_started_coding]

That's brilliant, thanks for getting back to me so quickly on this. Works just how I wanted and will get now with the animation.

Have a great weekend.