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!
  }
});