What it is
Simple plygin to generate polygonal avatars with customization options.
How to install
Copy the file to your project
Quick Start
- Create a canvas element with the desired width:
<canvas class="polyavatar" width="256" height="256"></canvas>- Instantiate the plugin poiting to the canvas element
var newInstance = new PolygonAvatar({
selector: '.polyavatar'
})- 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.