The concept of clipping and masking is pretty simple. Hide certain parts of elements and show others. The actual difference between them is pretty simple too. Clipping is always a vector path, where inside the path is visible and outside the path is not. Where a mask is an image, is treated as a grayscale image where the black parts mask the image to transparency and the white parts let the image through.

Implementing clipping and masking isn't particularly easy though, as the browser support for it (and all the little ins-and-outs) is quite varies. We try and go through all of it in this screencast, struggles and all.

The syntax for all the possibilities is:

.clip-me { 

  /* referencing path from an inline SVG <clipPath> */
  clip-path: url(#c1); 

  /* referencing path from external SVG */
  clip-path: url(path.svg#c1);

  /* polygon */
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

  /* circle */
  clip-path: circle(30px at 35px 35px);

  /* ellipse */
  clip-path: ellipse(65px 30px at 125px 40px);

  /* inset-rectangle() may replace inset() ? */
  /* rectangle() coming in SVG 2 */

   /* Masking */
   /* mask-image, mask-position, mask-repeat, mask-clip, mask-size ... */
   mask: url(mask.svg);
   mask-type: luminance || alpha;

   -webkit-mask-box-image: url(stampTiles.svg) 30 repeat;
   mask-border: url(stampTiles.svg) 30 repeat;

}

Some of the demo stuff we played with in this video are here and here.

Here's a whole bunch of resources on it:

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag