boring-avatars-vanilla 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 hustcc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,96 @@
+# boring-avatars-vanilla
+
+Boring avatars is a tiny JavaScript library that generates custom, SVG-based avatars from any username and color palette. Works in both browsers and Node.js server-side rendering.
+
+![boring-avatars-preview](./boring-avatars-preview.png)
+
+<a href="https://www.npmjs.com/package/boring-avatars-vanilla">
+
+![npm](https://badgen.net/npm/v/boring-avatars-vanilla)
+![build](https://github.com/boringdesigners/boring-avatars/actions/workflows/build.yml/badge.svg)
+![deploy](https://github.com/boringdesigners/boring-avatars/actions/workflows/deploy.yml/badge.svg)
+
+</a>
+
+## Install
+
+```
+npm install boring-avatars-vanilla
+```
+
+## Usage
+
+```javascript
+import boring from 'boring-avatars-vanilla';
+
+const svg = boring({ name: 'Maria Mitchell' });
+
+// Use in browser
+document.getElementById('avatar').innerHTML = svg;
+
+// Use in Node.js server-side rendering
+fs.writeFileSync('avatar.svg', svg);
+```
+
+### Props
+
+| Prop    | Type                                                         | Default                                                   |
+|---------|--------------------------------------------------------------|-----------------------------------------------------------|
+| size    | number or string                                             | `40px`                                                    |
+| square  | boolean                                                      | `false`                                                   |
+| title   | boolean                                                      | `false`                                                   |
+| name    | string                                                       | `Clara Barton`                                            |
+| variant | oneOf: `marble`, `beam`, `pixel`,`sunset`, `ring`, `bauhaus` | `marble`                                                  |
+| colors  | array                                                        | `['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']` |
+
+
+#### Name
+
+The `name` prop is used to generate the avatar. It can be the username, email or any random string.
+
+```javascript
+boring({ name: 'Maria Mitchell' });
+```
+
+#### Variant
+
+The `variant` prop is used to change the theme of the avatar. The available variants are: `marble`, `beam`, `pixel`, `sunset`, `ring` and `bauhaus`.
+
+```javascript
+boring({ name: 'Alice Paul', variant: 'beam' });
+```
+
+#### Size
+
+The `size` prop is used to change the size of the avatar.
+
+```javascript
+boring({ name: 'Ada Lovelace', size: 88 });
+```
+
+#### Colors
+
+The `colors` prop is used to change the color palette of the avatar.
+
+```javascript
+boring({ name: 'Grace Hopper', colors: ['#fb6900', '#f63700', '#004853', '#007e80', '#00b9bd'] });
+```
+
+#### Square
+
+The `square` prop is used to make the avatar square.
+
+```javascript
+boring({ name: 'Helen Keller', square: true });
+```
+
+## API service
+
+> [!IMPORTANT]  
+> Please note that the old service was paused in July 31st 2024. We recommend transitioning to our new API service to ensure uninterrupted access and support.
+
+Get access to the Boring avatars API service [here →](https://boringdesigners.gumroad.com/l/boring-avatars-service).
+
+## License
+
+MIT, Thanks for [boring-avatars](https://github.com/boringdesigners/boring-avatars).

package/dist/index.cjs

@@ -0,0 +1,169 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=s=>{let e=0;for(let r=0;r<s.length;r++){const a=s.charCodeAt(r);e=(e<<5)-e+a,e=e&e}return Math.abs(e)},M=(s,e)=>Math.floor(s/Math.pow(10,e)%10),y=(s,e)=>!(M(s,e)%2),p=(s,e,r)=>{const a=s%e;return r&&M(s,r)%2===0?-a:a},w=(s,e,r)=>e[s%r],_=s=>{s.slice(0,1)==="#"&&(s=s.slice(1));const e=parseInt(s.substr(0,2),16),r=parseInt(s.substr(2,2),16),a=parseInt(s.substr(4,2),16);return(e*299+r*587+a*114)/1e3>=128?"#000000":"#FFFFFF"};let U=0;const k=()=>`boring-avatar-${++U}-${Date.now().toString(36)}`,B=3,h=80;function L(s,e){const r=S(s),a=e.length;return Array.from({length:B},(n,t)=>({color:w(r+t,e,a),translateX:p(r*(t+1),h/10,1),translateY:p(r*(t+1),h/10,2),scale:1.2+p(r*(t+1),h/20)/10,rotate:p(r*(t+1),360,1)}))}const z=s=>{const{name:e,colors:r,title:a,square:o,size:n="40px"}=s,t=L(e,r),i=k(),c=typeof n=="number"?`${n}px`:n,f=o?`<rect width="${h}" height="${h}" fill="#FFFFFF" />`:`<rect width="${h}" height="${h}" rx="${h*2}" fill="#FFFFFF" />`;return`<svg
+  viewBox="0 0 ${h} ${h}"
+  fill="none"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="${c}"
+  height="${c}"
+>
+  ${a?`<title>${e}</title>`:""}
+  <mask id="${i}" maskUnits="userSpaceOnUse" x="0" y="0" width="${h}" height="${h}">
+    ${f}
+  </mask>
+  <g mask="url(#${i})">
+    <rect width="${h}" height="${h}" fill="${t[0].color}" />
+    <path
+      filter="url(#filter_${i})"
+      d="M32.414 59.35L50.376 70.5H72.5v-71H33.728L26.5 13.381l19.057 27.08L32.414 59.35z"
+      fill="${t[1].color}"
+      transform="translate(${t[1].translateX} ${t[1].translateY}) rotate(${t[1].rotate} ${h/2} ${h/2}) scale(${t[2].scale})"
+    />
+    <path
+      filter="url(#filter_${i})"
+      style="mix-blend-mode: overlay"
+      d="M22.216 24L0 46.75l14.108 38.129L78 86l-3.081-59.276-22.378 4.005 12.972 20.186-23.35 27.395L22.215 24z"
+      fill="${t[2].color}"
+      transform="translate(${t[2].translateX} ${t[2].translateY}) rotate(${t[2].rotate} ${h/2} ${h/2}) scale(${t[2].scale})"
+    />
+  </g>
+  <defs>
+    <filter id="filter_${i}" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+      <feFlood floodOpacity="0" result="BackgroundImageFix" />
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feGaussianBlur stdDeviation="7" result="effect1_foregroundBlur" />
+    </filter>
+  </defs>
+</svg>`},O=64,m=80;function T(s,e){const r=S(s),a=e.length;return Array.from({length:O},(n,t)=>w(r%(t+1),e,a))}const D=s=>{const{name:e,colors:r,title:a,square:o,size:n="40px"}=s,t=T(e,r),i=k(),c=typeof n=="number"?`${n}px`:n,f=o?`<rect width="${m}" height="${m}" fill="#FFFFFF" />`:`<rect width="${m}" height="${m}" rx="${m*2}" fill="#FFFFFF" />`,u=[],F=[[0,0],[20,0],[40,0],[60,0],[10,0],[30,0],[50,0],[70,0],[0,10],[0,20],[0,30],[0,40],[0,50],[0,60],[0,70],[20,10],[20,20],[20,30],[20,40],[20,50],[20,60],[20,70],[40,10],[40,20],[40,30],[40,40],[40,50],[40,60],[40,70],[60,10],[60,20],[60,30],[60,40],[60,50],[60,60],[60,70],[10,10],[10,20],[10,30],[10,40],[10,50],[10,60],[10,70],[30,10],[30,20],[30,30],[30,40],[30,50],[30,60],[30,70],[50,10],[50,20],[50,30],[50,40],[50,50],[50,60],[50,70],[70,10],[70,20],[70,30],[70,40],[70,50],[70,60],[70,70]];for(let x=0;x<F.length;x++){const[I,E]=F[x];u.push(`    <rect x="${I}" y="${E}" width="10" height="10" fill="${t[x]}" />`)}return`<svg
+  viewBox="0 0 ${m} ${m}"
+  fill="none"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="${c}"
+  height="${c}"
+>
+  ${a?`<title>${e}</title>`:""}
+  <mask id="${i}" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="${m}" height="${m}">
+    ${f}
+  </mask>
+  <g mask="url(#${i})">
+${u.join(`
+`)}
+  </g>
+</svg>`},d=90,A=5;function N(s,e){const r=S(s),a=e.length,o=Array.from({length:A},(t,i)=>w(r+i,e,a)),n=[];return n[0]=o[0],n[1]=o[1],n[2]=o[1],n[3]=o[2],n[4]=o[2],n[5]=o[3],n[6]=o[3],n[7]=o[0],n[8]=o[4],n}const R=s=>{const{name:e,colors:r,title:a,square:o,size:n="40px"}=s,t=N(e,r),i=k(),c=typeof n=="number"?`${n}px`:n,f=o?`<rect width="${d}" height="${d}" fill="#FFFFFF" />`:`<rect width="${d}" height="${d}" rx="${d*2}" fill="#FFFFFF" />`;return`<svg
+  viewBox="0 0 ${d} ${d}"
+  fill="none"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="${c}"
+  height="${c}"
+>
+  ${a?`<title>${e}</title>`:""}
+  <mask id="${i}" maskUnits="userSpaceOnUse" x="0" y="0" width="${d}" height="${d}">
+    ${f}
+  </mask>
+  <g mask="url(#${i})">
+    <path d="M0 0h90v45H0z" fill="${t[0]}" />
+    <path d="M0 45h90v45H0z" fill="${t[1]}" />
+    <path d="M83 45a38 38 0 00-76 0h76z" fill="${t[2]}" />
+    <path d="M83 45a38 38 0 01-76 0h76z" fill="${t[3]}" />
+    <path d="M77 45a32 32 0 10-64 0h64z" fill="${t[4]}" />
+    <path d="M77 45a32 32 0 11-64 0h64z" fill="${t[5]}" />
+    <path d="M71 45a26 26 0 00-52 0h52z" fill="${t[6]}" />
+    <path d="M71 45a26 26 0 01-52 0h52z" fill="${t[7]}" />
+    <circle cx="45" cy="45" r="23" fill="${t[8]}" />
+  </g>
+</svg>`},$=36;function X(s,e){const r=S(s),a=e.length,o=w(r,e,a),n=p(r,10,1),t=n<5?n+$/9:n,i=p(r,10,2),c=i<5?i+$/9:i;return{wrapperColor:o,faceColor:_(o),backgroundColor:w(r+13,e,a),wrapperTranslateX:t,wrapperTranslateY:c,wrapperRotate:p(r,360),wrapperScale:1+p(r,$/12)/10,isMouthOpen:y(r,2),isCircle:y(r,1),eyeSpread:p(r,5),mouthSpread:p(r,3),faceRotate:p(r,10,3),faceTranslateX:t>$/6?t/2:p(r,8,1),faceTranslateY:c>$/6?c/2:p(r,7,2)}}const v=s=>{const{name:e,colors:r,title:a,square:o,size:n="40px"}=s,t=X(e,r),i=k(),c=typeof n=="number"?`${n}px`:n,f=o?`<rect width="${$}" height="${$}" fill="#FFFFFF" />`:`<rect width="${$}" height="${$}" rx="${$*2}" fill="#FFFFFF" />`,u=t.isMouthOpen?`<path d="M15 ${19+t.mouthSpread}c2 1 4 1 6 0" stroke="${t.faceColor}" fill="none" stroke-linecap="round" />`:`<path d="M13,${19+t.mouthSpread} a1,0.75 0 0,0 10,0" fill="${t.faceColor}" />`,F=t.isCircle?$:$/6;return`<svg
+  viewBox="0 0 ${$} ${$}"
+  fill="none"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="${c}"
+  height="${c}"
+>
+  ${a?`<title>${e}</title>`:""}
+  <mask id="${i}" maskUnits="userSpaceOnUse" x="0" y="0" width="${$}" height="${$}">
+    ${f}
+  </mask>
+  <g mask="url(#${i})">
+    <rect width="${$}" height="${$}" fill="${t.backgroundColor}" />
+    <rect
+      x="0"
+      y="0"
+      width="${$}"
+      height="${$}"
+      transform="translate(${t.wrapperTranslateX} ${t.wrapperTranslateY}) rotate(${t.wrapperRotate} ${$/2} ${$/2}) scale(${t.wrapperScale})"
+      fill="${t.wrapperColor}"
+      rx="${F}"
+    />
+    <g transform="translate(${t.faceTranslateX} ${t.faceTranslateY}) rotate(${t.faceRotate} ${$/2} ${$/2})">
+      ${u}
+      <rect x="${14-t.eyeSpread}" y="14" width="1.5" height="2" rx="1" stroke="none" fill="${t.faceColor}" />
+      <rect x="${20+t.eyeSpread}" y="14" width="1.5" height="2" rx="1" stroke="none" fill="${t.faceColor}" />
+    </g>
+  </g>
+</svg>`},Y=4,l=80;function q(s,e){const r=S(s),a=e.length;return Array.from({length:Y},(n,t)=>({color:w(r+t,e,a),translateX:p(r*(t+1),l/2-(t+17),1),translateY:p(r*(t+1),l/2-(t+17),2),rotate:p(r*(t+1),360),isSquare:y(r,2)}))}const C=s=>{const{name:e,colors:r,title:a,square:o,size:n="40px"}=s,t=q(e,r),i=k(),c=typeof n=="number"?`${n}px`:n,f=o?`<rect width="${l}" height="${l}" fill="#FFFFFF" />`:`<rect width="${l}" height="${l}" rx="${l*2}" fill="#FFFFFF" />`,u=t[1].isSquare?l:l/8;return`<svg
+  viewBox="0 0 ${l} ${l}"
+  fill="none"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="${c}"
+  height="${c}"
+>
+  ${a?`<title>${e}</title>`:""}
+  <mask id="${i}" maskUnits="userSpaceOnUse" x="0" y="0" width="${l}" height="${l}">
+    ${f}
+  </mask>
+  <g mask="url(#${i})">
+    <rect width="${l}" height="${l}" fill="${t[0].color}" />
+    <rect
+      x="${(l-60)/2}"
+      y="${(l-20)/2}"
+      width="${l}"
+      height="${u}"
+      fill="${t[1].color}"
+      transform="translate(${t[1].translateX} ${t[1].translateY}) rotate(${t[1].rotate} ${l/2} ${l/2})"
+    />
+    <circle
+      cx="${l/2}"
+      cy="${l/2}"
+      fill="${t[2].color}"
+      r="${l/5}"
+      transform="translate(${t[2].translateX} ${t[2].translateY})"
+    />
+    <line
+      x1="0"
+      y1="${l/2}"
+      x2="${l}"
+      y2="${l/2}"
+      stroke-width="2"
+      stroke="${t[3].color}"
+      transform="translate(${t[3].translateX} ${t[3].translateY}) rotate(${t[3].rotate} ${l/2} ${l/2})"
+    />
+  </g>
+</svg>`},G=4,g=80;function H(s,e){const r=S(s),a=e.length;return Array.from({length:G},(n,t)=>w(r+t,e,a))}const P=s=>{const{name:e,colors:r,title:a,square:o,size:n="40px"}=s,t=H(e,r),i=e.replace(/\s/g,""),c=k(),f=`gradient_paint0_linear_${i}_${c}`,u=`gradient_paint1_linear_${i}_${c}`,F=typeof n=="number"?`${n}px`:n,x=o?`<rect width="${g}" height="${g}" fill="#FFFFFF" />`:`<rect width="${g}" height="${g}" rx="${g*2}" fill="#FFFFFF" />`;return`<svg
+  viewBox="0 0 ${g} ${g}"
+  fill="none"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="${F}"
+  height="${F}"
+>
+  ${a?`<title>${e}</title>`:""}
+  <mask id="${c}" maskUnits="userSpaceOnUse" x="0" y="0" width="${g}" height="${g}">
+    ${x}
+  </mask>
+  <g mask="url(#${c})">
+    <path fill="url(#${f})" d="M0 0h80v40H0z" />
+    <path fill="url(#${u})" d="M0 40h80v40H0z" />
+  </g>
+  <defs>
+    <linearGradient id="${f}" x1="${g/2}" y1="0" x2="${g/2}" y2="${g/2}" gradientUnits="userSpaceOnUse">
+      <stop stop-color="${t[0]}" />
+      <stop offset="1" stop-color="${t[1]}" />
+    </linearGradient>
+    <linearGradient id="${u}" x1="${g/2}" y1="${g/2}" x2="${g/2}" y2="${g}" gradientUnits="userSpaceOnUse">
+      <stop stop-color="${t[2]}" />
+      <stop offset="1" stop-color="${t[3]}" />
+    </linearGradient>
+  </defs>
+</svg>`},Z=["#92A1C6","#146A7C","#F0AB3D","#C271B4","#C20D90"],j={marble:z,pixel:D,ring:R,beam:v,bauhaus:C,sunset:P,geometric:v,abstract:C};function b(s={}){const{name:e="Clara Barton",colors:r=Z,title:a=!1,square:o=!1,size:n="40px",variant:t="marble"}=s;return(j[t]||z)({name:e,colors:r,title:a,square:o,size:n})}exports.boring=b;exports.default=b;

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import { AvatarProps, AvatarVariant } from './types.js';
+export type { AvatarProps, AvatarVariant };
+/**
+ * Generate an SVG avatar
+ * @param props - Avatar configuration options
+ * @returns SVG string
+ *
+ * @example
+ * ```ts
+ * import boring from 'boring-avatars-vanilla';
+ *
+ * const svg = boring({
+ *   name: 'John Doe',
+ *   variant: 'beam',
+ *   size: 40,
+ *   colors: ['#92A1C6', '#146A7C', '#F0AB3D']
+ * });
+ *
+ * // Use in browser
+ * document.getElementById('avatar').innerHTML = svg;
+ *
+ * // Use in Node.js
+ * fs.writeFileSync('avatar.svg', svg);
+ * ```
+ */
+declare function boring(props?: AvatarProps): string;
+export { boring };
+export default boring;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE7D,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,CAAC;AAe3C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,iBAAS,MAAM,CAAC,KAAK,GAAE,WAAgB,GAAG,MAAM,CAmB/C;AAED,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,eAAe,MAAM,CAAC"}

package/dist/index.js

@@ -0,0 +1,370 @@
+const S = (s) => {
+  let e = 0;
+  for (let r = 0; r < s.length; r++) {
+    const a = s.charCodeAt(r);
+    e = (e << 5) - e + a, e = e & e;
+  }
+  return Math.abs(e);
+}, z = (s, e) => Math.floor(s / Math.pow(10, e) % 10), y = (s, e) => !(z(s, e) % 2), p = (s, e, r) => {
+  const a = s % e;
+  return r && z(s, r) % 2 === 0 ? -a : a;
+}, w = (s, e, r) => e[s % r], E = (s) => {
+  s.slice(0, 1) === "#" && (s = s.slice(1));
+  const e = parseInt(s.substr(0, 2), 16), r = parseInt(s.substr(2, 2), 16), a = parseInt(s.substr(4, 2), 16);
+  return (e * 299 + r * 587 + a * 114) / 1e3 >= 128 ? "#000000" : "#FFFFFF";
+};
+let U = 0;
+const k = () => `boring-avatar-${++U}-${Date.now().toString(36)}`, _ = 3, h = 80;
+function B(s, e) {
+  const r = S(s), a = e.length;
+  return Array.from({ length: _ }, (n, t) => ({
+    color: w(r + t, e, a),
+    translateX: p(r * (t + 1), h / 10, 1),
+    translateY: p(r * (t + 1), h / 10, 2),
+    scale: 1.2 + p(r * (t + 1), h / 20) / 10,
+    rotate: p(r * (t + 1), 360, 1)
+  }));
+}
+const M = (s) => {
+  const { name: e, colors: r, title: a, square: o, size: n = "40px" } = s, t = B(e, r), i = k(), c = typeof n == "number" ? `${n}px` : n, f = o ? `<rect width="${h}" height="${h}" fill="#FFFFFF" />` : `<rect width="${h}" height="${h}" rx="${h * 2}" fill="#FFFFFF" />`;
+  return `<svg
+  viewBox="0 0 ${h} ${h}"
+  fill="none"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="${c}"
+  height="${c}"
+>
+  ${a ? `<title>${e}</title>` : ""}
+  <mask id="${i}" maskUnits="userSpaceOnUse" x="0" y="0" width="${h}" height="${h}">
+    ${f}
+  </mask>
+  <g mask="url(#${i})">
+    <rect width="${h}" height="${h}" fill="${t[0].color}" />
+    <path
+      filter="url(#filter_${i})"
+      d="M32.414 59.35L50.376 70.5H72.5v-71H33.728L26.5 13.381l19.057 27.08L32.414 59.35z"
+      fill="${t[1].color}"
+      transform="translate(${t[1].translateX} ${t[1].translateY}) rotate(${t[1].rotate} ${h / 2} ${h / 2}) scale(${t[2].scale})"
+    />
+    <path
+      filter="url(#filter_${i})"
+      style="mix-blend-mode: overlay"
+      d="M22.216 24L0 46.75l14.108 38.129L78 86l-3.081-59.276-22.378 4.005 12.972 20.186-23.35 27.395L22.215 24z"
+      fill="${t[2].color}"
+      transform="translate(${t[2].translateX} ${t[2].translateY}) rotate(${t[2].rotate} ${h / 2} ${h / 2}) scale(${t[2].scale})"
+    />
+  </g>
+  <defs>
+    <filter id="filter_${i}" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+      <feFlood floodOpacity="0" result="BackgroundImageFix" />
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feGaussianBlur stdDeviation="7" result="effect1_foregroundBlur" />
+    </filter>
+  </defs>
+</svg>`;
+}, L = 64, u = 80;
+function O(s, e) {
+  const r = S(s), a = e.length;
+  return Array.from(
+    { length: L },
+    (n, t) => w(r % (t + 1), e, a)
+  );
+}
+const T = (s) => {
+  const { name: e, colors: r, title: a, square: o, size: n = "40px" } = s, t = O(e, r), i = k(), c = typeof n == "number" ? `${n}px` : n, f = o ? `<rect width="${u}" height="${u}" fill="#FFFFFF" />` : `<rect width="${u}" height="${u}" rx="${u * 2}" fill="#FFFFFF" />`, m = [], F = [
+    [0, 0],
+    [20, 0],
+    [40, 0],
+    [60, 0],
+    [10, 0],
+    [30, 0],
+    [50, 0],
+    [70, 0],
+    [0, 10],
+    [0, 20],
+    [0, 30],
+    [0, 40],
+    [0, 50],
+    [0, 60],
+    [0, 70],
+    [20, 10],
+    [20, 20],
+    [20, 30],
+    [20, 40],
+    [20, 50],
+    [20, 60],
+    [20, 70],
+    [40, 10],
+    [40, 20],
+    [40, 30],
+    [40, 40],
+    [40, 50],
+    [40, 60],
+    [40, 70],
+    [60, 10],
+    [60, 20],
+    [60, 30],
+    [60, 40],
+    [60, 50],
+    [60, 60],
+    [60, 70],
+    [10, 10],
+    [10, 20],
+    [10, 30],
+    [10, 40],
+    [10, 50],
+    [10, 60],
+    [10, 70],
+    [30, 10],
+    [30, 20],
+    [30, 30],
+    [30, 40],
+    [30, 50],
+    [30, 60],
+    [30, 70],
+    [50, 10],
+    [50, 20],
+    [50, 30],
+    [50, 40],
+    [50, 50],
+    [50, 60],
+    [50, 70],
+    [70, 10],
+    [70, 20],
+    [70, 30],
+    [70, 40],
+    [70, 50],
+    [70, 60],
+    [70, 70]
+  ];
+  for (let x = 0; x < F.length; x++) {
+    const [I, b] = F[x];
+    m.push(`    <rect x="${I}" y="${b}" width="10" height="10" fill="${t[x]}" />`);
+  }
+  return `<svg
+  viewBox="0 0 ${u} ${u}"
+  fill="none"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="${c}"
+  height="${c}"
+>
+  ${a ? `<title>${e}</title>` : ""}
+  <mask id="${i}" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="${u}" height="${u}">
+    ${f}
+  </mask>
+  <g mask="url(#${i})">
+${m.join(`
+`)}
+  </g>
+</svg>`;
+}, d = 90, D = 5;
+function A(s, e) {
+  const r = S(s), a = e.length, o = Array.from(
+    { length: D },
+    (t, i) => w(r + i, e, a)
+  ), n = [];
+  return n[0] = o[0], n[1] = o[1], n[2] = o[1], n[3] = o[2], n[4] = o[2], n[5] = o[3], n[6] = o[3], n[7] = o[0], n[8] = o[4], n;
+}
+const N = (s) => {
+  const { name: e, colors: r, title: a, square: o, size: n = "40px" } = s, t = A(e, r), i = k(), c = typeof n == "number" ? `${n}px` : n, f = o ? `<rect width="${d}" height="${d}" fill="#FFFFFF" />` : `<rect width="${d}" height="${d}" rx="${d * 2}" fill="#FFFFFF" />`;
+  return `<svg
+  viewBox="0 0 ${d} ${d}"
+  fill="none"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="${c}"
+  height="${c}"
+>
+  ${a ? `<title>${e}</title>` : ""}
+  <mask id="${i}" maskUnits="userSpaceOnUse" x="0" y="0" width="${d}" height="${d}">
+    ${f}
+  </mask>
+  <g mask="url(#${i})">
+    <path d="M0 0h90v45H0z" fill="${t[0]}" />
+    <path d="M0 45h90v45H0z" fill="${t[1]}" />
+    <path d="M83 45a38 38 0 00-76 0h76z" fill="${t[2]}" />
+    <path d="M83 45a38 38 0 01-76 0h76z" fill="${t[3]}" />
+    <path d="M77 45a32 32 0 10-64 0h64z" fill="${t[4]}" />
+    <path d="M77 45a32 32 0 11-64 0h64z" fill="${t[5]}" />
+    <path d="M71 45a26 26 0 00-52 0h52z" fill="${t[6]}" />
+    <path d="M71 45a26 26 0 01-52 0h52z" fill="${t[7]}" />
+    <circle cx="45" cy="45" r="23" fill="${t[8]}" />
+  </g>
+</svg>`;
+}, $ = 36;
+function R(s, e) {
+  const r = S(s), a = e.length, o = w(r, e, a), n = p(r, 10, 1), t = n < 5 ? n + $ / 9 : n, i = p(r, 10, 2), c = i < 5 ? i + $ / 9 : i;
+  return {
+    wrapperColor: o,
+    faceColor: E(o),
+    backgroundColor: w(r + 13, e, a),
+    wrapperTranslateX: t,
+    wrapperTranslateY: c,
+    wrapperRotate: p(r, 360),
+    wrapperScale: 1 + p(r, $ / 12) / 10,
+    isMouthOpen: y(r, 2),
+    isCircle: y(r, 1),
+    eyeSpread: p(r, 5),
+    mouthSpread: p(r, 3),
+    faceRotate: p(r, 10, 3),
+    faceTranslateX: t > $ / 6 ? t / 2 : p(r, 8, 1),
+    faceTranslateY: c > $ / 6 ? c / 2 : p(r, 7, 2)
+  };
+}
+const v = (s) => {
+  const { name: e, colors: r, title: a, square: o, size: n = "40px" } = s, t = R(e, r), i = k(), c = typeof n == "number" ? `${n}px` : n, f = o ? `<rect width="${$}" height="${$}" fill="#FFFFFF" />` : `<rect width="${$}" height="${$}" rx="${$ * 2}" fill="#FFFFFF" />`, m = t.isMouthOpen ? `<path d="M15 ${19 + t.mouthSpread}c2 1 4 1 6 0" stroke="${t.faceColor}" fill="none" stroke-linecap="round" />` : `<path d="M13,${19 + t.mouthSpread} a1,0.75 0 0,0 10,0" fill="${t.faceColor}" />`, F = t.isCircle ? $ : $ / 6;
+  return `<svg
+  viewBox="0 0 ${$} ${$}"
+  fill="none"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="${c}"
+  height="${c}"
+>
+  ${a ? `<title>${e}</title>` : ""}
+  <mask id="${i}" maskUnits="userSpaceOnUse" x="0" y="0" width="${$}" height="${$}">
+    ${f}
+  </mask>
+  <g mask="url(#${i})">
+    <rect width="${$}" height="${$}" fill="${t.backgroundColor}" />
+    <rect
+      x="0"
+      y="0"
+      width="${$}"
+      height="${$}"
+      transform="translate(${t.wrapperTranslateX} ${t.wrapperTranslateY}) rotate(${t.wrapperRotate} ${$ / 2} ${$ / 2}) scale(${t.wrapperScale})"
+      fill="${t.wrapperColor}"
+      rx="${F}"
+    />
+    <g transform="translate(${t.faceTranslateX} ${t.faceTranslateY}) rotate(${t.faceRotate} ${$ / 2} ${$ / 2})">
+      ${m}
+      <rect x="${14 - t.eyeSpread}" y="14" width="1.5" height="2" rx="1" stroke="none" fill="${t.faceColor}" />
+      <rect x="${20 + t.eyeSpread}" y="14" width="1.5" height="2" rx="1" stroke="none" fill="${t.faceColor}" />
+    </g>
+  </g>
+</svg>`;
+}, X = 4, l = 80;
+function Y(s, e) {
+  const r = S(s), a = e.length;
+  return Array.from({ length: X }, (n, t) => ({
+    color: w(r + t, e, a),
+    translateX: p(r * (t + 1), l / 2 - (t + 17), 1),
+    translateY: p(r * (t + 1), l / 2 - (t + 17), 2),
+    rotate: p(r * (t + 1), 360),
+    isSquare: y(r, 2)
+  }));
+}
+const C = (s) => {
+  const { name: e, colors: r, title: a, square: o, size: n = "40px" } = s, t = Y(e, r), i = k(), c = typeof n == "number" ? `${n}px` : n, f = o ? `<rect width="${l}" height="${l}" fill="#FFFFFF" />` : `<rect width="${l}" height="${l}" rx="${l * 2}" fill="#FFFFFF" />`, m = t[1].isSquare ? l : l / 8;
+  return `<svg
+  viewBox="0 0 ${l} ${l}"
+  fill="none"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="${c}"
+  height="${c}"
+>
+  ${a ? `<title>${e}</title>` : ""}
+  <mask id="${i}" maskUnits="userSpaceOnUse" x="0" y="0" width="${l}" height="${l}">
+    ${f}
+  </mask>
+  <g mask="url(#${i})">
+    <rect width="${l}" height="${l}" fill="${t[0].color}" />
+    <rect
+      x="${(l - 60) / 2}"
+      y="${(l - 20) / 2}"
+      width="${l}"
+      height="${m}"
+      fill="${t[1].color}"
+      transform="translate(${t[1].translateX} ${t[1].translateY}) rotate(${t[1].rotate} ${l / 2} ${l / 2})"
+    />
+    <circle
+      cx="${l / 2}"
+      cy="${l / 2}"
+      fill="${t[2].color}"
+      r="${l / 5}"
+      transform="translate(${t[2].translateX} ${t[2].translateY})"
+    />
+    <line
+      x1="0"
+      y1="${l / 2}"
+      x2="${l}"
+      y2="${l / 2}"
+      stroke-width="2"
+      stroke="${t[3].color}"
+      transform="translate(${t[3].translateX} ${t[3].translateY}) rotate(${t[3].rotate} ${l / 2} ${l / 2})"
+    />
+  </g>
+</svg>`;
+}, q = 4, g = 80;
+function G(s, e) {
+  const r = S(s), a = e.length;
+  return Array.from(
+    { length: q },
+    (n, t) => w(r + t, e, a)
+  );
+}
+const H = (s) => {
+  const { name: e, colors: r, title: a, square: o, size: n = "40px" } = s, t = G(e, r), i = e.replace(/\s/g, ""), c = k(), f = `gradient_paint0_linear_${i}_${c}`, m = `gradient_paint1_linear_${i}_${c}`, F = typeof n == "number" ? `${n}px` : n, x = o ? `<rect width="${g}" height="${g}" fill="#FFFFFF" />` : `<rect width="${g}" height="${g}" rx="${g * 2}" fill="#FFFFFF" />`;
+  return `<svg
+  viewBox="0 0 ${g} ${g}"
+  fill="none"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="${F}"
+  height="${F}"
+>
+  ${a ? `<title>${e}</title>` : ""}
+  <mask id="${c}" maskUnits="userSpaceOnUse" x="0" y="0" width="${g}" height="${g}">
+    ${x}
+  </mask>
+  <g mask="url(#${c})">
+    <path fill="url(#${f})" d="M0 0h80v40H0z" />
+    <path fill="url(#${m})" d="M0 40h80v40H0z" />
+  </g>
+  <defs>
+    <linearGradient id="${f}" x1="${g / 2}" y1="0" x2="${g / 2}" y2="${g / 2}" gradientUnits="userSpaceOnUse">
+      <stop stop-color="${t[0]}" />
+      <stop offset="1" stop-color="${t[1]}" />
+    </linearGradient>
+    <linearGradient id="${m}" x1="${g / 2}" y1="${g / 2}" x2="${g / 2}" y2="${g}" gradientUnits="userSpaceOnUse">
+      <stop stop-color="${t[2]}" />
+      <stop offset="1" stop-color="${t[3]}" />
+    </linearGradient>
+  </defs>
+</svg>`;
+}, Z = ["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"], P = {
+  marble: M,
+  pixel: T,
+  ring: N,
+  beam: v,
+  bauhaus: C,
+  sunset: H,
+  geometric: v,
+  // Deprecated, use 'beam'
+  abstract: C
+  // Deprecated, use 'bauhaus'
+};
+function j(s = {}) {
+  const {
+    name: e = "Clara Barton",
+    colors: r = Z,
+    title: a = !1,
+    square: o = !1,
+    size: n = "40px",
+    variant: t = "marble"
+  } = s;
+  return (P[t] || M)({
+    name: e,
+    colors: r,
+    title: a,
+    square: o,
+    size: n
+  });
+}
+export {
+  j as boring,
+  j as default
+};

package/dist/index.umd.js

@@ -0,0 +1,169 @@
+(function(w,u){typeof exports=="object"&&typeof module<"u"?u(exports):typeof define=="function"&&define.amd?define(["exports"],u):(w=typeof globalThis<"u"?globalThis:w||self,u(w.BoringAvatars={}))})(this,(function(w){"use strict";const u=s=>{let e=0;for(let r=0;r<s.length;r++){const o=s.charCodeAt(r);e=(e<<5)-e+o,e=e&e}return Math.abs(e)},C=(s,e)=>Math.floor(s/Math.pow(10,e)%10),v=(s,e)=>!(C(s,e)%2),g=(s,e,r)=>{const o=s%e;return r&&C(s,r)%2===0?-o:o},x=(s,e,r)=>e[s%r],E=s=>{s.slice(0,1)==="#"&&(s=s.slice(1));const e=parseInt(s.substr(0,2),16),r=parseInt(s.substr(2,2),16),o=parseInt(s.substr(4,2),16);return(e*299+r*587+o*114)/1e3>=128?"#000000":"#FFFFFF"};let _=0;const y=()=>`boring-avatar-${++_}-${Date.now().toString(36)}`,T=3,h=80;function U(s,e){const r=u(s),o=e.length;return Array.from({length:T},(n,t)=>({color:x(r+t,e,o),translateX:g(r*(t+1),h/10,1),translateY:g(r*(t+1),h/10,2),scale:1.2+g(r*(t+1),h/20)/10,rotate:g(r*(t+1),360,1)}))}const M=s=>{const{name:e,colors:r,title:o,square:a,size:n="40px"}=s,t=U(e,r),i=y(),c=typeof n=="number"?`${n}px`:n,p=a?`<rect width="${h}" height="${h}" fill="#FFFFFF" />`:`<rect width="${h}" height="${h}" rx="${h*2}" fill="#FFFFFF" />`;return`<svg
+  viewBox="0 0 ${h} ${h}"
+  fill="none"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="${c}"
+  height="${c}"
+>
+  ${o?`<title>${e}</title>`:""}
+  <mask id="${i}" maskUnits="userSpaceOnUse" x="0" y="0" width="${h}" height="${h}">
+    ${p}
+  </mask>
+  <g mask="url(#${i})">
+    <rect width="${h}" height="${h}" fill="${t[0].color}" />
+    <path
+      filter="url(#filter_${i})"
+      d="M32.414 59.35L50.376 70.5H72.5v-71H33.728L26.5 13.381l19.057 27.08L32.414 59.35z"
+      fill="${t[1].color}"
+      transform="translate(${t[1].translateX} ${t[1].translateY}) rotate(${t[1].rotate} ${h/2} ${h/2}) scale(${t[2].scale})"
+    />
+    <path
+      filter="url(#filter_${i})"
+      style="mix-blend-mode: overlay"
+      d="M22.216 24L0 46.75l14.108 38.129L78 86l-3.081-59.276-22.378 4.005 12.972 20.186-23.35 27.395L22.215 24z"
+      fill="${t[2].color}"
+      transform="translate(${t[2].translateX} ${t[2].translateY}) rotate(${t[2].rotate} ${h/2} ${h/2}) scale(${t[2].scale})"
+    />
+  </g>
+  <defs>
+    <filter id="filter_${i}" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+      <feFlood floodOpacity="0" result="BackgroundImageFix" />
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feGaussianBlur stdDeviation="7" result="effect1_foregroundBlur" />
+    </filter>
+  </defs>
+</svg>`},B=64,d=80;function L(s,e){const r=u(s),o=e.length;return Array.from({length:B},(n,t)=>x(r%(t+1),e,o))}const O=s=>{const{name:e,colors:r,title:o,square:a,size:n="40px"}=s,t=L(e,r),i=y(),c=typeof n=="number"?`${n}px`:n,p=a?`<rect width="${d}" height="${d}" fill="#FFFFFF" />`:`<rect width="${d}" height="${d}" rx="${d*2}" fill="#FFFFFF" />`,F=[],S=[[0,0],[20,0],[40,0],[60,0],[10,0],[30,0],[50,0],[70,0],[0,10],[0,20],[0,30],[0,40],[0,50],[0,60],[0,70],[20,10],[20,20],[20,30],[20,40],[20,50],[20,60],[20,70],[40,10],[40,20],[40,30],[40,40],[40,50],[40,60],[40,70],[60,10],[60,20],[60,30],[60,40],[60,50],[60,60],[60,70],[10,10],[10,20],[10,30],[10,40],[10,50],[10,60],[10,70],[30,10],[30,20],[30,30],[30,40],[30,50],[30,60],[30,70],[50,10],[50,20],[50,30],[50,40],[50,50],[50,60],[50,70],[70,10],[70,20],[70,30],[70,40],[70,50],[70,60],[70,70]];for(let k=0;k<S.length;k++){const[j,V]=S[k];F.push(`    <rect x="${j}" y="${V}" width="10" height="10" fill="${t[k]}" />`)}return`<svg
+  viewBox="0 0 ${d} ${d}"
+  fill="none"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="${c}"
+  height="${c}"
+>
+  ${o?`<title>${e}</title>`:""}
+  <mask id="${i}" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="${d}" height="${d}">
+    ${p}
+  </mask>
+  <g mask="url(#${i})">
+${F.join(`
+`)}
+  </g>
+</svg>`},m=90,D=5;function A(s,e){const r=u(s),o=e.length,a=Array.from({length:D},(t,i)=>x(r+i,e,o)),n=[];return n[0]=a[0],n[1]=a[1],n[2]=a[1],n[3]=a[2],n[4]=a[2],n[5]=a[3],n[6]=a[3],n[7]=a[0],n[8]=a[4],n}const N=s=>{const{name:e,colors:r,title:o,square:a,size:n="40px"}=s,t=A(e,r),i=y(),c=typeof n=="number"?`${n}px`:n,p=a?`<rect width="${m}" height="${m}" fill="#FFFFFF" />`:`<rect width="${m}" height="${m}" rx="${m*2}" fill="#FFFFFF" />`;return`<svg
+  viewBox="0 0 ${m} ${m}"
+  fill="none"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="${c}"
+  height="${c}"
+>
+  ${o?`<title>${e}</title>`:""}
+  <mask id="${i}" maskUnits="userSpaceOnUse" x="0" y="0" width="${m}" height="${m}">
+    ${p}
+  </mask>
+  <g mask="url(#${i})">
+    <path d="M0 0h90v45H0z" fill="${t[0]}" />
+    <path d="M0 45h90v45H0z" fill="${t[1]}" />
+    <path d="M83 45a38 38 0 00-76 0h76z" fill="${t[2]}" />
+    <path d="M83 45a38 38 0 01-76 0h76z" fill="${t[3]}" />
+    <path d="M77 45a32 32 0 10-64 0h64z" fill="${t[4]}" />
+    <path d="M77 45a32 32 0 11-64 0h64z" fill="${t[5]}" />
+    <path d="M71 45a26 26 0 00-52 0h52z" fill="${t[6]}" />
+    <path d="M71 45a26 26 0 01-52 0h52z" fill="${t[7]}" />
+    <circle cx="45" cy="45" r="23" fill="${t[8]}" />
+  </g>
+</svg>`},$=36;function R(s,e){const r=u(s),o=e.length,a=x(r,e,o),n=g(r,10,1),t=n<5?n+$/9:n,i=g(r,10,2),c=i<5?i+$/9:i;return{wrapperColor:a,faceColor:E(a),backgroundColor:x(r+13,e,o),wrapperTranslateX:t,wrapperTranslateY:c,wrapperRotate:g(r,360),wrapperScale:1+g(r,$/12)/10,isMouthOpen:v(r,2),isCircle:v(r,1),eyeSpread:g(r,5),mouthSpread:g(r,3),faceRotate:g(r,10,3),faceTranslateX:t>$/6?t/2:g(r,8,1),faceTranslateY:c>$/6?c/2:g(r,7,2)}}const b=s=>{const{name:e,colors:r,title:o,square:a,size:n="40px"}=s,t=R(e,r),i=y(),c=typeof n=="number"?`${n}px`:n,p=a?`<rect width="${$}" height="${$}" fill="#FFFFFF" />`:`<rect width="${$}" height="${$}" rx="${$*2}" fill="#FFFFFF" />`,F=t.isMouthOpen?`<path d="M15 ${19+t.mouthSpread}c2 1 4 1 6 0" stroke="${t.faceColor}" fill="none" stroke-linecap="round" />`:`<path d="M13,${19+t.mouthSpread} a1,0.75 0 0,0 10,0" fill="${t.faceColor}" />`,S=t.isCircle?$:$/6;return`<svg
+  viewBox="0 0 ${$} ${$}"
+  fill="none"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="${c}"
+  height="${c}"
+>
+  ${o?`<title>${e}</title>`:""}
+  <mask id="${i}" maskUnits="userSpaceOnUse" x="0" y="0" width="${$}" height="${$}">
+    ${p}
+  </mask>
+  <g mask="url(#${i})">
+    <rect width="${$}" height="${$}" fill="${t.backgroundColor}" />
+    <rect
+      x="0"
+      y="0"
+      width="${$}"
+      height="${$}"
+      transform="translate(${t.wrapperTranslateX} ${t.wrapperTranslateY}) rotate(${t.wrapperRotate} ${$/2} ${$/2}) scale(${t.wrapperScale})"
+      fill="${t.wrapperColor}"
+      rx="${S}"
+    />
+    <g transform="translate(${t.faceTranslateX} ${t.faceTranslateY}) rotate(${t.faceRotate} ${$/2} ${$/2})">
+      ${F}
+      <rect x="${14-t.eyeSpread}" y="14" width="1.5" height="2" rx="1" stroke="none" fill="${t.faceColor}" />
+      <rect x="${20+t.eyeSpread}" y="14" width="1.5" height="2" rx="1" stroke="none" fill="${t.faceColor}" />
+    </g>
+  </g>
+</svg>`},X=4,l=80;function Y(s,e){const r=u(s),o=e.length;return Array.from({length:X},(n,t)=>({color:x(r+t,e,o),translateX:g(r*(t+1),l/2-(t+17),1),translateY:g(r*(t+1),l/2-(t+17),2),rotate:g(r*(t+1),360),isSquare:v(r,2)}))}const z=s=>{const{name:e,colors:r,title:o,square:a,size:n="40px"}=s,t=Y(e,r),i=y(),c=typeof n=="number"?`${n}px`:n,p=a?`<rect width="${l}" height="${l}" fill="#FFFFFF" />`:`<rect width="${l}" height="${l}" rx="${l*2}" fill="#FFFFFF" />`,F=t[1].isSquare?l:l/8;return`<svg
+  viewBox="0 0 ${l} ${l}"
+  fill="none"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="${c}"
+  height="${c}"
+>
+  ${o?`<title>${e}</title>`:""}
+  <mask id="${i}" maskUnits="userSpaceOnUse" x="0" y="0" width="${l}" height="${l}">
+    ${p}
+  </mask>
+  <g mask="url(#${i})">
+    <rect width="${l}" height="${l}" fill="${t[0].color}" />
+    <rect
+      x="${(l-60)/2}"
+      y="${(l-20)/2}"
+      width="${l}"
+      height="${F}"
+      fill="${t[1].color}"
+      transform="translate(${t[1].translateX} ${t[1].translateY}) rotate(${t[1].rotate} ${l/2} ${l/2})"
+    />
+    <circle
+      cx="${l/2}"
+      cy="${l/2}"
+      fill="${t[2].color}"
+      r="${l/5}"
+      transform="translate(${t[2].translateX} ${t[2].translateY})"
+    />
+    <line
+      x1="0"
+      y1="${l/2}"
+      x2="${l}"
+      y2="${l/2}"
+      stroke-width="2"
+      stroke="${t[3].color}"
+      transform="translate(${t[3].translateX} ${t[3].translateY}) rotate(${t[3].rotate} ${l/2} ${l/2})"
+    />
+  </g>
+</svg>`},q=4,f=80;function G(s,e){const r=u(s),o=e.length;return Array.from({length:q},(n,t)=>x(r+t,e,o))}const H=s=>{const{name:e,colors:r,title:o,square:a,size:n="40px"}=s,t=G(e,r),i=e.replace(/\s/g,""),c=y(),p=`gradient_paint0_linear_${i}_${c}`,F=`gradient_paint1_linear_${i}_${c}`,S=typeof n=="number"?`${n}px`:n,k=a?`<rect width="${f}" height="${f}" fill="#FFFFFF" />`:`<rect width="${f}" height="${f}" rx="${f*2}" fill="#FFFFFF" />`;return`<svg
+  viewBox="0 0 ${f} ${f}"
+  fill="none"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  width="${S}"
+  height="${S}"
+>
+  ${o?`<title>${e}</title>`:""}
+  <mask id="${c}" maskUnits="userSpaceOnUse" x="0" y="0" width="${f}" height="${f}">
+    ${k}
+  </mask>
+  <g mask="url(#${c})">
+    <path fill="url(#${p})" d="M0 0h80v40H0z" />
+    <path fill="url(#${F})" d="M0 40h80v40H0z" />
+  </g>
+  <defs>
+    <linearGradient id="${p}" x1="${f/2}" y1="0" x2="${f/2}" y2="${f/2}" gradientUnits="userSpaceOnUse">
+      <stop stop-color="${t[0]}" />
+      <stop offset="1" stop-color="${t[1]}" />
+    </linearGradient>
+    <linearGradient id="${F}" x1="${f/2}" y1="${f/2}" x2="${f/2}" y2="${f}" gradientUnits="userSpaceOnUse">
+      <stop stop-color="${t[2]}" />
+      <stop offset="1" stop-color="${t[3]}" />
+    </linearGradient>
+  </defs>
+</svg>`},P=["#92A1C6","#146A7C","#F0AB3D","#C271B4","#C20D90"],Z={marble:M,pixel:O,ring:N,beam:b,bauhaus:z,sunset:H,geometric:b,abstract:z};function I(s={}){const{name:e="Clara Barton",colors:r=P,title:o=!1,square:a=!1,size:n="40px",variant:t="marble"}=s;return(Z[t]||M)({name:e,colors:r,title:o,square:a,size:n})}w.boring=I,w.default=I,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/types.d.ts

@@ -0,0 +1,28 @@
+export type AvatarVariant = 'pixel' | 'bauhaus' | 'ring' | 'beam' | 'sunset' | 'marble' | 'geometric' | 'abstract';
+export interface AvatarProps {
+    /** The name to generate the avatar from */
+    name?: string;
+    /** Array of colors to use in the avatar */
+    colors?: string[];
+    /** Include a title element in the SVG */
+    title?: boolean;
+    /** Make the avatar square instead of round */
+    square?: boolean;
+    /** Size of the avatar (number for pixels, or string with unit) */
+    size?: number | string;
+    /** Variant style of the avatar */
+    variant?: AvatarVariant;
+}
+export interface AvatarResult {
+    /** The SVG string */
+    svg: string;
+    /** The generated avatar data (for advanced use) */
+    data: {
+        name: string;
+        colors: string[];
+        size: string;
+        square: boolean;
+        variant: AvatarVariant;
+    };
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC;AAEnH,MAAM,WAAW,WAAW;IAC1B,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,kCAAkC;IAClC,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,MAAM,WAAW,YAAY;IAC3B,qBAAqB;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,mDAAmD;IACnD,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,EAAE,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,OAAO,CAAC;QAChB,OAAO,EAAE,aAAa,CAAC;KACxB,CAAC;CACH"}

package/dist/utilities.d.ts

@@ -0,0 +1,11 @@
+export declare const hashCode: (name: string) => number;
+export declare const getModulus: (num: number, max: number) => number;
+export declare const getDigit: (number: number, ntn: number) => number;
+export declare const getBoolean: (number: number, ntn: number) => boolean;
+export declare const getAngle: (x: number, y: number) => number;
+export declare const getUnit: (number: number, range: number, index?: number) => number;
+export declare const getRandomColor: (number: number, colors: string[], range: number) => string;
+export declare const getContrast: (hexcolor: string) => string;
+export declare const generateId: () => string;
+export declare const normalizeSize: (size: number | string | undefined) => string;
+//# sourceMappingURL=utilities.d.ts.map

package/dist/utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../src/utilities.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,GAAI,MAAM,MAAM,KAAG,MAQvC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,KAAK,MAAM,EAAE,KAAK,MAAM,KAAG,MAErD,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,QAAQ,MAAM,EAAE,KAAK,MAAM,KAAG,MAEtD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,QAAQ,MAAM,EAAE,KAAK,MAAM,KAAG,OAExD,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,GAAG,MAAM,EAAE,GAAG,MAAM,KAAG,MAE/C,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,QAAQ,MAAM,EAAE,OAAO,MAAM,EAAE,QAAQ,MAAM,KAAG,MAMvE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM,EAAE,QAAQ,MAAM,EAAE,EAAE,OAAO,MAAM,KAAG,MAEhF,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,KAAG,MAgB9C,CAAC;AAIF,eAAO,MAAM,UAAU,QAAO,MAE7B,CAAC;AAGF,eAAO,MAAM,aAAa,GAAI,MAAM,MAAM,GAAG,MAAM,GAAG,SAAS,KAAG,MAIjE,CAAC"}

package/dist/variants/bauhaus.d.ts

@@ -0,0 +1,9 @@
+export interface BauhausOptions {
+    name: string;
+    colors: string[];
+    title?: boolean;
+    square?: boolean;
+    size?: number | string;
+}
+export declare const generateBauhaus: (options: BauhausOptions) => string;
+//# sourceMappingURL=bauhaus.d.ts.map

package/dist/variants/bauhaus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bauhaus.d.ts","sourceRoot":"","sources":["../../src/variants/bauhaus.ts"],"names":[],"mappings":"AA4BA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,GAAI,SAAS,cAAc,KAAG,MAoDzD,CAAC"}

package/dist/variants/beam.d.ts

@@ -0,0 +1,9 @@
+export interface BeamOptions {
+    name: string;
+    colors: string[];
+    title?: boolean;
+    square?: boolean;
+    size?: number | string;
+}
+export declare const generateBeam: (options: BeamOptions) => string;
+//# sourceMappingURL=beam.d.ts.map

package/dist/variants/beam.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"beam.d.ts","sourceRoot":"","sources":["../../src/variants/beam.ts"],"names":[],"mappings":"AAoDA,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,GAAI,SAAS,WAAW,KAAG,MA8CnD,CAAC"}

package/dist/variants/index.d.ts

@@ -0,0 +1,7 @@
+export { generateMarble, type MarbleOptions } from './marble.js';
+export { generatePixel, type PixelOptions } from './pixel.js';
+export { generateRing, type RingOptions } from './ring.js';
+export { generateBeam, type BeamOptions } from './beam.js';
+export { generateBauhaus, type BauhausOptions } from './bauhaus.js';
+export { generateSunset, type SunsetOptions } from './sunset.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/variants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/variants/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC"}

package/dist/variants/marble.d.ts

@@ -0,0 +1,9 @@
+export interface MarbleOptions {
+    name: string;
+    colors: string[];
+    title?: boolean;
+    square?: boolean;
+    size?: number | string;
+}
+export declare const generateMarble: (options: MarbleOptions) => string;
+//# sourceMappingURL=marble.d.ts.map

package/dist/variants/marble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"marble.d.ts","sourceRoot":"","sources":["../../src/variants/marble.ts"],"names":[],"mappings":"AA4BA,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,GAAI,SAAS,aAAa,KAAG,MA8CvD,CAAC"}

package/dist/variants/pixel.d.ts

@@ -0,0 +1,9 @@
+export interface PixelOptions {
+    name: string;
+    colors: string[];
+    title?: boolean;
+    square?: boolean;
+    size?: number | string;
+}
+export declare const generatePixel: (options: PixelOptions) => string;
+//# sourceMappingURL=pixel.d.ts.map

package/dist/variants/pixel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixel.d.ts","sourceRoot":"","sources":["../../src/variants/pixel.ts"],"names":[],"mappings":"AAgBA,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,aAAa,GAAI,SAAS,YAAY,KAAG,MA8CrD,CAAC"}

package/dist/variants/ring.d.ts

@@ -0,0 +1,9 @@
+export interface RingOptions {
+    name: string;
+    colors: string[];
+    title?: boolean;
+    square?: boolean;
+    size?: number | string;
+}
+export declare const generateRing: (options: RingOptions) => string;
+//# sourceMappingURL=ring.d.ts.map

package/dist/variants/ring.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ring.d.ts","sourceRoot":"","sources":["../../src/variants/ring.ts"],"names":[],"mappings":"AAyBA,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,GAAI,SAAS,WAAW,KAAG,MAkCnD,CAAC"}

package/dist/variants/sunset.d.ts

@@ -0,0 +1,9 @@
+export interface SunsetOptions {
+    name: string;
+    colors: string[];
+    title?: boolean;
+    square?: boolean;
+    size?: number | string;
+}
+export declare const generateSunset: (options: SunsetOptions) => string;
+//# sourceMappingURL=sunset.d.ts.map

package/dist/variants/sunset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sunset.d.ts","sourceRoot":"","sources":["../../src/variants/sunset.ts"],"names":[],"mappings":"AAgBA,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,GAAI,SAAS,aAAa,KAAG,MAwCvD,CAAC"}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "boring-avatars-vanilla",
+  "version": "1.0.0",
+  "description": "Boring avatars as a vanilla JavaScript library, SVG-based avatars from any username and color palette. Works in both browsers and Node.js server-side rendering.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && vite build",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "dev": "vite"
+  },
+  "keywords": [
+    "boring-avatars",
+    "boring",
+    "avatar",
+    "svg",
+    "vanilla",
+    "javascript",
+    "nodejs",
+    "browser"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "~5.8.3",
+    "vite": "^7.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.0.0"
+  },
+  "repository": "git@github.com:boringdesigners/boring-avatars.git"
+}