StrokeMask

The StrokeMask component draws a 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 filled-in version, see the FillMask 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
alternateStrokeColor	string	no	If shouldAlternate is true, the other color of the stroke
ariaLabel	string	no
className	string	no
closePath	boolean	no	If the given path isn't closed, close it automatically Default value: true
dashLength	number	no
role	AriaRole	no
shouldAlternate	boolean	no	Show a second color instead of empty space between strokes Default value: true
strokeColor	string	no	Default value: '#C4CDD6'
strokeWidth	number	no	Default value: 0.1
style	CSSProperties	no

Demo

Result

Loading...

Live Editor

function StrokeMaskDemo() { 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, }, ], }, ], }; return ( <div style={{ height: 300, width: 300 }}> <StrokeMask width={300} height={300} mask={mask} dashLength={8} strokeWidth={2} strokeColor={'#ff0000'} alternateStrokeColor={'#0000ff'} shouldAlternate={true} /> </div> ); }

function StrokeMaskDemo() {
    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,
                    },
                ],
            },
        ],
    };

    return (
        <div style={{ height: 300, width: 300 }}>
            <StrokeMask
                width={300}
                height={300}
                mask={mask}
                dashLength={8}
                strokeWidth={2}
                strokeColor={'#ff0000'}
                alternateStrokeColor={'#0000ff'}
                shouldAlternate={true}
            />
        </div>
    );
}