AI: Make lines "burn" through underlying layer (transparency) [duplicate]

Question

I want to create a SVG icon similar to this:

Instead of drawing the lines, I want to create the shapes formed by the negative space (the white shapes).

What I did was:

Ellipse Tool > drew a circle > Fill: White
Ellipse Tool > drew a vertical ellipse and centered it
Line Segment Tool > drew 3 horizontal lines

Then I thought to myself "voila!" only to realize I had no idea how to use what I drew on the upper layers to "burn" through and create transparent lines on the bottom layer (which is the white circle). In photoshop I would copy paste and delete the lines to get desired effect as pictured above, but I'm not sure how to proceed in AI.

Question: How can I use upper layer lines / ellipses (or other shapes) to create transparent lines in the bottom layer?

Answer 1

Creating a transparency mask on the object you want to get the empty area.

1. Select the black and white object you create: Black will be invisible, white is visible.

   2. Cut it

   3. Create the object to be masked and keep it selected

   4. Open the transparency panel > Click on the right square > Uncheck Clip > Paste in place

   5. Click on the Transparency panel left square to go back to the editing area

If you want to apply a transparency mask to a whole layer, select the layer clicking on the layer right circle. But Illustrator is not Photoshop, it is better to work over an object than over a layer.

Here the working SVG : https://codepen.io/danielillo/pen/dKyBEm