How to allow the path elements in an svg element to overflow the container
<p>I was writing an animation for my logo  (<a href="http://codepen.io/samirc/pen/yeRmMw?editors=1100" rel="nofollow">here</a> is the link to the codepen), you can see the code there as well, but I will post here as well.</p>

<p>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.</p>

<p>This is the CSS for the SVG element</p>

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

<p>I tried adding a <code>viewbox</code> 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? </p>

<p>Thank you in advance.</p>