Creating polygons, please wait...

Polyrize.js

Create beauty with geometry

drop your image file here

Polyrize is a standalone JavaScript library (in alpha state) to build triangles on the base of image data.

You can use polyrize with all kinds of images, either an image tag, an uploaded element or any other HTML element which has a background image.

How does it work?

Based on the canvas element, the library reads the given image data, creating points by scanning the data for 'visible' edges, then using various filters and delaunay triangulation to create the polygons. After rendering is done - it finally replaces the original source with the generated image.

A question of performance

Due to memory and performance reasons, the calculation of possible edges is limited to 10.000 points. all other points will be filtered randomly - so each rendering process will create a unique variant of the original image. Still, using polyrize for generating images on the fly will slow down your page. Be aware that a calculation of thousands of triangles can even freeze your browser (or force codepen to stop execution ;-(). Therefore you should use this library in a pre-processing scenario and using the resulting images - I am currently working on a nodejs module to cover this.