I see the a couple of people has mentioned this to you so, I thought I'd repeat it here in a bit more detail.
CodePen does a lot of the setup for you and is designed to make coding little snippets super easy.
In the HTML tab, you only need to add what goes inside the <body> tag. There's no need for anything else.
As for your question, I think you are trying to do a bunch of things at once but are a bit lost in the details.
You have two SVGs and one wrapper object. Your wrapper object is set to be 1000px wide and high. One of your SVGs is 500px wide and high. It is also absolutely positioned while the other SVG has no set width and height but has a viewBox of "0 0 1366 768". Effectively, the two SVGs are of different sizes. And since you have on absolutely positioned, it will sit on its position relative to the first parent that's doesn't have a 'static' position.
In order for you to make sense of what's going wrong here, you need to understand how SVG scales and how elements are positioned with CSS.