Note: This site is currently "Under construction". I'm migrating to a new version of my site building software. Lots of things are in a state of disrepair as a result (for example, footnote links aren't working). It's all part of the process of building in public. Most things should still be readable though.

Create An SVG Image Mask

This is the code that I'm using to make makes for images with SVG

  • show this with just a single image first

  • This example shows how to make a transparent hole in one image to show an image below it

  • The process is to make a mask with two rectangles in it. One white, one black.

  • The white rectangle defines the area that will show. Anything that's black is transparent.

  • Since the black comes after the white it's on top which means it makes the area transparent

  • The background image is placed before the foreground in the code which means it's behind it

  • By applying the mask to the foreground image with url(#main-mask) the background image shows through where the transparency is