diff --git a/README.md b/README.md
index 1ab75d2..b335ae5 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,9 @@ npm i random-color-pearl
## Use Unpkg
```html
-
+
+
+
```
## Or Import
@@ -57,7 +59,7 @@ Then simply use the web component as:
```
-> ⚠️ 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.
+> ⚠️ 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
diff --git a/index.html b/index.html
index 9324986..23eafe9 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
-
+
+
+ `;class RandomColorSvg extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(template.content.cloneNode(!0))}static get observedAttributes(){return["width","height","username","colors"]}attributeChangedCallback(a,b,c){("width"===a||"height"===a)&&this.updateSize(),"username"===a&&b!==c&&this.generateColors(),"colors"===a&&this.generateColorsFromArray(c)}updateSize(){const a=this.shadowRoot.querySelector("svg");a.setAttribute("width",this.getAttribute("width")||"92"),a.setAttribute("height",this.getAttribute("height")||"92")}connectedCallback(){const a=this.shadowRoot.querySelector("svg"),b=a.querySelectorAll("path"),c=this.getAttribute("username"),d=this.getAttribute("colors");if(this.updateSize(),c)this.generateColors();else if(d)this.generateColorsFromArray(d);else{const a=`#${(16777215*Math.random()<<0).toString(16).padStart(6,"0")}`,c=`#${(16777215*Math.random()<<0).toString(16).padStart(6,"0")}`;for(const d of b){const b=this.randomColorBetween(a,c);d.setAttribute("fill",b)}}}generateColors(){const a=this.getAttribute("username");if(a){const b=this.hashTo90Hex(a),c=this.splitTo15Colors(b),d=this.shadowRoot.querySelector("svg"),e=d.querySelectorAll("path");e.forEach((a,b)=>{const d=c[b%c.length];a.setAttribute("fill",d)})}}generateColorsFromArray(a){const b=this.shadowRoot.querySelector("svg"),c=b.querySelectorAll("path"),d=a.split(",");c.forEach((a,b)=>{a.setAttribute("fill",d[b%d.length])})}hashTo90Hex(a){let b=0;for(let c=0;cc;c++){const d=15&a>>4*c;b+="0123456789ABCDEF"[d]}return b}generateShades(a,b){const c=[],d=this.hexToRgb(a),e=this.hexToRgb(b);for(let f=1;15>=f;f++){const a=f/15,h=Math.round(d[0]*(1-a)+e[0]*a),i=Math.round(d[1]*(1-a)+e[1]*a),g=Math.round(d[2]*(1-a)+e[2]*a);c.push(this.rgbToHex(h,i,g).slice(1))}return c.join("")}splitTo15Colors(a){const b=[];for(let c=0;90>c;c+=6)b.push(`#${a.slice(c,c+6)}`);return b}hexToRgb(a){let b=parseInt(a.slice(1),16);return[255&b>>16,255&b>>8,255&b]}rgbToHex(a,c,d){return"#"+(16777216+(a<<16)+(c<<8)+d).toString(16).slice(1).toUpperCase()}randomColorBetween(a,c){let d=this.hexToRgb(a),e=this.hexToRgb(c),f=Math.floor(Math.random()*(e[0]-d[0]+1))+d[0],h=Math.floor(Math.random()*(e[1]-d[1]+1))+d[1],g=Math.floor(Math.random()*(e[2]-d[2]+1))+d[2];return this.rgbToHex(f,h,g)}getColors(){const a=this.shadowRoot.querySelector("svg"),b=a.querySelectorAll("path"),c=Array.from(b).map(a=>a.getAttribute("fill"));return c}}customElements.define("random-color-svg",RandomColorSvg);
\ No newline at end of file