React Concave Polygon Mask

A complex concave polygon mask for images with SVG.

A concave polygon is made up of at least four sides and at least one interior angle bigger than 180 degrees. There are limited shapes that make sense to use as a mask, currently this library only creates a single mask type. In the future I may add the ability to output a star mask.

Install

npm install react-concave-polygon-mask --save

About

This concave polygon mask will give you a interesting and responsive mask / frame over an image.

There are a few assumtions made in these early releases that in future releases will be moved into configurable settings. Such as frame counts and better color control opts.

Props

href: PropTypes.number.isRequired

Specifies the URL of an image

width: PropTypes.number.isRequired

Specifies the width of the image

height: PropTypes.number.isRequired

Specifies the height of the image

maskColor: PropTypes.string

SVG legal color to use for the image mask. Default is white

inlay: PropTypes.number

Currently effects the image offset inside the mask. This should really be helping control the currently hardcoded difference between the multiple borders.

inset: PropTypes.number

Controls the first layer white mask around the image it's self. Measured from the outside

x: PropTypes.number

Change the SVG X offset. There should be little need to change this.

y: PropTypes.number

Change the SVG Y offset. There should be little need to change this.

Usage

import React from 'react';
import PolyMask from 'react-concave-polygon-mask';

export default (props) => (<div className="row">
	<div className="col-12">
		<PolyMask
			inlay={20}
			inset={48}
			href={props.url}
			width={props.width}
			height={props.height}
			maskColor="#FAFAFA"
		>
			{/* Optional SVG Children Elements https://www.w3.org/TR/SVG/ */}
			<title>{props.title}</title>
		</PolyMask>
	</div>
</div>);