<h1><code>clip-path</code> vs <code>mask</code></h1>

<p>Try moving the mouse over the <code>masked</code> and <code>clipped</code> versions and compare their collision area.</p>

<figure>
<img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" height="200">
  <figcaption>Original (no mask)</figcaption>
</figure>
  
<figure>
<img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" height="200" class="solid-masked collide">
  <figcaption>Masked</figcaption>
</figure>


<figure>
<img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" height="200" class="solid-clip collide">
  <figcaption>Clipped</figcaption>
</figure>

<svg width="0" height="0">
   <defs>
     <linearGradient id="linear-grad">
        <stop stop-color="#000" opacity="1" offset="0%"/>
        <stop stop-color="#fff" opacity="1" offset="100%"/>
      </linearGradient>
     
     <clipPath id="clip-star">
       <path d="M 40 0 L 0 40, 60 100, 0 160, 40 200, 100 140, 160 200, 200 160, 140 100, 200 40, 160 0, 100 60" />
     </clipPath>
  </defs>
    <mask id="solid-star">
      <path d="M 40 0 L 0 40, 60 100, 0 160, 40 200, 100 140, 160 200, 200 160, 140 100, 200 40, 160 0, 100 60" fill="#fff" />
    </mask>
    <mask id="grad-star">
      <path d="M 40 0 L 0 40, 60 100, 0 160, 40 200, 100 140, 160 200, 200 160, 140 100, 200 40, 160 0, 100 60" fill="url(#linear-grad)" />
    </mask>
</svg> 

.solid-masked {
  mask: url(#solid-star);
}

.solid-clip {
  clip-path: url(#clip-star);
}

.collision {
  background: #000;
  color: #fff;
}

figure {
  margin: 0 auto;
  text-align: center;
  display: inline-block;
  border: 1px solid;
}

figure img {
  height: 200px;
  margin: 1em;
  box-sizing: border-box;
}

figure img:hover {
  cursor: pointer;
}

svg {
  margin: 0;
  padding: 0;
}

let imgs = document.querySelectorAll('img');
for (let i = 0; i < imgs.length; i++) {
  let img = imgs[i];
  img.addEventListener('mouseover', function () {
    img.parentElement.classList.add('collision');
  });
  img.addEventListener('mouseout', function () {
    img.parentElement.classList.remove('collision');
  });
}