SVG elements (such as <rect> or <circle>) can be defined as children of the <mask> element. The mask's id can then be used as the value of an element's mask attribute. This will place the mask's children on top of the element. Only overlapping areas will be visible.

3 squares are rendered below, going down the page. They are being masked by a circle. Change the cx and cy values to move the mask, exposing different areas of the squares.

Opacity Mask

Instead of filling a mask with a solid color (shown above), we can fill it will a gradient that gradually reduces its opacity. This will create an opacity mask. A mask that will gradually fade out everything underneath it. Again, 3 squares are rendered below, going down the page. They are being masked by a rectangle that covers all of them. Change the offset value to move the opacity gradient up and down.

Feedback

Have any feedback about this note or just want to comment on the state of the economy?