Random color pearl

Creating stylish randomly colored pearl using the power of html web components 🪩. Simple and useful for random placeholders for profile pic or avatar.

DEMO LINK

Figma Plugin for Designers

PLUGIN LINK

Install from npm

npm i random-color-pearl

NPM LINK

Use Unpkg

<script src="https://unpkg.com/[email protected]/src/randomColorSvg.js"></script>
<!-- OR use minified version -->
<script src="https://unpkg.com/[email protected]/src/randomColorSvg.min.js"></script>

Or Import

import("random-color-pearl");

Then simply use the web component as:

<random-color-svg></random-color-svg>

Attributes

<random-color-svg width="92px" height="92px" username=""></random-color-svg>

Supports the following optional attributes, height and width for sizing the svg, and a username attribute to get a hashed color (optional). Also, it has getter and setter methods for color. Colors attribute is a string of 15 hex color codes.

Attribute	Description	Default
width	Sets the width of the SVG element	92px
height	Sets the height of the SVG element	92px
username	If provided, hashes the username to generate colors	undefined
colors	If provided, fills the svg with the given colors	undefined
title	Adds an accessible title to the svg	avatar

Set the Color Values

<random-color-svg
  colors="#000000,#1c1c1c,#333333,#4d4d4d,#666666,#808080,#999999,#b3b3b3,#cccccc,#e6e6e6,#f2f2f2,#f5f5f5,#fafafa,#dcdcdc,#c0c0c0"
></random-color-svg>

⚠️ Note: this will not set the color values if username is provided already with a truthy value. As basic purpose of profile pic / avatar is to set unique pearls using username attribute, it has preference over the colors string.

Get the Color values

document.addEventListener("DOMContentLoaded", () => {
  const svg = document.getElementById("pearl-svg");
  if (svg instanceof RandomColorSvg) {
    svg.getColors(); // Use this as you want!
  }
});

Check Performance and Collision Rates here

Contributing

Feel free to open issues or submit pull requests to enhance the functionality of RandomColorSvg. Contributions are welcome and appreciated!

License

This project is licensed under the MIT License. See the LICENSE file for details.