https://github.com/radiium/polydiv
Clipping html element in random polygon
https://github.com/radiium/polydiv
clip-path convex-hull css javascript polygon
Last synced: 2 months ago
JSON representation
Clipping html element in random polygon
- Host: GitHub
- URL: https://github.com/radiium/polydiv
- Owner: radiium
- Created: 2018-11-08T19:12:25.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-25T15:56:22.000Z (about 7 years ago)
- Last Synced: 2025-10-18T19:47:36.535Z (9 months ago)
- Topics: clip-path, convex-hull, css, javascript, polygon
- Language: JavaScript
- Homepage: https://radiium.github.io/polydiv/
- Size: 36.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Polydiv
### Clipping html element in random polygon with the css '[clip-path](https://developer.mozilla.org/fr/docs/Web/CSS/clip-path)' rule.
## how it works:
This module generate random number of random 2d coordinate,
finding and keeping convex hull (Algorithm found [here](https://www.nayuki.io/page/convex-hull-algorithm))
then use it for add css "clip-path" rules
## Demo:
[https://radiium.github.io/polydiv/](https://radiium.github.io/polydiv/)
## Download:
[polydiv.js](https://raw.githubusercontent.com/radiium/polydiv/master/polydiv.js)
[polydiv.min.js](https://raw.githubusercontent.com/radiium/polydiv/master/polydiv.min.js)
## Usage:
1 - In html
```html
1
2
3
...
```
2 - In javascript
```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:
```bash
# Install deps
npm install
# Uglify and minify
npm run dist
```
## References:
- css 'clip-path' rule [developer.mozilla.org/fr/docs/Web/CSS/clip-path](https://developer.mozilla.org/fr/docs/Web/CSS/clip-path)
- Convex hull algorithm [nayuki.io/page/convex-hull-algorithm](https://www.nayuki.io/page/convex-hull-algorithm)