Как замаскировать внутреннюю часть элемента с помощью snap.svg или svg

Question

Я хотел бы знать, возможно ли замаскировать часть элемента
с формой другого элемента. Это звучит немного абстрактно, поэтому я предлагаю вам взглянуть на пример:

Вот пример того, что я хотел бы сделать.

Пример HTML (просто визуальный пример):

<div id="tomask"></div>
<div id="mask"></div>
<p>I want the darker part to be transparent</p>

Пример css (такой же):

#tomask{
margin:50px;
width:100px;
height:100px;
background:black;
opacity:0.3;
position:absolute;
top:0;
left:0;
}

#mask{
margin:60px;
width:80px;
height:80px;
background:black;
opacity:0.3;
position:absolute;
top:0;
left:0;
}