Responsive SVG path to different aspect ratios

[Chromium]

So I have kind of a noob question regarding SVGs for you guys. This one might be more of an SVG question than a GSAP question but since I have no idea where to start, I thought that maybe some of you SVG animation pros might be able to point me in the right direction or save me time if it isn't doable.

 

So I was looking at this animation that I forked from one of the examples posted by you guys on the forum and I was thinking of doing the exact same animation but have it be surrounding a form. I had the genius idea of absolutely positioning the SVG from the example in the CodePen and dynamically (from the JS) set its width and height equal to the form's width/height to get this to work across all screen sizes (since the responsive form's width/height changes on different screen sizes)... the animation pros in you guys probably already know why this didn't work off the bat haha.

 

As you can see from the CodePen, I've turned the square into a horizontal rectangle since my form has a longer width than its height on Desktop. Now since the SVG has 1 path, it fails to scale once the form's height becomes longer than its width on smaller screens. Now I thought, one solution to this problem is to have 2 SVGs; one with a vertical rectangle path for portrait screens (which I can know from simply checking if the browser's window.innerHeight() is bigger than its window.innerWidth()), and one with a horizontal rectangle path for landscape/desktop screens (as in my CodePen).

That being said, my solution above seems to have some edge cases that aren't covered... for example, when responsively resizing the browser's screen, there seems to be cases where the SVG rectangle path seems to still fail to match the required width/height even though the screen's width is still larger than the screen's height (the form's width is also larger than its height in such cases).

I'm just confused. I really thought the 2 SVGs solution would be it but those odd cases are really throwing me off. Perhaps I'm looking at an aspect ratio problem? Do I really need to worry about a 3rd SVG for when the screen size is close to a square as well? Lol

See the Pen bGLgoPO by fuad-zeyad-tareq (@fuad-zeyad-tareq) on CodePen

[Chromium]

Oh my lord!!! I just had to set preserveAspectRatio="none". I really thought I had tried that before and it didn't work... don't even need 2 SVGs!

 

Great job on the DrawSVG plugin by the way guys! It's really awesome!