FillMask

The FillMask component draws a filled-in representation of a given Mask object, intended to be used to show the different regions of a design. It takes up 100% of its parent's height and width. For a border-only version, see the StrokeMask component.

name	type	required	comment
height	number	yes	Height to use for the underlying SVG's viewbox
mask	Mask	yes	Collection of points used to draw the SVG
width	number	yes	Width to use for the underlying SVG's viewbox
ariaLabel	string	no
className	string	no
fillColor	string	no	Default value: '#C4CDD6'
role	AriaRole	no
style	CSSProperties	no
useBorder	boolean	no	Whether to draw a border around the SVG. Default value: true

Demo

Result

Loading...

Live Editor

function FillMaskDemo() { const mask = { type: 'SAFE', paths: [ { anchor: { x: 10, y: 10, }, points: [ { x: 270, y: 10, }, { x: 290, y: 30, controlPoints: { first: { x: 280, y: 10 }, second: { x: 290, y: 20 }, }, }, { x: 290, y: 270, }, { x: 270, y: 290, controlPoints: { first: { x: 290, y: 280 }, second: { x: 280, y: 290 }, }, }, { x: 10, y: 290, }, ], }, { anchor: { x: 30, y: 30 }, points: [ { x: 250, y: 30, }, { x: 270, y: 50, controlPoints: { first: { x: 260, y: 30 }, second: { x: 270, y: 40 }, }, }, { x: 270, y: 250, }, { x: 250, y: 270, controlPoints: { first: { x: 270, y: 260 }, second: { x: 260, y: 270 }, }, }, { x: 30, y: 270, }, ], }, ], }; return ( <div style={{ height: 300, width: 300 }}> <FillMask width={300} height={300} fillColor={'#ff0000'} mask={mask} useBorder={false} /> </div> ); }

function FillMaskDemo() {
    const mask = {
        type: 'SAFE',
        paths: [
            {
                anchor: {
                    x: 10,
                    y: 10,
                },
                points: [
                    {
                        x: 270,
                        y: 10,
                    },
                    {
                        x: 290,
                        y: 30,
                        controlPoints: {
                            first: { x: 280, y: 10 },
                            second: { x: 290, y: 20 },
                        },
                    },
                    {
                        x: 290,
                        y: 270,
                    },
                    {
                        x: 270,
                        y: 290,
                        controlPoints: {
                            first: { x: 290, y: 280 },
                            second: { x: 280, y: 290 },
                        },
                    },
                    {
                        x: 10,
                        y: 290,
                    },
                ],
            },
            {
                anchor: { x: 30, y: 30 },
                points: [
                    {
                        x: 250,
                        y: 30,
                    },
                    {
                        x: 270,
                        y: 50,
                        controlPoints: {
                            first: { x: 260, y: 30 },
                            second: { x: 270, y: 40 },
                        },
                    },
                    {
                        x: 270,
                        y: 250,
                    },
                    {
                        x: 250,
                        y: 270,
                        controlPoints: {
                            first: { x: 270, y: 260 },
                            second: { x: 260, y: 270 },
                        },
                    },
                    {
                        x: 30,
                        y: 270,
                    },
                ],
            },
        ],
    };

    return (
        <div style={{ height: 300, width: 300 }}>
            <FillMask width={300} height={300} fillColor={'#ff0000'} mask={mask} useBorder={false} />
        </div>
    );
}