Cross Browser Responsive HTML Element Masking Plugin - polyMask.js

polyMask.js is a lightweight, responsive, cross-browser jQuery masking plugin which allows you to apply SVG-based polygon mask / clipping on images or html elements.

Basic usage:

1. Load the jQuery polyMask.js plugin after you have jQuery library is installed.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.polymask.js"></script>

2. Use data-mask-path attribute to specify the clip paths.

<img src="demo.jpg" class="demo" 
     data-mask-path="50% 0%, 100% 50%, 50% 100%, 0% 50%"
>

3. Initialize the plugin with default options.

$('.demo').polyMask();

4. Disable the 'responsive' option.

$('.demo').polyMask({responsive: false});

Change log:

2105-10-13

• JS update.

---

This awesome jQuery plugin is developed by markyogore. For more Advanced Usages, please check the demo page or visit the official website.