Google Inspired Letter Avatar Generator With jQuery - katweKibsletterAvatarjs.js

File Size: 3.81 KB
Views Total: 5982
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Google Inspired Letter Avatar Generator With jQuery - katweKibsletterAvatarjs.js

Just another text avatar generator plugin with jQuery that helps you generate Google-like letter avatars from first letter of each word in a string. The plugin will generate the letter avatars on the HTML5 canvas elements so that they can be retrieved as PNG files.

How to use it:

1. To use the plugin start with adding the following JavaScript and CSS files in your document.

<script src="//"></script>
<script src="katweKibsletterAvatarjs.js"></script>

2. Create an HTML5 canvas element and insert your username into the data-name attribute as these:

<canvas class="user-icon" data-name="J"></canvas>
<canvas class="user-icon" data-name="jQuery Script" width="25" height="25"></canvas>

3. Initialize the letter avatar generator and you're done.


4. Specify the length of the generated letter avatar.

<canvas class="user-icon" 
        data-name="jQuery Script"
// or
  dataChars: 2

5. Change the size (width/height) of the generated letter avatar.


6. Change the default colors from which you can choose for the background of the letter avatar.

  colours = [
    "#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e",
    "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50",
    "#f1c40f", "#e67e22", "#e74c3c", "#95a5a6", "#f39c12",
    "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"

This awesome jQuery plugin is developed by katwekibs. For more Advanced Usages, please check the demo page or visit the official website.