Negotiate Pushing Milestone


    0.8.0 • Public • Published

    ci npm

    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>
    1. Instantiate the plugin poiting to the canvas element
    var newInstance = new PolygonAvatar({
        selector: '.polyavatar'
    1. Enjoy the result



    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.


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


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


    npm i polyavatar

    DownloadsWeekly Downloads






    Unpacked Size

    22.8 kB

    Total Files


    Last publish


    • programad