I want to create a SVG icon similar to this:

enter image description here

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?


1 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.

    1. Cut it

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

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

    4. 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

  • Tested? What SVG version supports transparency mask?
    – user82991
    May 30, 2018 at 6:55
  • yes, check it here codepen.io/danielillo/pen/dKyBEm
    – user120647
    May 30, 2018 at 7:00
  • 1
    @Danielillo That's really cool, thanks for the detailed instructions too! May 30, 2018 at 7:49

Not the answer you're looking for? Browse other questions tagged or ask your own question.