polyavatar

Simple plygin to generate polygonal avatars with customization options.

Usage no npm install needed!

<script type="module">
  import polyavatar from 'https://cdn.skypack.dev/polyavatar';
</script>

README

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

ludustack

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.