Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yashrajbharti/random-color-pearl

Lightweight package that creates randomly coloured pearl avatars as web components in vanilla. Check performance here: https://cybtekk-llp.github.io/Unique-SVG-Generator/ ⭐
https://github.com/yashrajbharti/random-color-pearl

css custom-element design figma html js plugin svg tools web-components

Last synced: 4 months ago
JSON representation

Lightweight package that creates randomly coloured pearl avatars as web components in vanilla. Check performance here: https://cybtekk-llp.github.io/Unique-SVG-Generator/ ⭐

Awesome Lists containing this project

README

        

# Random color pearl

![Pearl](https://github.com/yashrajbharti/random-color-pearl/assets/43868318/46ef4432-3532-41a9-9e9a-0b6e963e3439)

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](https://yashrajbharti.github.io/random-color-pearl/)

## Figma Plugin for Designers

[PLUGIN LINK](https://www.figma.com/community/plugin/1380097241436668905)

## Install from npm

```console
npm i random-color-pearl
```

[NPM LINK](https://www.npmjs.com/package/random-color-pearl)

## Use Unpkg

```html

```

## Or Import

```js
import("random-color-pearl");
```

Then simply use the web component as:

```html

```

## Attributes

```html

```

> 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

```html

```

> ⚠ī¸ 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

```js
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](https://cybtekk-llp.github.io/Unique-SVG-Generator/)

![Multiple Pearls generated from web components](https://github.com/yashrajbharti/random-color-pearl/assets/43868318/1653ec48-ee34-48e2-ad1e-4c0a21a3e55d)

## 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](LICENSE) file for details.