What it is

Simple plygin to generate polygonal avatars with customization options.

How to install

Copy the file to your project

Quick Start

1. Create a canvas element with the desired width:

<canvas class="polyavatar" width="256" height="256"></canvas>

2. Instantiate the plugin poiting to the canvas element

var newInstance = new PolygonAvatar({
    selector: '.polyavatar'
})

3. Enjoy the result

Options

The plugin can be configured using the one of a combination of the following options:

| Parameter | Default | Mandatory | Description | |:------------------|:---------:|:---------:|:---------------------------------------------------------------------------------------------------| | selector | '' | x | A CSS selector to the destination canvas to render. | | sides | 6 | | How many sides (more than 2, of course) the polygon should have. | | image | '' | | Sets the image to be rendered inside the polygon. | | percentage | 0.98 | | The percentage of the progress bar around the image. | | showProgress | true | | If the avatar should render the progressbar | | animated | true | | If the progress bar will be animated until it reaches the target percentage | | online | undefined | | The online status of the user. Omitting it will not generate the status indicator. | | levelNumber | undefined | | The level of the user. It will be shown as a smal polygon on the right with the level number in it. | | progressBarColor | '#4ff461' | | The color of the progress bar. | | progressBgColor | '#293249' | | The color of the background of the progress bar. | | borderColor | '#1d2333' | | The color of the border. | | onlineColor | '#40d04f' | | The color of the online indicator. | | offlineColor | '#888888' | | The color of the offline indicator. | | levelBgColor | '#7750f8' | | The color of the background of the level indicator. |

Contributing

Please read this style guidelines documentation project and please follow the contribution guidelines and code of conduct.

License

This project is open-sourced and licensed under the MIT License.