TIL: SVG as clip-path

You can use an svg path as the clip-path to clip an image:

<img class="clip-svg" src="foo.jpg">

<svg width="0" height="0">
  <defs>
    <clipPath id="myClip">
      <circle cx="100" cy="100" r="40" />
      <circle cx="60" cy="60" r="40" />
    </clipPath>
  </defs>
</svg>

.clip-svg {
  clip-path: url(#myClip);
}

More info here: https://css-tricks.com/clipping-masking-css/#aa-using-clip-path-with-an-svg-defined-clippath