Polydiv

Clipping html element in random polygon with the css 'clip-path' rule.

how it works:

This module generate random number of random 2d coordinate,
finding and keeping convex hull (Algorithm found here)
then use it for add css "clip-path" rules

Demo:

https://radiium.github.io/polydiv/

Download:

polydiv.js
polydiv.min.js

Usage:

1 - In html

<!-- Create structure -->
<div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    ...
</div>

<!-- Import Polydiv -->
<script type="text/javascript" src="./polydiv.min.js"></script>

2 - In javascript

// Init Polydiv
var polydivInstance = new Polydiv({ query: '.item'}, function(err) {
    // Polydiv init done
});

// Clip items 
polydivInstance.clipItems(function(err) {
    // All items are clipped
});

// Unclip items
polydivInstance.unClipItems(function(err) {
    // All items are unclipped
});

// Destroy Polydiv
polydivInstance.destroy(function(err) {
    // Polydiv destroy done
});

Development:

# Install deps
npm install

# Uglify and minify
npm run dist

References:

• css 'clip-path' rule developer.mozilla.org/fr/docs/Web/CSS/clip-path
• Convex hull algorithm nayuki.io/page/convex-hull-algorithm