Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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/ â
- Host: GitHub
- URL: https://github.com/yashrajbharti/random-color-pearl
- Owner: yashrajbharti
- License: mit
- Created: 2024-06-04T14:02:32.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-08-29T14:37:27.000Z (5 months ago)
- Last Synced: 2024-10-01T02:41:25.947Z (4 months ago)
- Topics: css, custom-element, design, figma, html, js, plugin, svg, tools, web-components
- Language: JavaScript
- Homepage: https://yashrajbharti.github.io/random-color-pearl/
- Size: 76.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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.