SVG with transparency

Question

I'm aiming to create an effect just like the one found on this codepen. There's an SVG with transparency over a background video. So far I have an AI document with a path shape selected that I exported from photoshop. Ideally I want the inside of the path to be transparent, but the rest to be white just like in the example. How can I achieve an effect like this?

it looks like it has something to do with this line of code, but I'm definitely misunderstanding something.

svg > rect {
    fill: white;
    -webkit-mask: url(#mask);
    mask: url(#mask);
}

I don't think my SVG is ready with just being a path, as if I export it it shows up as blank and if I put a stroke on the path either everything but the stroke is transparent or it doesn't appear with any transparency at all.

normally my workflow as a web developer never has me working this in depth with SVG's so I'm a little stuck on this one.

Answer 1

The #mask in that CSS rule, refers to this element in the SVG:

<mask id="mask" x="0" y="0" width="1920" height="1080" >
...
</mask>

You can learn about how masks work by reading the SVG specification or one of the many tutorials available on the web.