Why is this SVG animation cut in half?

Question

Here is the SVG animation (id="lottie404") that I'm trying to get to display full width. I'm trying to ammend the existing DOM via inspect mode.

Is there something wrong with the CSS? I've tried for hours and can't seem to find a solution. Thanks in advance

Please don't post links to 3rd party sites where your code is as (is the case here), those links can die over time (your link points to a 404 error). Always post your code right in your question. — Scott Marcus, May 20 '21 at 00:07
@ScottMarcus the animation in question is on the 404 page :) — Ozge Cokyasar, May 20 '21 at 12:49
In that case, you never posted your code anywhere, which is really not acceptable. We need your code posted in your question. — Scott Marcus, May 20 '21 at 15:25
The question is referring to the DOM. Maybe I should have clarified this. Anyways, @sveneeberth was able to understand and give the perfect solution :) — Ozge Cokyasar, May 26 '21 at 02:45

score 2 · Accepted Answer · answered May 20 '21 at 00:05

The problem is that you have the same svgs with the same IDs twice. An ID can only used once. So the second one references the smaller one in the head with clip-path="url(#__lottie_element_4)", because it's the first element with this ID in the DOM.
Remove the one in the header and you will see the other will work.

To solve this you have to use different Ids.

Why is this SVG animation cut in half?

1 Answers1