A girl wearing a wooden mask with wolf fur.

How to create an SVG mask & opacity mask.

Last Tended-
Planted
StatusSeed
The letter 'A' in upper and lower case.

Definition

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 hidden squares in a column. A circle on top exposing parts of the squares.

Basics

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

localhost:3000

import "./styles.css";
import "./styles.css";
3 squares in a column. Fading as you go down.

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 highlighted offset value to move the opacity gradient up & down.

localhost:3000

import "./styles.css";
import "./styles.css";