I'm wondering if there is a way to use the Foundation grid, but then also add another element that is larger than the columns/rows in front or behind other elements. The large object is sort of part of the background, but it's an animated svg, so I can't just set it as a background.
There are two examples in the CodePen. The first(top) one is the one with the Foundation grid that I am trying to add this large, white, mostly transparent, svg circle to. The second(bottom) example is without the Foundation grid but displays the background circle (#bg-circle) as it should be.
I thought there might be some way to do it with a z-index, but I had no luck with it.
See the CodePen here