@usenavii/core 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +846 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +80 -0
- package/dist/index.d.ts +80 -0
- package/dist/index.js +838 -0
- package/dist/index.js.map +1 -0
- package/dist/parts.cjs +594 -0
- package/dist/parts.cjs.map +1 -0
- package/dist/parts.d.cts +84 -0
- package/dist/parts.d.ts +84 -0
- package/dist/parts.js +574 -0
- package/dist/parts.js.map +1 -0
- package/dist/types-BlMtdWZf.d.cts +64 -0
- package/dist/types-BlMtdWZf.d.ts +64 -0
- package/package.json +58 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,838 @@
|
|
|
1
|
+
// src/prng.ts
|
|
2
|
+
function cyrb53(input, salt = 0) {
|
|
3
|
+
let h1 = 3735928559 ^ salt;
|
|
4
|
+
let h2 = 1103547991 ^ salt;
|
|
5
|
+
for (let i = 0; i < input.length; i++) {
|
|
6
|
+
const ch = input.charCodeAt(i);
|
|
7
|
+
h1 = Math.imul(h1 ^ ch, 2654435761);
|
|
8
|
+
h2 = Math.imul(h2 ^ ch, 1597334677);
|
|
9
|
+
}
|
|
10
|
+
h1 = Math.imul(h1 ^ h1 >>> 16, 2246822507);
|
|
11
|
+
h1 ^= Math.imul(h2 ^ h2 >>> 13, 3266489909);
|
|
12
|
+
h2 = Math.imul(h2 ^ h2 >>> 16, 2246822507);
|
|
13
|
+
h2 ^= Math.imul(h1 ^ h1 >>> 13, 3266489909);
|
|
14
|
+
return [h1 >>> 0, h2 >>> 0];
|
|
15
|
+
}
|
|
16
|
+
function createRng(seed) {
|
|
17
|
+
const [a, b] = cyrb53(seed, 0);
|
|
18
|
+
const [c, d] = cyrb53(seed, 1);
|
|
19
|
+
let s0 = a >>> 0;
|
|
20
|
+
let s1 = b >>> 0;
|
|
21
|
+
let s2 = c >>> 0;
|
|
22
|
+
let s3 = d >>> 0;
|
|
23
|
+
function sfc32() {
|
|
24
|
+
s0 |= 0;
|
|
25
|
+
s1 |= 0;
|
|
26
|
+
s2 |= 0;
|
|
27
|
+
s3 |= 0;
|
|
28
|
+
const t = (s0 + s1 | 0) + s3 | 0;
|
|
29
|
+
s3 = s3 + 1 | 0;
|
|
30
|
+
s0 = s1 ^ s1 >>> 9;
|
|
31
|
+
s1 = s2 + (s2 << 3) | 0;
|
|
32
|
+
s2 = s2 << 21 | s2 >>> 11;
|
|
33
|
+
s2 = s2 + t | 0;
|
|
34
|
+
return (t >>> 0) / 4294967296;
|
|
35
|
+
}
|
|
36
|
+
const rng = {
|
|
37
|
+
next: sfc32,
|
|
38
|
+
int(maxExclusive) {
|
|
39
|
+
return Math.floor(sfc32() * maxExclusive);
|
|
40
|
+
},
|
|
41
|
+
pick(arr) {
|
|
42
|
+
if (arr.length === 0) throw new Error("cannot pick from empty array");
|
|
43
|
+
return arr[Math.floor(sfc32() * arr.length)];
|
|
44
|
+
},
|
|
45
|
+
bool(probabilityTrue = 0.5) {
|
|
46
|
+
return sfc32() < probabilityTrue;
|
|
47
|
+
},
|
|
48
|
+
range(min, max) {
|
|
49
|
+
return min + sfc32() * (max - min);
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
return rng;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// src/parts/palette.ts
|
|
56
|
+
var PALETTES = [
|
|
57
|
+
{ id: "indigo", bodyFrom: "#818CF8", bodyTo: "#6366F1", accent: "#FFFFFF", ink: "#1E1B4B", blush: "#F9A8D4" },
|
|
58
|
+
{ id: "mint", bodyFrom: "#6EE7B7", bodyTo: "#34D399", accent: "#ECFDF5", ink: "#064E3B", blush: "#FBCFE8" },
|
|
59
|
+
{ id: "amber", bodyFrom: "#FCD34D", bodyTo: "#F59E0B", accent: "#FFF7ED", ink: "#78350F", blush: "#FB7185" },
|
|
60
|
+
{ id: "sky", bodyFrom: "#93C5FD", bodyTo: "#3B82F6", accent: "#FFFFFF", ink: "#1E3A8A", blush: "#F9A8D4" },
|
|
61
|
+
{ id: "violet", bodyFrom: "#C084FC", bodyTo: "#A855F7", accent: "#FAE8FF", ink: "#4C1D95", blush: "#F472B6" },
|
|
62
|
+
{ id: "cyan", bodyFrom: "#67E8F9", bodyTo: "#06B6D4", accent: "#ECFEFF", ink: "#164E63", blush: "#F9A8D4" },
|
|
63
|
+
{ id: "rose", bodyFrom: "#FDA4AF", bodyTo: "#F43F5E", accent: "#FFE4E6", ink: "#881337", blush: "#FECDD3" },
|
|
64
|
+
{ id: "lime", bodyFrom: "#BEF264", bodyTo: "#84CC16", accent: "#F7FEE7", ink: "#365314", blush: "#FCA5A5" },
|
|
65
|
+
{ id: "peach", bodyFrom: "#FDBA74", bodyTo: "#F97316", accent: "#FFF7ED", ink: "#7C2D12", blush: "#FECACA" },
|
|
66
|
+
{ id: "teal", bodyFrom: "#5EEAD4", bodyTo: "#14B8A6", accent: "#F0FDFA", ink: "#134E4A", blush: "#FBCFE8" },
|
|
67
|
+
{ id: "sand", bodyFrom: "#FDE68A", bodyTo: "#EAB308", accent: "#FEFCE8", ink: "#713F12", blush: "#FCA5A5" },
|
|
68
|
+
{ id: "plum", bodyFrom: "#D8B4FE", bodyTo: "#9333EA", accent: "#F5F3FF", ink: "#3B0764", blush: "#F0ABFC" },
|
|
69
|
+
{ id: "coral", bodyFrom: "#FCA5A5", bodyTo: "#EF4444", accent: "#FEF2F2", ink: "#7F1D1D", blush: "#FECACA" },
|
|
70
|
+
{ id: "forest", bodyFrom: "#86EFAC", bodyTo: "#16A34A", accent: "#F0FDF4", ink: "#14532D", blush: "#FBCFE8" },
|
|
71
|
+
{ id: "slate", bodyFrom: "#CBD5E1", bodyTo: "#64748B", accent: "#F8FAFC", ink: "#0F172A", blush: "#FBCFE8" },
|
|
72
|
+
{ id: "fuchsia", bodyFrom: "#F0ABFC", bodyTo: "#D946EF", accent: "#FDF4FF", ink: "#701A75", blush: "#FBCFE8" },
|
|
73
|
+
// v0.4 additions — broader brand fit
|
|
74
|
+
{ id: "terracotta", bodyFrom: "#FBBF9C", bodyTo: "#C2410C", accent: "#FFF7ED", ink: "#7C2D12", blush: "#FECACA" },
|
|
75
|
+
{ id: "navy", bodyFrom: "#93C5FD", bodyTo: "#1E3A8A", accent: "#EFF6FF", ink: "#172554", blush: "#FBCFE8" },
|
|
76
|
+
{ id: "lavender", bodyFrom: "#DDD6FE", bodyTo: "#7C3AED", accent: "#F5F3FF", ink: "#3B0764", blush: "#F5D0FE" },
|
|
77
|
+
{ id: "charcoal", bodyFrom: "#9CA3AF", bodyTo: "#374151", accent: "#F9FAFB", ink: "#030712", blush: "#FBCFE8" },
|
|
78
|
+
{ id: "butter", bodyFrom: "#FEF9C3", bodyTo: "#FACC15", accent: "#FEFCE8", ink: "#713F12", blush: "#FCA5A5" },
|
|
79
|
+
{ id: "aqua", bodyFrom: "#A5F3FC", bodyTo: "#0891B2", accent: "#ECFEFF", ink: "#083344", blush: "#FBCFE8" }
|
|
80
|
+
];
|
|
81
|
+
var PALETTE_BY_ID = Object.fromEntries(
|
|
82
|
+
PALETTES.map((p) => [p.id, p])
|
|
83
|
+
);
|
|
84
|
+
|
|
85
|
+
// src/parts/anchor.ts
|
|
86
|
+
var ANCHORS = {
|
|
87
|
+
orb: {
|
|
88
|
+
cx: 50,
|
|
89
|
+
eyeY: 52,
|
|
90
|
+
eyeOffset: 10,
|
|
91
|
+
eyeScale: 1,
|
|
92
|
+
mouthY: 62,
|
|
93
|
+
mouthSpan: 7,
|
|
94
|
+
topperX: 50,
|
|
95
|
+
topperY: 22,
|
|
96
|
+
groundY: 86,
|
|
97
|
+
cheekY: 58,
|
|
98
|
+
cheekOffset: 18
|
|
99
|
+
},
|
|
100
|
+
tall: {
|
|
101
|
+
cx: 50,
|
|
102
|
+
eyeY: 49,
|
|
103
|
+
eyeOffset: 8,
|
|
104
|
+
eyeScale: 1.05,
|
|
105
|
+
mouthY: 60,
|
|
106
|
+
mouthSpan: 6,
|
|
107
|
+
topperX: 50,
|
|
108
|
+
topperY: 18,
|
|
109
|
+
groundY: 91,
|
|
110
|
+
cheekY: 55,
|
|
111
|
+
cheekOffset: 14
|
|
112
|
+
},
|
|
113
|
+
squat: {
|
|
114
|
+
cx: 50,
|
|
115
|
+
eyeY: 56,
|
|
116
|
+
eyeOffset: 11,
|
|
117
|
+
eyeScale: 0.95,
|
|
118
|
+
mouthY: 66,
|
|
119
|
+
mouthSpan: 8,
|
|
120
|
+
topperX: 50,
|
|
121
|
+
topperY: 30,
|
|
122
|
+
groundY: 86,
|
|
123
|
+
cheekY: 62,
|
|
124
|
+
cheekOffset: 20
|
|
125
|
+
},
|
|
126
|
+
pear: {
|
|
127
|
+
cx: 50,
|
|
128
|
+
eyeY: 51,
|
|
129
|
+
eyeOffset: 9,
|
|
130
|
+
eyeScale: 1,
|
|
131
|
+
mouthY: 60,
|
|
132
|
+
mouthSpan: 6.5,
|
|
133
|
+
topperX: 50,
|
|
134
|
+
topperY: 24,
|
|
135
|
+
groundY: 90,
|
|
136
|
+
cheekY: 57,
|
|
137
|
+
cheekOffset: 15
|
|
138
|
+
},
|
|
139
|
+
pebble: {
|
|
140
|
+
cx: 50,
|
|
141
|
+
eyeY: 54,
|
|
142
|
+
eyeOffset: 10.5,
|
|
143
|
+
eyeScale: 1,
|
|
144
|
+
mouthY: 63,
|
|
145
|
+
mouthSpan: 7.5,
|
|
146
|
+
topperX: 53,
|
|
147
|
+
topperY: 23,
|
|
148
|
+
groundY: 85,
|
|
149
|
+
cheekY: 59,
|
|
150
|
+
cheekOffset: 19
|
|
151
|
+
},
|
|
152
|
+
dumpling: {
|
|
153
|
+
cx: 50,
|
|
154
|
+
eyeY: 58,
|
|
155
|
+
eyeOffset: 11,
|
|
156
|
+
eyeScale: 0.98,
|
|
157
|
+
mouthY: 68,
|
|
158
|
+
mouthSpan: 8,
|
|
159
|
+
topperX: 50,
|
|
160
|
+
topperY: 32,
|
|
161
|
+
groundY: 88,
|
|
162
|
+
cheekY: 64,
|
|
163
|
+
cheekOffset: 21
|
|
164
|
+
},
|
|
165
|
+
taro: {
|
|
166
|
+
cx: 50,
|
|
167
|
+
eyeY: 50,
|
|
168
|
+
eyeOffset: 9,
|
|
169
|
+
eyeScale: 1.02,
|
|
170
|
+
mouthY: 60,
|
|
171
|
+
mouthSpan: 6.5,
|
|
172
|
+
topperX: 50,
|
|
173
|
+
topperY: 14,
|
|
174
|
+
groundY: 91,
|
|
175
|
+
cheekY: 55,
|
|
176
|
+
cheekOffset: 14
|
|
177
|
+
},
|
|
178
|
+
wisp: {
|
|
179
|
+
cx: 50,
|
|
180
|
+
eyeY: 47,
|
|
181
|
+
eyeOffset: 7.5,
|
|
182
|
+
eyeScale: 1.08,
|
|
183
|
+
mouthY: 58,
|
|
184
|
+
mouthSpan: 5.5,
|
|
185
|
+
topperX: 50,
|
|
186
|
+
topperY: 12,
|
|
187
|
+
groundY: 94,
|
|
188
|
+
cheekY: 53,
|
|
189
|
+
cheekOffset: 12
|
|
190
|
+
}
|
|
191
|
+
};
|
|
192
|
+
|
|
193
|
+
// src/parts/body.ts
|
|
194
|
+
var BODY_PATHS = {
|
|
195
|
+
// Orb — true round, slight under-bulge for grounded feel
|
|
196
|
+
orb: "M50 20 C72 20 84 36 84 54 C84 73 70 86 50 86 C30 86 16 73 16 54 C16 36 28 20 50 20 Z",
|
|
197
|
+
// Tall — egg pointing up, narrow shoulders, fuller bottom
|
|
198
|
+
tall: "M50 15 C66 15 74 30 74 48 C74 70 66 91 50 91 C34 91 26 70 26 48 C26 30 34 15 50 15 Z",
|
|
199
|
+
// Squat — wide mushroom cap, low waist
|
|
200
|
+
squat: "M50 28 C74 28 88 42 88 60 C88 78 74 86 50 86 C26 86 12 78 12 60 C12 42 26 28 50 28 Z",
|
|
201
|
+
// Pear — narrow top, broad rounded bottom
|
|
202
|
+
pear: "M50 18 C62 18 70 32 70 46 C70 56 80 66 80 76 C80 86 68 90 50 90 C32 90 20 86 20 76 C20 66 30 56 30 46 C30 32 38 18 50 18 Z",
|
|
203
|
+
// Pebble — asymmetric river stone, slight tilt right
|
|
204
|
+
pebble: "M52 19 C72 21 86 36 84 56 C82 73 68 85 50 85 C30 85 16 72 16 54 C16 35 32 17 52 19 Z",
|
|
205
|
+
// Dumpling — round bottom-heavy, narrow shoulders, sits low
|
|
206
|
+
dumpling: "M50 30 C62 30 70 38 70 48 C70 56 78 64 80 72 C82 82 70 88 50 88 C30 88 18 82 20 72 C22 64 30 56 30 48 C30 38 38 30 50 30 Z",
|
|
207
|
+
// Taro — gourd shape: small head bulge, fuller bottom
|
|
208
|
+
taro: "M50 14 C58 14 64 22 64 30 C64 36 60 40 60 46 C60 54 76 60 78 76 C80 88 66 91 50 91 C34 91 20 88 22 76 C24 60 40 54 40 46 C40 40 36 36 36 30 C36 22 42 14 50 14 Z",
|
|
209
|
+
// Wisp — tall narrow body, slight bottom flare, ghost-like
|
|
210
|
+
wisp: "M50 12 C60 12 66 24 66 40 C66 60 74 78 70 90 C64 96 36 96 30 90 C26 78 34 60 34 40 C34 24 40 12 50 12 Z"
|
|
211
|
+
};
|
|
212
|
+
function renderBodyDefs(_id, _palette, gradId) {
|
|
213
|
+
return `
|
|
214
|
+
<radialGradient id="${gradId}" cx="42%" cy="32%" r="68%">
|
|
215
|
+
<stop offset="0%" stop-color="${_palette.bodyFrom}" />
|
|
216
|
+
<stop offset="100%" stop-color="${_palette.bodyTo}" />
|
|
217
|
+
</radialGradient>`.trim();
|
|
218
|
+
}
|
|
219
|
+
function renderBody(id, palette, gradId) {
|
|
220
|
+
const d = BODY_PATHS[id];
|
|
221
|
+
const a = ANCHORS[id];
|
|
222
|
+
const outlineColor = withAlpha(palette.ink, 0.18);
|
|
223
|
+
return [
|
|
224
|
+
// Ground shadow — soft ellipse just below body, grounds the figure
|
|
225
|
+
`<ellipse cx="${a.cx}" cy="${a.groundY + 4}" rx="22" ry="2.6" fill="${palette.ink}" opacity="0.16" />`,
|
|
226
|
+
// Body fill
|
|
227
|
+
`<path d="${d}" fill="url(#${gradId})" stroke="${outlineColor}" stroke-width="0.7" />`,
|
|
228
|
+
// Sheen — small light spot upper-left, scaled to body
|
|
229
|
+
`<ellipse cx="${a.cx - 12}" cy="${a.eyeY - 14}" rx="11" ry="7" fill="#FFFFFF" opacity="0.22" transform="rotate(-18 ${a.cx - 12} ${a.eyeY - 14})" />`
|
|
230
|
+
].join("");
|
|
231
|
+
}
|
|
232
|
+
function withAlpha(hex, alpha) {
|
|
233
|
+
const h = hex.replace("#", "");
|
|
234
|
+
const v = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
|
|
235
|
+
const part = v.slice(0, 6);
|
|
236
|
+
const r = parseInt(part.slice(0, 2), 16);
|
|
237
|
+
const g = parseInt(part.slice(2, 4), 16);
|
|
238
|
+
const b = parseInt(part.slice(4, 6), 16);
|
|
239
|
+
return `rgba(${r},${g},${b},${alpha})`;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
// src/parts/eyes.ts
|
|
243
|
+
function renderEyes(id, palette, anchor) {
|
|
244
|
+
const lx = anchor.cx - anchor.eyeOffset;
|
|
245
|
+
const rx = anchor.cx + anchor.eyeOffset;
|
|
246
|
+
const y = anchor.eyeY;
|
|
247
|
+
const s = anchor.eyeScale;
|
|
248
|
+
const ink = palette.ink;
|
|
249
|
+
switch (id) {
|
|
250
|
+
case "round":
|
|
251
|
+
return [
|
|
252
|
+
sclera(lx, y, 4 * s, 4.5 * s),
|
|
253
|
+
sclera(rx, y, 4 * s, 4.5 * s),
|
|
254
|
+
pupil(lx, y, 2.2 * s, ink),
|
|
255
|
+
pupil(rx, y, 2.2 * s, ink),
|
|
256
|
+
glint(lx + 1, y - 1),
|
|
257
|
+
glint(rx + 1, y - 1)
|
|
258
|
+
].join("");
|
|
259
|
+
case "wide":
|
|
260
|
+
return [
|
|
261
|
+
sclera(lx, y, 5 * s, 5.5 * s),
|
|
262
|
+
sclera(rx, y, 5 * s, 5.5 * s),
|
|
263
|
+
pupil(lx, y + 0.5, 3 * s, ink),
|
|
264
|
+
pupil(rx, y + 0.5, 3 * s, ink),
|
|
265
|
+
glint(lx + 1.2, y - 0.5),
|
|
266
|
+
glint(rx + 1.2, y - 0.5)
|
|
267
|
+
].join("");
|
|
268
|
+
case "squint":
|
|
269
|
+
return [
|
|
270
|
+
arc(lx - 4.5, y, lx, y - 3.5, lx + 4.5, y, ink, 1.8),
|
|
271
|
+
arc(rx - 4.5, y, rx, y - 3.5, rx + 4.5, y, ink, 1.8)
|
|
272
|
+
].join("");
|
|
273
|
+
case "wink":
|
|
274
|
+
return [
|
|
275
|
+
sclera(lx, y, 4 * s, 4.5 * s),
|
|
276
|
+
pupil(lx, y, 2.2 * s, ink),
|
|
277
|
+
glint(lx + 1, y - 1),
|
|
278
|
+
arc(rx - 4, y, rx, y - 3.5, rx + 4, y, ink, 1.8)
|
|
279
|
+
].join("");
|
|
280
|
+
case "sleepy":
|
|
281
|
+
return [
|
|
282
|
+
// Heavier upper lid — half-closed
|
|
283
|
+
`<path d="M${lx - 4} ${y - 0.5} Q${lx} ${y + 2} ${lx + 4} ${y - 0.5}" stroke="${ink}" stroke-width="1.7" stroke-linecap="round" fill="none" />`,
|
|
284
|
+
`<path d="M${rx - 4} ${y - 0.5} Q${rx} ${y + 2} ${rx + 4} ${y - 0.5}" stroke="${ink}" stroke-width="1.7" stroke-linecap="round" fill="none" />`,
|
|
285
|
+
// tiny visible pupils
|
|
286
|
+
`<circle cx="${lx}" cy="${y + 0.5}" r="0.9" fill="${ink}" />`,
|
|
287
|
+
`<circle cx="${rx}" cy="${y + 0.5}" r="0.9" fill="${ink}" />`
|
|
288
|
+
].join("");
|
|
289
|
+
case "star":
|
|
290
|
+
return [starEye(lx, y, ink), starEye(rx, y, ink)].join("");
|
|
291
|
+
case "heart":
|
|
292
|
+
return [heartEye(lx, y, ink), heartEye(rx, y, ink)].join("");
|
|
293
|
+
case "oval":
|
|
294
|
+
return [
|
|
295
|
+
sclera(lx, y, 4.5 * s, 5 * s),
|
|
296
|
+
sclera(rx, y, 4.5 * s, 5 * s),
|
|
297
|
+
`<ellipse cx="${lx}" cy="${y}" rx="${1.6 * s}" ry="${3 * s}" fill="${ink}" />`,
|
|
298
|
+
`<ellipse cx="${rx}" cy="${y}" rx="${1.6 * s}" ry="${3 * s}" fill="${ink}" />`,
|
|
299
|
+
glint(lx + 0.8, y - 1.5),
|
|
300
|
+
glint(rx + 0.8, y - 1.5)
|
|
301
|
+
].join("");
|
|
302
|
+
case "dot":
|
|
303
|
+
return [
|
|
304
|
+
`<circle cx="${lx}" cy="${y}" r="${1.4 * s}" fill="${ink}" />`,
|
|
305
|
+
`<circle cx="${rx}" cy="${y}" r="${1.4 * s}" fill="${ink}" />`
|
|
306
|
+
].join("");
|
|
307
|
+
case "cross":
|
|
308
|
+
return [crossEye(lx, y, ink), crossEye(rx, y, ink)].join("");
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
function heartEye(cx, cy, color) {
|
|
312
|
+
const s = 2;
|
|
313
|
+
return `<path d="M${cx} ${cy + s * 1.4} L${cx - s * 1.8} ${cy - s * 0.2} A${s} ${s} 0 0 1 ${cx} ${cy - s * 0.6} A${s} ${s} 0 0 1 ${cx + s * 1.8} ${cy - s * 0.2} Z" fill="${color}" />`;
|
|
314
|
+
}
|
|
315
|
+
function crossEye(cx, cy, color) {
|
|
316
|
+
const s = 2.4;
|
|
317
|
+
return `<g stroke="${color}" stroke-width="1.6" stroke-linecap="round"><line x1="${cx - s}" y1="${cy - s}" x2="${cx + s}" y2="${cy + s}" /><line x1="${cx - s}" y1="${cy + s}" x2="${cx + s}" y2="${cy - s}" /></g>`;
|
|
318
|
+
}
|
|
319
|
+
function sclera(cx, cy, rx, ry) {
|
|
320
|
+
return `<ellipse cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}" fill="#FFFFFF" />`;
|
|
321
|
+
}
|
|
322
|
+
function pupil(cx, cy, r, color) {
|
|
323
|
+
return `<circle cx="${cx}" cy="${cy}" r="${r}" fill="${color}" />`;
|
|
324
|
+
}
|
|
325
|
+
function glint(cx, cy) {
|
|
326
|
+
return `<circle cx="${cx}" cy="${cy}" r="0.8" fill="#FFFFFF" />`;
|
|
327
|
+
}
|
|
328
|
+
function arc(x1, y1, cx, cy, x2, y2, stroke, width) {
|
|
329
|
+
return `<path d="M${x1} ${y1} Q${cx} ${cy} ${x2} ${y2}" stroke="${stroke}" stroke-width="${width}" stroke-linecap="round" fill="none" />`;
|
|
330
|
+
}
|
|
331
|
+
function starEye(cx, cy, color) {
|
|
332
|
+
const s = 3;
|
|
333
|
+
return `<path d="M${cx} ${cy - s} L${cx + s * 0.35} ${cy - s * 0.35} L${cx + s} ${cy} L${cx + s * 0.35} ${cy + s * 0.35} L${cx} ${cy + s} L${cx - s * 0.35} ${cy + s * 0.35} L${cx - s} ${cy} L${cx - s * 0.35} ${cy - s * 0.35} Z" fill="${color}" />`;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
// src/parts/mouth.ts
|
|
337
|
+
function renderMouth(id, palette, anchor, curveScale = 1) {
|
|
338
|
+
const cx = anchor.cx;
|
|
339
|
+
const y = anchor.mouthY;
|
|
340
|
+
const w = anchor.mouthSpan * curveScale;
|
|
341
|
+
const ink = palette.ink;
|
|
342
|
+
switch (id) {
|
|
343
|
+
case "smile":
|
|
344
|
+
return `<path d="M${cx - w} ${y} Q${cx} ${y + 5} ${cx + w} ${y}" stroke="${ink}" stroke-width="1.8" stroke-linecap="round" fill="none" />`;
|
|
345
|
+
case "grin":
|
|
346
|
+
return `<path d="M${cx - w - 1} ${y - 2} Q${cx} ${y + 7} ${cx + w + 1} ${y - 2}" stroke="${ink}" stroke-width="1.8" stroke-linecap="round" fill="none" />`;
|
|
347
|
+
case "open":
|
|
348
|
+
return [
|
|
349
|
+
`<path d="M${cx - w - 1} ${y - 2} Q${cx} ${y + 9} ${cx + w + 1} ${y - 2}" stroke="${ink}" stroke-width="1.8" stroke-linecap="round" fill="${ink}" fill-opacity="0.55" />`,
|
|
350
|
+
`<ellipse cx="${cx}" cy="${y + 3}" rx="${w * 0.55}" ry="1.8" fill="#F472B6" opacity="0.75" />`
|
|
351
|
+
].join("");
|
|
352
|
+
case "flat":
|
|
353
|
+
return `<path d="M${cx - w + 1} ${y} L${cx + w - 1} ${y}" stroke="${ink}" stroke-width="1.8" stroke-linecap="round" fill="none" />`;
|
|
354
|
+
case "smirk":
|
|
355
|
+
return `<path d="M${cx - w} ${y} Q${cx} ${y + 3} ${cx + w + 1} ${y - 2}" stroke="${ink}" stroke-width="1.8" stroke-linecap="round" fill="none" />`;
|
|
356
|
+
case "awe":
|
|
357
|
+
return `<ellipse cx="${cx}" cy="${y + 1}" rx="${w * 0.45}" ry="3.2" fill="${ink}" opacity="0.85" />`;
|
|
358
|
+
case "tongue":
|
|
359
|
+
return [
|
|
360
|
+
`<path d="M${cx - w} ${y} Q${cx} ${y + 6} ${cx + w} ${y}" stroke="${ink}" stroke-width="1.8" stroke-linecap="round" fill="none" />`,
|
|
361
|
+
`<path d="M${cx - 2} ${y + 4} Q${cx} ${y + 9} ${cx + 2} ${y + 4} Z" fill="#F472B6" stroke="${ink}" stroke-width="0.6" />`
|
|
362
|
+
].join("");
|
|
363
|
+
case "tooth":
|
|
364
|
+
return [
|
|
365
|
+
`<path d="M${cx - w} ${y} Q${cx} ${y + 5} ${cx + w} ${y}" stroke="${ink}" stroke-width="1.8" stroke-linecap="round" fill="none" />`,
|
|
366
|
+
`<rect x="${cx - 1.2}" y="${y + 0.4}" width="2.4" height="2.6" rx="0.4" fill="#FFFFFF" stroke="${ink}" stroke-width="0.4" />`
|
|
367
|
+
].join("");
|
|
368
|
+
case "wave":
|
|
369
|
+
return `<path d="M${cx - w} ${y + 1} Q${cx - w / 2} ${y - 1.5} ${cx} ${y + 1} Q${cx + w / 2} ${y + 3.5} ${cx + w} ${y + 1}" stroke="${ink}" stroke-width="1.8" stroke-linecap="round" fill="none" />`;
|
|
370
|
+
case "dot":
|
|
371
|
+
return `<circle cx="${cx}" cy="${y + 1}" r="1.2" fill="${ink}" />`;
|
|
372
|
+
}
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
// src/parts/antenna.ts
|
|
376
|
+
function renderAntenna(id, anchor, palette) {
|
|
377
|
+
if (id === "none") return "";
|
|
378
|
+
const cx = anchor.topperX;
|
|
379
|
+
const topY = anchor.topperY;
|
|
380
|
+
const color = palette.accent;
|
|
381
|
+
const ink = palette.ink;
|
|
382
|
+
switch (id) {
|
|
383
|
+
case "classic":
|
|
384
|
+
return [
|
|
385
|
+
`<path d="M${cx} ${topY} Q${cx + 1} ${topY - 5} ${cx + 2.5} ${topY - 9}" stroke="${ink}" stroke-width="1.2" stroke-linecap="round" fill="none" opacity="0.55" />`,
|
|
386
|
+
`<circle class="spark" cx="${cx + 2.5}" cy="${topY - 10}" r="2.6" fill="${color}" stroke="${ink}" stroke-width="0.6" opacity="0.95" />`
|
|
387
|
+
].join("");
|
|
388
|
+
case "curl":
|
|
389
|
+
return [
|
|
390
|
+
`<path d="M${cx} ${topY} Q${cx + 6} ${topY - 4} ${cx + 1} ${topY - 8} Q${cx - 4} ${topY - 11} ${cx + 1} ${topY - 14}" stroke="${ink}" stroke-width="1.2" stroke-linecap="round" fill="none" opacity="0.55" />`,
|
|
391
|
+
`<circle class="spark" cx="${cx + 1}" cy="${topY - 14}" r="2.2" fill="${color}" stroke="${ink}" stroke-width="0.6" opacity="0.95" />`
|
|
392
|
+
].join("");
|
|
393
|
+
case "double":
|
|
394
|
+
return [
|
|
395
|
+
`<path d="M${cx - 4} ${topY} Q${cx - 5} ${topY - 4} ${cx - 5.5} ${topY - 8}" stroke="${ink}" stroke-width="1.1" stroke-linecap="round" fill="none" opacity="0.55" />`,
|
|
396
|
+
`<path d="M${cx + 4} ${topY} Q${cx + 5} ${topY - 4} ${cx + 5.5} ${topY - 8}" stroke="${ink}" stroke-width="1.1" stroke-linecap="round" fill="none" opacity="0.55" />`,
|
|
397
|
+
`<circle class="spark" cx="${cx - 5.5}" cy="${topY - 9}" r="2.1" fill="${color}" stroke="${ink}" stroke-width="0.5" opacity="0.95" />`,
|
|
398
|
+
`<circle class="spark" cx="${cx + 5.5}" cy="${topY - 9}" r="2.1" fill="${color}" stroke="${ink}" stroke-width="0.5" opacity="0.95" />`
|
|
399
|
+
].join("");
|
|
400
|
+
case "spike":
|
|
401
|
+
return [
|
|
402
|
+
`<path class="spark" d="M${cx - 2.5} ${topY - 1} L${cx + 1} ${topY - 11} L${cx + 4.5} ${topY - 1} Z" fill="${color}" stroke="${ink}" stroke-width="0.6" opacity="0.95" />`
|
|
403
|
+
].join("");
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
// src/parts/accessory.ts
|
|
408
|
+
function renderAccessory(id, palette, anchor) {
|
|
409
|
+
switch (id) {
|
|
410
|
+
case "none":
|
|
411
|
+
return "";
|
|
412
|
+
case "blush": {
|
|
413
|
+
const lx = anchor.cx - anchor.cheekOffset;
|
|
414
|
+
const rx = anchor.cx + anchor.cheekOffset;
|
|
415
|
+
const y = anchor.cheekY;
|
|
416
|
+
return [
|
|
417
|
+
`<ellipse cx="${lx}" cy="${y}" rx="3.6" ry="2.2" fill="${palette.blush}" opacity="0.5" />`,
|
|
418
|
+
`<ellipse cx="${rx}" cy="${y}" rx="3.6" ry="2.2" fill="${palette.blush}" opacity="0.5" />`
|
|
419
|
+
].join("");
|
|
420
|
+
}
|
|
421
|
+
case "freckles": {
|
|
422
|
+
const lx = anchor.cx - 8;
|
|
423
|
+
const rx = anchor.cx + 8;
|
|
424
|
+
const y = anchor.cheekY;
|
|
425
|
+
return [
|
|
426
|
+
dot(lx, y, palette.ink),
|
|
427
|
+
dot(lx + 3, y + 1.5, palette.ink),
|
|
428
|
+
dot(rx, y, palette.ink),
|
|
429
|
+
dot(rx - 3, y + 1.5, palette.ink)
|
|
430
|
+
].join("");
|
|
431
|
+
}
|
|
432
|
+
case "sparkle":
|
|
433
|
+
return [
|
|
434
|
+
sparkle(76, anchor.eyeY - 18, 3, palette),
|
|
435
|
+
sparkle(24, anchor.eyeY - 16, 2.5, palette),
|
|
436
|
+
sparkle(82, anchor.cheekY + 2, 2, palette)
|
|
437
|
+
].join("");
|
|
438
|
+
case "glasses": {
|
|
439
|
+
const lx = anchor.cx - anchor.eyeOffset;
|
|
440
|
+
const rx = anchor.cx + anchor.eyeOffset;
|
|
441
|
+
const y = anchor.eyeY;
|
|
442
|
+
const r = 6;
|
|
443
|
+
return [
|
|
444
|
+
`<circle cx="${lx}" cy="${y}" r="${r}" fill="none" stroke="${palette.ink}" stroke-width="1.2" />`,
|
|
445
|
+
`<circle cx="${rx}" cy="${y}" r="${r}" fill="none" stroke="${palette.ink}" stroke-width="1.2" />`,
|
|
446
|
+
`<line x1="${lx + r}" y1="${y}" x2="${rx - r}" y2="${y}" stroke="${palette.ink}" stroke-width="1.2" />`,
|
|
447
|
+
// subtle lens fill
|
|
448
|
+
`<circle cx="${lx}" cy="${y}" r="${r - 1}" fill="#FFFFFF" opacity="0.18" />`,
|
|
449
|
+
`<circle cx="${rx}" cy="${y}" r="${r - 1}" fill="#FFFFFF" opacity="0.18" />`
|
|
450
|
+
].join("");
|
|
451
|
+
}
|
|
452
|
+
case "eyepatch": {
|
|
453
|
+
const rx = anchor.cx + anchor.eyeOffset;
|
|
454
|
+
const y = anchor.eyeY;
|
|
455
|
+
return [
|
|
456
|
+
`<ellipse cx="${rx}" cy="${y}" rx="6" ry="5.2" fill="${palette.ink}" />`,
|
|
457
|
+
`<path d="M${rx - 6} ${y - 4} L${anchor.cx - 18} ${anchor.eyeY - 8}" stroke="${palette.ink}" stroke-width="0.9" />`,
|
|
458
|
+
`<path d="M${rx + 6} ${y - 3} L${anchor.cx + 22} ${anchor.eyeY - 6}" stroke="${palette.ink}" stroke-width="0.9" />`
|
|
459
|
+
].join("");
|
|
460
|
+
}
|
|
461
|
+
case "mole": {
|
|
462
|
+
return `<circle cx="${anchor.cx - anchor.cheekOffset * 0.6}" cy="${anchor.cheekY + 2}" r="0.9" fill="${palette.ink}" />`;
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
function dot(cx, cy, color) {
|
|
466
|
+
return `<circle cx="${cx}" cy="${cy}" r="0.85" fill="${color}" opacity="0.55" />`;
|
|
467
|
+
}
|
|
468
|
+
function sparkle(cx, cy, s, p) {
|
|
469
|
+
return `<path d="M${cx} ${cy - s} L${cx + s * 0.3} ${cy - s * 0.3} L${cx + s} ${cy} L${cx + s * 0.3} ${cy + s * 0.3} L${cx} ${cy + s} L${cx - s * 0.3} ${cy + s * 0.3} L${cx - s} ${cy} L${cx - s * 0.3} ${cy - s * 0.3} Z" fill="${p.accent}" stroke="${p.ink}" stroke-width="0.3" opacity="0.9" />`;
|
|
470
|
+
}
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
// src/parts/background.ts
|
|
474
|
+
function renderBackground(id, palette, override) {
|
|
475
|
+
const color = override ?? palette.bodyFrom;
|
|
476
|
+
switch (id) {
|
|
477
|
+
case "none":
|
|
478
|
+
return "";
|
|
479
|
+
case "solid":
|
|
480
|
+
return `<rect x="0" y="0" width="100" height="100" fill="${color}" opacity="0.18" />`;
|
|
481
|
+
case "ring":
|
|
482
|
+
return [
|
|
483
|
+
`<circle cx="50" cy="50" r="48" fill="${color}" opacity="0.14" />`,
|
|
484
|
+
`<circle cx="50" cy="50" r="46" fill="none" stroke="${palette.accent}" stroke-width="0.6" opacity="0.4" />`
|
|
485
|
+
].join("");
|
|
486
|
+
}
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
// src/parts/topper.ts
|
|
490
|
+
function renderTopper(id, anchor, palette) {
|
|
491
|
+
if (id === "none") return "";
|
|
492
|
+
const cx = anchor.topperX;
|
|
493
|
+
const topY = anchor.topperY;
|
|
494
|
+
const ink = palette.ink;
|
|
495
|
+
switch (id) {
|
|
496
|
+
case "ears":
|
|
497
|
+
return [
|
|
498
|
+
`<path d="M${cx - 16} ${topY + 6} L${cx - 11} ${topY - 5} L${cx - 6} ${topY + 8} Z" fill="${palette.bodyTo}" stroke="${ink}" stroke-width="0.6" opacity="0.95" />`,
|
|
499
|
+
`<path d="M${cx + 6} ${topY + 8} L${cx + 11} ${topY - 5} L${cx + 16} ${topY + 6} Z" fill="${palette.bodyTo}" stroke="${ink}" stroke-width="0.6" opacity="0.95" />`,
|
|
500
|
+
// inner ear blush
|
|
501
|
+
`<path d="M${cx - 14} ${topY + 4} L${cx - 11} ${topY - 1} L${cx - 8} ${topY + 5} Z" fill="${palette.blush}" opacity="0.65" />`,
|
|
502
|
+
`<path d="M${cx + 8} ${topY + 5} L${cx + 11} ${topY - 1} L${cx + 14} ${topY + 4} Z" fill="${palette.blush}" opacity="0.65" />`
|
|
503
|
+
].join("");
|
|
504
|
+
case "roundEars":
|
|
505
|
+
return [
|
|
506
|
+
`<circle cx="${cx - 13}" cy="${topY + 2}" r="6" fill="${palette.bodyTo}" stroke="${ink}" stroke-width="0.6" />`,
|
|
507
|
+
`<circle cx="${cx + 13}" cy="${topY + 2}" r="6" fill="${palette.bodyTo}" stroke="${ink}" stroke-width="0.6" />`,
|
|
508
|
+
`<circle cx="${cx - 13}" cy="${topY + 2}" r="3" fill="${palette.blush}" opacity="0.6" />`,
|
|
509
|
+
`<circle cx="${cx + 13}" cy="${topY + 2}" r="3" fill="${palette.blush}" opacity="0.6" />`
|
|
510
|
+
].join("");
|
|
511
|
+
case "horn":
|
|
512
|
+
return [
|
|
513
|
+
`<path d="M${cx - 1} ${topY + 2} Q${cx} ${topY - 6} ${cx + 4} ${topY - 10} Q${cx + 6} ${topY - 4} ${cx + 3} ${topY + 2} Z" fill="${palette.accent}" stroke="${ink}" stroke-width="0.6" />`
|
|
514
|
+
].join("");
|
|
515
|
+
case "horns":
|
|
516
|
+
return [
|
|
517
|
+
`<path d="M${cx - 7} ${topY + 4} Q${cx - 8} ${topY - 4} ${cx - 4} ${topY - 7} Q${cx - 2} ${topY - 1} ${cx - 3} ${topY + 4} Z" fill="${palette.accent}" stroke="${ink}" stroke-width="0.6" />`,
|
|
518
|
+
`<path d="M${cx + 3} ${topY + 4} Q${cx + 2} ${topY - 1} ${cx + 4} ${topY - 7} Q${cx + 8} ${topY - 4} ${cx + 7} ${topY + 4} Z" fill="${palette.accent}" stroke="${ink}" stroke-width="0.6" />`
|
|
519
|
+
].join("");
|
|
520
|
+
case "tuft":
|
|
521
|
+
return [
|
|
522
|
+
`<path d="M${cx} ${topY + 2} Q${cx - 2} ${topY - 4} ${cx + 1} ${topY - 8} Q${cx + 6} ${topY - 5} ${cx + 4} ${topY + 1} Z" fill="${ink}" opacity="0.85" />`
|
|
523
|
+
].join("");
|
|
524
|
+
case "cap":
|
|
525
|
+
return [
|
|
526
|
+
`<path d="M${cx - 16} ${topY + 6} Q${cx - 16} ${topY - 8} ${cx} ${topY - 8} Q${cx + 16} ${topY - 8} ${cx + 16} ${topY + 6} Z" fill="${palette.ink}" opacity="0.92" />`,
|
|
527
|
+
`<rect x="${cx - 16}" y="${topY + 5}" width="32" height="2.5" rx="1" fill="${palette.accent}" opacity="0.85" />`,
|
|
528
|
+
`<circle cx="${cx}" cy="${topY - 9}" r="2.2" fill="${palette.accent}" stroke="${ink}" stroke-width="0.5" />`
|
|
529
|
+
].join("");
|
|
530
|
+
case "leaf":
|
|
531
|
+
return [
|
|
532
|
+
`<path d="M${cx - 1} ${topY + 2} Q${cx - 6} ${topY - 4} ${cx - 1} ${topY - 8} Q${cx + 3} ${topY - 4} ${cx - 1} ${topY + 2} Z" fill="#22C55E" stroke="${ink}" stroke-width="0.4" opacity="0.95" />`,
|
|
533
|
+
`<path d="M${cx + 1} ${topY + 2} Q${cx + 5} ${topY - 2} ${cx + 6} ${topY - 6}" stroke="#16A34A" stroke-width="1" fill="none" stroke-linecap="round" />`
|
|
534
|
+
].join("");
|
|
535
|
+
case "headband":
|
|
536
|
+
return [
|
|
537
|
+
`<path d="M${cx - 18} ${topY + 8} Q${cx} ${topY + 2} ${cx + 18} ${topY + 8} L${cx + 18} ${topY + 12} Q${cx} ${topY + 6} ${cx - 18} ${topY + 12} Z" fill="${palette.bodyTo}" stroke="${ink}" stroke-width="0.6" />`,
|
|
538
|
+
`<rect x="${cx - 2}" y="${topY + 4}" width="4" height="4" rx="1" fill="${palette.accent}" stroke="${ink}" stroke-width="0.4" />`
|
|
539
|
+
].join("");
|
|
540
|
+
case "halo":
|
|
541
|
+
return [
|
|
542
|
+
`<ellipse cx="${cx}" cy="${topY - 6}" rx="11" ry="2.5" fill="none" stroke="#FACC15" stroke-width="2" opacity="0.95" />`,
|
|
543
|
+
`<ellipse cx="${cx}" cy="${topY - 6}" rx="8.5" ry="1.6" fill="none" stroke="#FDE68A" stroke-width="0.6" opacity="0.7" />`
|
|
544
|
+
].join("");
|
|
545
|
+
case "crown":
|
|
546
|
+
return [
|
|
547
|
+
`<path d="M${cx - 11} ${topY + 4} L${cx - 11} ${topY - 4} L${cx - 6} ${topY + 1} L${cx} ${topY - 7} L${cx + 6} ${topY + 1} L${cx + 11} ${topY - 4} L${cx + 11} ${topY + 4} Z" fill="#FACC15" stroke="${ink}" stroke-width="0.7" />`,
|
|
548
|
+
`<circle cx="${cx - 11}" cy="${topY - 4}" r="1.4" fill="#EF4444" stroke="${ink}" stroke-width="0.3" />`,
|
|
549
|
+
`<circle cx="${cx}" cy="${topY - 7}" r="1.6" fill="#EF4444" stroke="${ink}" stroke-width="0.3" />`,
|
|
550
|
+
`<circle cx="${cx + 11}" cy="${topY - 4}" r="1.4" fill="#EF4444" stroke="${ink}" stroke-width="0.3" />`
|
|
551
|
+
].join("");
|
|
552
|
+
case "antlers":
|
|
553
|
+
return [
|
|
554
|
+
`<path d="M${cx - 5} ${topY + 4} L${cx - 6} ${topY - 4} M${cx - 6} ${topY - 4} L${cx - 10} ${topY - 6} M${cx - 6} ${topY - 4} L${cx - 6} ${topY - 9} M${cx - 6} ${topY - 9} L${cx - 8} ${topY - 11} M${cx - 6} ${topY - 9} L${cx - 3} ${topY - 11}" stroke="${ink}" stroke-width="1.3" stroke-linecap="round" fill="none" />`,
|
|
555
|
+
`<path d="M${cx + 5} ${topY + 4} L${cx + 6} ${topY - 4} M${cx + 6} ${topY - 4} L${cx + 10} ${topY - 6} M${cx + 6} ${topY - 4} L${cx + 6} ${topY - 9} M${cx + 6} ${topY - 9} L${cx + 8} ${topY - 11} M${cx + 6} ${topY - 9} L${cx + 3} ${topY - 11}" stroke="${ink}" stroke-width="1.3" stroke-linecap="round" fill="none" />`
|
|
556
|
+
].join("");
|
|
557
|
+
}
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
// src/parts/index.ts
|
|
561
|
+
var BODY_IDS = [
|
|
562
|
+
"orb",
|
|
563
|
+
"tall",
|
|
564
|
+
"squat",
|
|
565
|
+
"pear",
|
|
566
|
+
"pebble",
|
|
567
|
+
"dumpling",
|
|
568
|
+
"taro",
|
|
569
|
+
"wisp"
|
|
570
|
+
];
|
|
571
|
+
var EYE_IDS = [
|
|
572
|
+
"round",
|
|
573
|
+
"wide",
|
|
574
|
+
"squint",
|
|
575
|
+
"wink",
|
|
576
|
+
"sleepy",
|
|
577
|
+
"star",
|
|
578
|
+
"heart",
|
|
579
|
+
"oval",
|
|
580
|
+
"dot",
|
|
581
|
+
"cross"
|
|
582
|
+
];
|
|
583
|
+
var MOUTH_IDS = [
|
|
584
|
+
"smile",
|
|
585
|
+
"grin",
|
|
586
|
+
"open",
|
|
587
|
+
"flat",
|
|
588
|
+
"smirk",
|
|
589
|
+
"awe",
|
|
590
|
+
"tongue",
|
|
591
|
+
"tooth",
|
|
592
|
+
"wave",
|
|
593
|
+
"dot"
|
|
594
|
+
];
|
|
595
|
+
var ANTENNA_IDS = ["none", "classic", "curl", "double", "spike"];
|
|
596
|
+
var ACCESSORY_IDS = [
|
|
597
|
+
"none",
|
|
598
|
+
"blush",
|
|
599
|
+
"freckles",
|
|
600
|
+
"sparkle",
|
|
601
|
+
"glasses",
|
|
602
|
+
"eyepatch",
|
|
603
|
+
"mole"
|
|
604
|
+
];
|
|
605
|
+
var BACKGROUND_IDS = ["none", "solid", "ring"];
|
|
606
|
+
var TOPPER_IDS = [
|
|
607
|
+
// 'none' weighted ~2× so plain-headed avatars stay common
|
|
608
|
+
"none",
|
|
609
|
+
"none",
|
|
610
|
+
"ears",
|
|
611
|
+
"roundEars",
|
|
612
|
+
"horn",
|
|
613
|
+
"horns",
|
|
614
|
+
"tuft",
|
|
615
|
+
"cap",
|
|
616
|
+
"leaf",
|
|
617
|
+
"headband",
|
|
618
|
+
"halo",
|
|
619
|
+
"crown",
|
|
620
|
+
"antlers"
|
|
621
|
+
];
|
|
622
|
+
|
|
623
|
+
// src/select.ts
|
|
624
|
+
function selectAvatar(seed, options = {}) {
|
|
625
|
+
const rng = createRng(seed);
|
|
626
|
+
const paletteOverride = options.paletteId ? PALETTE_BY_ID[options.paletteId] : void 0;
|
|
627
|
+
const palette = paletteOverride ?? rng.pick(PALETTES);
|
|
628
|
+
const body = rng.pick(BODY_IDS);
|
|
629
|
+
const eyes = rng.pick(EYE_IDS);
|
|
630
|
+
const mouth = rng.pick(MOUTH_IDS);
|
|
631
|
+
const antenna = rng.pick(ANTENNA_IDS);
|
|
632
|
+
const accessory = rng.pick(ACCESSORY_IDS);
|
|
633
|
+
let background;
|
|
634
|
+
if (typeof options.background === "string") {
|
|
635
|
+
background = options.background;
|
|
636
|
+
} else if (options.background && typeof options.background === "object") {
|
|
637
|
+
background = "solid";
|
|
638
|
+
} else {
|
|
639
|
+
background = rng.pick(BACKGROUND_IDS);
|
|
640
|
+
}
|
|
641
|
+
const topperRaw = rng.pick(TOPPER_IDS);
|
|
642
|
+
const topper = antenna !== "none" && topperRaw !== "none" && topperRaw !== "leaf" ? "none" : topperRaw;
|
|
643
|
+
const hueShift = Math.round(rng.range(-30, 30));
|
|
644
|
+
const bodyScale = Number(rng.range(0.92, 1.08).toFixed(3));
|
|
645
|
+
const eyeGapShift = Number(rng.range(-2, 2).toFixed(2));
|
|
646
|
+
const mouthCurveScale = Number(rng.range(0.85, 1.15).toFixed(3));
|
|
647
|
+
const antennaTilt = Math.round(rng.range(-8, 8));
|
|
648
|
+
return {
|
|
649
|
+
seed,
|
|
650
|
+
palette,
|
|
651
|
+
body,
|
|
652
|
+
eyes,
|
|
653
|
+
mouth,
|
|
654
|
+
antenna,
|
|
655
|
+
accessory,
|
|
656
|
+
background,
|
|
657
|
+
topper,
|
|
658
|
+
hueShift,
|
|
659
|
+
bodyScale,
|
|
660
|
+
eyeGapShift,
|
|
661
|
+
mouthCurveScale,
|
|
662
|
+
antennaTilt
|
|
663
|
+
};
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
// src/animate.ts
|
|
667
|
+
function renderAnimationStyle(spec, scopeClass) {
|
|
668
|
+
const rng = createRng(`anim:${spec.seed}`);
|
|
669
|
+
const floatDelay = (rng.next() * 2).toFixed(2);
|
|
670
|
+
const blinkDelay = (rng.next() * 5).toFixed(2);
|
|
671
|
+
const pulseDelay = (rng.next() * 1.5).toFixed(2);
|
|
672
|
+
const twinkleDelay = (rng.next() * 1.8).toFixed(2);
|
|
673
|
+
const swayDelay = (rng.next() * 2.4).toFixed(2);
|
|
674
|
+
return `<style>
|
|
675
|
+
.${scopeClass} .body { animation: n-float 3.4s ease-in-out infinite; animation-delay: ${floatDelay}s; transform-origin: 50px 80px; transform-box: view-box; }
|
|
676
|
+
.${scopeClass} .eyes { animation: n-blink 5.4s ease-in-out infinite; animation-delay: ${blinkDelay}s; transform-origin: 50px 52px; transform-box: view-box; }
|
|
677
|
+
.${scopeClass} .antenna { animation: n-sway 3.6s ease-in-out infinite; animation-delay: ${swayDelay}s; transform-origin: 50% 100%; transform-box: fill-box; }
|
|
678
|
+
.${scopeClass} .spark { animation: n-pulse 1.9s ease-in-out infinite; animation-delay: ${pulseDelay}s; transform-origin: center; transform-box: fill-box; }
|
|
679
|
+
.${scopeClass} .sparkle { animation: n-twinkle 2.2s ease-in-out infinite; animation-delay: ${twinkleDelay}s; transform-origin: center; transform-box: fill-box; }
|
|
680
|
+
@keyframes n-float {
|
|
681
|
+
0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
|
|
682
|
+
25% { transform: translateY(-2px) rotate(-1.6deg) scale(1.025, 0.975); }
|
|
683
|
+
50% { transform: translateY(-4.5px) rotate(0deg) scale(0.985, 1.025); }
|
|
684
|
+
75% { transform: translateY(-2px) rotate(1.6deg) scale(1.025, 0.975); }
|
|
685
|
+
}
|
|
686
|
+
@keyframes n-blink {
|
|
687
|
+
0%, 85%, 91%, 100% { transform: scaleY(1); }
|
|
688
|
+
87%, 89%, 93%, 95% { transform: scaleY(0.06); }
|
|
689
|
+
}
|
|
690
|
+
@keyframes n-sway {
|
|
691
|
+
0%, 100% { transform: rotate(0deg); }
|
|
692
|
+
25% { transform: rotate(-5deg); }
|
|
693
|
+
75% { transform: rotate(5deg); }
|
|
694
|
+
}
|
|
695
|
+
@keyframes n-pulse {
|
|
696
|
+
0%, 100% { opacity: 0.55; transform: scale(1); }
|
|
697
|
+
50% { opacity: 1; transform: scale(1.32); }
|
|
698
|
+
}
|
|
699
|
+
@keyframes n-twinkle {
|
|
700
|
+
0%, 100% { opacity: 0.3; transform: rotate(0deg) scale(0.85); }
|
|
701
|
+
50% { opacity: 1; transform: rotate(180deg) scale(1.12); }
|
|
702
|
+
}
|
|
703
|
+
@media (prefers-reduced-motion: reduce) {
|
|
704
|
+
.${scopeClass} .body, .${scopeClass} .eyes, .${scopeClass} .antenna, .${scopeClass} .spark, .${scopeClass} .sparkle { animation: none; }
|
|
705
|
+
}
|
|
706
|
+
</style>`;
|
|
707
|
+
}
|
|
708
|
+
|
|
709
|
+
// src/render.ts
|
|
710
|
+
function renderAvatar(spec, options = {}) {
|
|
711
|
+
const size = options.size ?? 96;
|
|
712
|
+
const titleAttrs = options.title ? ` role="img" aria-label="${escapeXml(options.title)}"` : ' aria-hidden="true"';
|
|
713
|
+
return [
|
|
714
|
+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="${size}" height="${size}"${titleAttrs}>`,
|
|
715
|
+
options.title ? `<title>${escapeXml(options.title)}</title>` : "",
|
|
716
|
+
renderAvatarInner(spec, options),
|
|
717
|
+
`</svg>`
|
|
718
|
+
].join("");
|
|
719
|
+
}
|
|
720
|
+
function renderAvatarInner(spec, options = {}) {
|
|
721
|
+
const animated = options.animated === true;
|
|
722
|
+
const id = stableId(spec.seed);
|
|
723
|
+
const scopeClass = `n-${id}`;
|
|
724
|
+
const gradId = `navii-grad-${id}`;
|
|
725
|
+
const hueId = `navii-hue-${id}`;
|
|
726
|
+
const bgOverride = typeof options.background === "object" ? options.background.color : void 0;
|
|
727
|
+
const baseAnchor = ANCHORS[spec.body];
|
|
728
|
+
const anchor = {
|
|
729
|
+
...baseAnchor,
|
|
730
|
+
eyeOffset: baseAnchor.eyeOffset + (spec.eyeGapShift ?? 0)
|
|
731
|
+
};
|
|
732
|
+
const antennaSvg = renderAntenna(spec.antenna, anchor, spec.palette);
|
|
733
|
+
const accessorySvg = renderAccessory(spec.accessory, spec.palette, anchor);
|
|
734
|
+
const bodyMarkup = renderBody(spec.body, spec.palette, gradId);
|
|
735
|
+
const bodyTransform = transformBody(spec.bodyScale ?? 1, anchor);
|
|
736
|
+
const bodyFilter = spec.hueShift && spec.hueShift !== 0 ? ` filter="url(#${hueId})"` : "";
|
|
737
|
+
const bodyWrapped = `<g${bodyTransform}${bodyFilter}><g class="body">${bodyMarkup}</g></g>`;
|
|
738
|
+
const antennaWrapped = antennaSvg ? `<g${transformAntenna(spec.antennaTilt ?? 0, anchor)}><g class="antenna">${antennaSvg}</g></g>` : "";
|
|
739
|
+
const tileBg = resolveTileBg(options.tileBg, spec.palette);
|
|
740
|
+
const tileCircle = tileBg ? `<circle cx="50" cy="50" r="50" fill="${tileBg}" />` : "";
|
|
741
|
+
const parts = [
|
|
742
|
+
tileCircle,
|
|
743
|
+
renderBackground(spec.background, spec.palette, bgOverride),
|
|
744
|
+
bodyWrapped,
|
|
745
|
+
renderTopper(spec.topper, anchor, spec.palette),
|
|
746
|
+
wrap("eyes", renderEyes(spec.eyes, spec.palette, anchor)),
|
|
747
|
+
renderMouth(spec.mouth, spec.palette, anchor, spec.mouthCurveScale ?? 1),
|
|
748
|
+
antennaWrapped,
|
|
749
|
+
accessorySvg && spec.accessory === "sparkle" ? wrap("sparkle", accessorySvg) : accessorySvg
|
|
750
|
+
].join("");
|
|
751
|
+
const defs = [
|
|
752
|
+
renderBodyDefs(spec.body, spec.palette, gradId),
|
|
753
|
+
spec.hueShift && spec.hueShift !== 0 ? `<filter id="${hueId}" color-interpolation-filters="sRGB"><feColorMatrix type="hueRotate" values="${spec.hueShift}" /></filter>` : ""
|
|
754
|
+
].join("");
|
|
755
|
+
return [
|
|
756
|
+
`<defs>${defs}</defs>`,
|
|
757
|
+
animated ? renderAnimationStyle(spec, scopeClass) : "",
|
|
758
|
+
animated ? `<g class="${scopeClass}">${parts}</g>` : parts
|
|
759
|
+
].join("");
|
|
760
|
+
}
|
|
761
|
+
function resolveTileBg(raw, palette) {
|
|
762
|
+
if (!raw) return void 0;
|
|
763
|
+
if (raw === "auto") return palette.accent;
|
|
764
|
+
return raw;
|
|
765
|
+
}
|
|
766
|
+
function transformBody(scale, anchor) {
|
|
767
|
+
if (Math.abs(scale - 1) < 1e-3) return "";
|
|
768
|
+
return ` transform="translate(${anchor.cx} ${anchor.groundY}) scale(${scale}) translate(${-anchor.cx} ${-anchor.groundY})"`;
|
|
769
|
+
}
|
|
770
|
+
function transformAntenna(deg, anchor) {
|
|
771
|
+
if (deg === 0) return "";
|
|
772
|
+
return ` transform="rotate(${deg} ${anchor.topperX} ${anchor.topperY + 2})"`;
|
|
773
|
+
}
|
|
774
|
+
function wrap(cls, inner) {
|
|
775
|
+
if (!inner) return inner;
|
|
776
|
+
return `<g class="${cls}">${inner}</g>`;
|
|
777
|
+
}
|
|
778
|
+
function stableId(seed) {
|
|
779
|
+
let h = 5381;
|
|
780
|
+
for (let i = 0; i < seed.length; i++) h = (h << 5) + h + seed.charCodeAt(i) | 0;
|
|
781
|
+
return (h >>> 0).toString(36);
|
|
782
|
+
}
|
|
783
|
+
function escapeXml(s) {
|
|
784
|
+
return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
785
|
+
}
|
|
786
|
+
|
|
787
|
+
// src/group.ts
|
|
788
|
+
function renderGroup(seeds, options = {}) {
|
|
789
|
+
if (!Array.isArray(seeds) || seeds.length === 0) {
|
|
790
|
+
throw new Error("navii: renderGroup requires at least one seed");
|
|
791
|
+
}
|
|
792
|
+
const size = options.size ?? 64;
|
|
793
|
+
const overlap = clamp(options.overlap ?? 0.3, 0, 0.7);
|
|
794
|
+
const max = options.max ?? seeds.length;
|
|
795
|
+
const ring = options.ring ?? "#ffffff";
|
|
796
|
+
const tileBg = options.tileBg ?? "#ffffff";
|
|
797
|
+
const counterFill = options.counterFill ?? "#E5E7EB";
|
|
798
|
+
const counterInk = options.counterInk ?? "#374151";
|
|
799
|
+
const visibleSeeds = seeds.slice(0, Math.max(0, max - (seeds.length > max ? 1 : 0)));
|
|
800
|
+
const overflow = seeds.length - visibleSeeds.length;
|
|
801
|
+
const tileCount = visibleSeeds.length + (overflow > 0 ? 1 : 0);
|
|
802
|
+
const step = size * (1 - overlap);
|
|
803
|
+
const totalWidth = tileCount > 0 ? step * (tileCount - 1) + size : 0;
|
|
804
|
+
const tiles = visibleSeeds.map((seed, i) => {
|
|
805
|
+
const x = i * step;
|
|
806
|
+
const spec = selectAvatar(seed, options);
|
|
807
|
+
const bgCircle = tileBg !== "transparent" ? `<circle cx="50" cy="50" r="50" fill="${tileBg}" />` : "";
|
|
808
|
+
return `<svg x="${x}" y="0" width="${size}" height="${size}" viewBox="0 0 100 100" overflow="visible">
|
|
809
|
+
<defs><clipPath id="navii-clip"><circle cx="50" cy="50" r="50" /></clipPath></defs>
|
|
810
|
+
<g clip-path="url(#navii-clip)">${bgCircle}${renderAvatarInner(spec, options)}</g>
|
|
811
|
+
<circle cx="50" cy="50" r="49" fill="none" stroke="${ring}" stroke-width="2" />
|
|
812
|
+
</svg>`;
|
|
813
|
+
});
|
|
814
|
+
if (overflow > 0) {
|
|
815
|
+
const x = visibleSeeds.length * step;
|
|
816
|
+
tiles.push(`<svg x="${x}" y="0" width="${size}" height="${size}" viewBox="0 0 100 100" overflow="visible">
|
|
817
|
+
<circle cx="50" cy="50" r="50" fill="${counterFill}" />
|
|
818
|
+
<text x="50" y="50" text-anchor="middle" dominant-baseline="central" font-family="-apple-system, system-ui, sans-serif" font-weight="600" font-size="34" fill="${counterInk}">+${overflow}</text>
|
|
819
|
+
<circle cx="50" cy="50" r="49" fill="none" stroke="${ring}" stroke-width="2" />
|
|
820
|
+
</svg>`);
|
|
821
|
+
}
|
|
822
|
+
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${totalWidth} ${size}" width="${totalWidth}" height="${size}" aria-hidden="true">${tiles.join("")}</svg>`;
|
|
823
|
+
}
|
|
824
|
+
function clamp(n, lo, hi) {
|
|
825
|
+
return Math.max(lo, Math.min(hi, n));
|
|
826
|
+
}
|
|
827
|
+
|
|
828
|
+
// src/index.ts
|
|
829
|
+
function createAvatar(seed, options = {}) {
|
|
830
|
+
if (typeof seed !== "string" || seed.length === 0) {
|
|
831
|
+
throw new Error("navii: seed must be a non-empty string");
|
|
832
|
+
}
|
|
833
|
+
return renderAvatar(selectAvatar(seed, options), options);
|
|
834
|
+
}
|
|
835
|
+
|
|
836
|
+
export { createAvatar, createRng, cyrb53, renderAvatar, renderAvatarInner, renderGroup, selectAvatar };
|
|
837
|
+
//# sourceMappingURL=index.js.map
|
|
838
|
+
//# sourceMappingURL=index.js.map
|