Left ArrowBack

Notes

Mask

Table of Contents

The icon of the Adeptus Mechanicus. A cog with a skull at the center.
3 hidden squares in a column. A circle on top exposing parts of the squares.

SVG Mask

Planted: 

Status: seed

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 & cy values to move the mask, exposing different areas of the squares.

localhost:3000

<svg viewBox="0 0 100 400">

    <defs>
        <mask id="myMask">  
<!-- Everything under a white pixel will be visible -->
            <circle
                cx="80" 
                cy="108"
                r="50" 
                fill="white" />  
        </mask> 
    </defs>

    <rect 
        x="0" 
        y="0"
        width="100" 
        height="100"  
        fill="hsl(0, 0%, 11%)"
        mask="url(#myMask)" />

    <rect 
        x="0" 
        y="108"
        width="100" 
        height="100"  
        fill="hsl(0, 0%, 11%)"
        mask="url(#myMask)" />

    <rect 
        x="0" 
        y="216"
        width="100" 
        height="100"  
        fill="hsl(0, 0%, 11%)"
        mask="url(#myMask)" />

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

localhost:3000

<svg viewBox="0 0 100 316">

    <defs>
<!-- gradientTransform used to set the direction to go down the page. -->
        <linearGradient 
            id="myGradient"
            gradientTransform="rotate(90)">  
            <stop 
                offset="0%" 
                stop-color="white" 
                stop-opacity="1" />  
            <stop 
                offset="80%" 
                stop-color="white"
                stop-opacity="0" />  
        </linearGradient>

        <mask id="myMask">  
            <rect
                x="0" 
                y="0"
                width="100" 
                height="316"
                fill="url(#myGradient)" />  
        </mask> 
    </defs>

    <rect 
        x="0" 
        y="0"
        width="100" 
        height="100"  
        fill="hsl(0, 0%, 11%)"
        mask="url(#myMask)" />

    <rect 
        x="0" 
        y="108"
        width="100" 
        height="100"  
        fill="hsl(0, 0%, 11%)"
        mask="url(#myMask)" />

    <rect 
        x="0" 
        y="216"
        width="100" 
        height="100"  
        fill="hsl(0, 0%, 11%)"
        mask="url(#myMask)" />

</svg>

Where to Next?

A sci-fi robot taxi driver with no lower body
Notes
    
  │
  └── SVG
        
  │
  ├── Filters
        
  │
  ├── Hologram
        
Arrow pointing down
YOU ARE HERE
        
  │
  ├── Mask
        
  │
  └── Pattern