How to allow the path elements in an svg element to overflow the container

Question

I was writing an animation for my logo (here is the link to the codepen), you can see the code there as well, but I will post here as well.

So I targeted every path element and changed it's properties and everything works fine, except for the fact that since I use the "transform" to move the elements because they leave the container and are hidden.

This is the CSS for the SVG element

svg {
  width:400px;
  height:400px;
  margin-top:100px;
  margin-left:calc(50% - 200px);
  transform-style:preserve-3d;
  overflow:visible;
}

I tried adding a viewbox inline property to the svg tag but that didn't work either, what can I do? I want every path to be visible no matter where it is, is this possible?

Thank you in advance.

Answer 1

The overflow: visible rule you added to CSS definition for svg should have worked.

The reason it didn't was because your SVG also had a <clipPath> that had the effect of hiding the overflow. When you get rid of that also, things behave as you wanted.

Demo codepen

To get rid of the clip, I deleted the <clipPath></clipPath> element, and the clip-path="url(#clipPath20)" reference from the <g>. Both of these are near the start of the document.