agent-robot-avatar 0.5.2 → 0.7.0

package/src/skins/material-library.js

@@ -0,0 +1,302 @@
+// Paints the material skins: glazes, frosted glass, metals, wood, fabrics,
+// sweets and the rest. Each material is a base paint, light layers and an
+// optional texture drawn by one of the texture modules.
+import { MATERIALS as skins } from './material-data.js';
+import { extraTexture } from './more-materials.js';
+import { collectionTexture } from './collection-materials.js';
+import { revisionTexture } from './revised-materials.js';
+import { secondPassTexture } from './second-pass-materials.js';
+import { sportsTexture } from './sports-materials.js';
+import { softTexture } from './soft-materials.js';
+import { layerDefaults } from './layered-texture.js';
+
+const NS = 'http://www.w3.org/2000/svg';
+
+function svgElement(tag, attributes = {}, parent) {
+  const element = document.createElementNS(NS, tag);
+  for (const [name, value] of Object.entries(attributes)) element.setAttribute(name, value);
+  parent?.append(element);
+  return element;
+}
+
+function gradient(defs, tag, id, attributes, stops) {
+  const element = svgElement(tag, { id, ...attributes }, defs);
+  for (const [offset, color, opacity = 1] of stops) {
+    svgElement('stop', { offset, 'stop-color': color, 'stop-opacity': opacity }, element);
+  }
+  return element;
+}
+
+function texture(defs, id, kind) {
+  const extra = softTexture(defs, id, kind, svgElement, gradient) || sportsTexture(defs, id, kind, svgElement, gradient) || secondPassTexture(defs, id, kind, svgElement, gradient) || revisionTexture(defs, id, kind, svgElement, gradient) || collectionTexture(defs, id, kind, svgElement, gradient) || extraTexture(defs, id, kind, svgElement, gradient);
+  if (extra) return extra;
+  const tileSize = ({brushed:8, grain:48, wood:120, marble:220, denim:8, carbon:240,
+    galaxy:220, lava:120, terrazzo:80, cow:160, seeds:52, honey:48, blueprint:80})[kind] || 32;
+  const pattern = svgElement('pattern', {
+    id, width: tileSize, height: tileSize, patternUnits: 'userSpaceOnUse',
+    ...(kind === 'stripes' ? { patternTransform: 'rotate(-32)' } : {}),
+  }, defs);
+  if (kind === 'stripes') {
+    svgElement('rect', { width: 14, height: 32, fill: '#fff4f6', opacity: .88 }, pattern);
+    svgElement('rect', { x: 20, width: 3, height: 32, fill: '#fff4f6', opacity: .48 }, pattern);
+  } else if (kind === 'grain') {
+    // A fixed small tile gives the matte finish texture without image assets.
+    for (let i = 0; i < 64; i++) {
+      svgElement('circle', {
+        cx: (i * 17.37) % 48, cy: (i * i * 7.13) % 48,
+        r: .35 + (i % 3) * .18, fill: i % 2 ? '#fff4de' : '#6f3a27', opacity: .18,
+      }, pattern);
+    }
+  } else if (kind === 'dots') {
+    for (const [cx, cy] of [[8, 8], [24, 24]]) {
+      svgElement('circle', { cx, cy, r: 4.6, fill: '#f6db7b' }, pattern);
+    }
+  } else if (kind === 'denim') {
+    svgElement('path',{d:'M-4 8L8-4M0 12L12 0',stroke:'#b9d2df','stroke-width':1,opacity:.34},pattern);
+    svgElement('path',{d:'M0 1H8M0 5H8',stroke:'#0a2a49','stroke-width':.6,opacity:.23},pattern);
+  } else if (kind === 'carbon') {
+    gradient(defs,'linearGradient',`${id}-warp`,{x1:'0',y1:'0',x2:'1',y2:'0'},
+      [[0,'#142024'],[.22,'#37464a'],[.48,'#526064'],[.72,'#354347'],[1,'#18252a']]);
+    gradient(defs,'linearGradient',`${id}-weft`,{x1:'0',y1:'0',x2:'0',y2:'1'},
+      [[0,'#0d191f'],[.25,'#27353b'],[.52,'#3c4c52'],[.78,'#26363c'],[1,'#101c23']]);
+    const weave = svgElement('pattern',{
+      id:`${id}-weave`,width:32,height:32,patternUnits:'userSpaceOnUse',
+      patternTransform:'rotate(-18 120 120)',
+    },defs);
+    svgElement('rect',{width:32,height:32,fill:'#101b20'},weave);
+    // Two over, two under; the shift in each row produces the diagonal twill.
+    for(let row=0;row<4;row++) for(let col=0;col<4;col++) {
+      const x=col*8,y=row*8,vertical=(row-col+4)%4<2;
+      svgElement('rect',{x:x+.35,y:y+.35,width:7.3,height:7.3,rx:.65,
+        fill:`url(#${id}-${vertical?'warp':'weft'})`},weave);
+      for(const offset of [1.7,3.3,4.9,6.5]) {
+        svgElement('path',{
+          d:vertical?`M${x+offset} ${y+.7}v6.6`:`M${x+.7} ${y+offset}h6.6`,
+          stroke:vertical?'#bdc8c6':'#91a6ab','stroke-width':.36,opacity:vertical?.24:.18,
+        },weave);
+      }
+    }
+    svgElement('rect',{width:240,height:240,fill:`url(#${id}-weave)`},pattern);
+    gradient(defs,'linearGradient',`${id}-resin`,{x1:'.05',y1:'.1',x2:'.95',y2:'.8'},
+      [[0,'#e3efec',0],[.24,'#e3efec',.02],[.42,'#e3efec',.18],
+       [.55,'#e3efec',.05],[.72,'#e3efec',0],[1,'#031119',.12]]);
+    svgElement('rect',{width:240,height:240,fill:`url(#${id}-resin)`},pattern);
+  } else if (kind === 'galaxy') {
+    // Retain the original two-nebula composition; emphasize color and starlight.
+    gradient(defs,'radialGradient',`${id}-cloud`,{},[[0,'#d77cff',.83],[.35,'#ad59ed',.56],[.65,'#8452d9',.25],[1,'#8452d9',0]]);
+    svgElement('ellipse',{cx:72,cy:106,rx:110,ry:51,fill:`url(#${id}-cloud)`,transform:'rotate(-35 72 106)'},pattern);
+    gradient(defs,'radialGradient',`${id}-blue`,{},[[0,'#70d4ff',.68],[.4,'#4aabf0',.35],[1,'#4aabf0',0]]);
+    svgElement('ellipse',{cx:150,cy:64,rx:72,ry:65,fill:`url(#${id}-blue)`},pattern);
+    gradient(defs,'radialGradient',`${id}-starlight`,{},[[0,'#eef8ff',.6],[.25,'#d0e6ff',.2],[1,'#bdd9ff',0]]);
+    for(let i=0;i<84;i++) {
+      const cx=(i*37.13)%220,cy=(i*i*11.79)%220,bright=i%10===0;
+      if(bright) svgElement('circle',{cx,cy,r:5.5,fill:`url(#${id}-starlight)`},pattern);
+      svgElement('circle',{
+        cx,cy,r:bright?1.85:.75+(i%3)*.22,
+        fill:i%4?'#fff5e5':'#cdefff',opacity:.64+(i%4)*.11,
+      },pattern);
+    }
+    svgElement('path',{d:'M156 164h14m-7-7v14M44 40h11m-5.5-5.5v11M177 72h9m-4.5-4.5v9',stroke:'#fff2ce','stroke-width':1,opacity:.95},pattern);
+  } else if (kind === 'terrazzo') {
+    const colors=['#a47d73','#789b91','#d3a963','#a9a1b8','#e0b2a4'];
+    for(let i=0;i<24;i++) {
+      const x=(i*29.17)%80,y=(i*i*13.31)%80,s=3+(i%4)*1.4;
+      svgElement('path',{d:`M${x} ${y}l${s} ${s*.4} ${-s*.3} ${s} ${-s*.9} ${-s*.3}Z`,fill:colors[i%colors.length],opacity:.75},pattern);
+    }
+  } else if (kind === 'seeds') {
+    for(const [cx,cy,angle] of [[13,13,-20],[39,39,25]]) svgElement('ellipse',{cx,cy,rx:1.5,ry:3.2,fill:'#824248',opacity:.75,transform:`rotate(${angle} ${cx} ${cy})`},pattern);
+  } else if (kind === 'blueprint') {
+    for(let p=0;p<=80;p+=10) svgElement('path',{d:`M${p} 0v80M0 ${p}h80`,stroke:'#d0eeff','stroke-width':p%40===0?.7:.35,opacity:p%40===0?.37:.18},pattern);
+    svgElement('circle',{cx:40,cy:40,r:21,fill:'none',stroke:'#dbf3ff','stroke-width':.6,opacity:.36},pattern);
+    svgElement('path',{d:'M10 10h12m-6-6v12M60 63h12m-6-6v12',stroke:'#dbf3ff','stroke-width':.8,opacity:.55},pattern);
+  }
+  return pattern;
+}
+
+// Paints one material over the avatar and returns how to light and remove it.
+// The skin module masks the eyelids beforehand, so they already cut the eyes.
+export function applyMaterial(avatar, name) {
+  const skin = skins[name];
+  const root = avatar.shadowRoot;
+  const defs = root.querySelector('svg defs');
+  const head = root.getElementById('head');
+  const originalDefs = new Set(defs.children);
+  const originalFill = head.getAttribute('fill');
+  const originalOpacity = head.getAttribute('fill-opacity');
+  const properties = ['--material-eye', '--material-eye-right', '--material-eye-relief', '--material-separate-eye-relief', '--material-antenna', '--material-antenna-rim'];
+  const originalProperties = properties.map(key => [key, avatar.style.getPropertyValue(key)]);
+  const id = `material-${name}`;
+  const fill = suffix => `url(#${id}-${suffix})`;
+
+  let eyeShadowOffset;
+  if (skin.raisedEyes) {
+    // The workshop tints the porcelain relief with each design's eye color.
+    // Keep that paint in the public renderer as well as the authoring tool.
+    const eyeColor = skin.simpleLayers ? layerDefaults(name).eyeColor : '#ffffff';
+    const tintEye = original => '#' + [1,3,5].map(offset =>
+      Math.round(parseInt(original.slice(offset,offset+2),16) * parseInt(eyeColor.slice(offset,offset+2),16) / 255).toString(16).padStart(2,'0')
+    ).join('');
+    gradient(defs, 'radialGradient', `${id}-eye-porcelain`, {cx:'.32',cy:'.22',r:'.88'},
+      [[0,tintEye('#ffffff')],[.66,tintEye('#f2f3f8')],[.88,tintEye('#e3e8f1')],[1,tintEye('#b5c4d9')]]);
+    const relief = svgElement('filter', {id:`${id}-eye-relief`,x:'-60%',y:'-60%',width:'240%',height:'250%','color-interpolation-filters':'sRGB'}, defs);
+    svgElement('feGaussianBlur', {in:'SourceAlpha',stdDeviation:4,result:'soft-shadow'}, relief);
+    eyeShadowOffset = svgElement('feOffset', {in:'soft-shadow',dx:5,dy:8,result:'offset-shadow'}, relief);
+    svgElement('feFlood', {'flood-color':skin.eyeShadow || (name==='blueglaze'?'#102674':'#53759f'),'flood-opacity':.34,result:'shadow-color'}, relief);
+    svgElement('feComposite', {in:'shadow-color',in2:'offset-shadow',operator:'in',result:'shadow'}, relief);
+    svgElement('feOffset', {in:'SourceAlpha',dx:1,dy:2,result:'raised-edge'}, relief);
+    svgElement('feFlood', {'flood-color':tintEye('#a9bad1'),result:'edge-color'}, relief);
+    svgElement('feComposite', {in:'edge-color',in2:'raised-edge',operator:'in',result:'edge'}, relief);
+    const merge = svgElement('feMerge', {}, relief);
+    for (const source of ['shadow','edge','SourceGraphic']) svgElement('feMergeNode', {in:source}, merge);
+  }
+
+  const linear = name === 'aurora' || skin.linear;
+  const base = gradient(defs, linear ? 'linearGradient' : 'radialGradient', `${id}-base`,
+    linear
+      ? { x1: '.05', y1: '.05', x2: '.85', y2: '.98' }
+      : { cx: '.32', cy: '.17', r: '.95' },
+      skin.simpleLayers ? [[0,skin.darkColor],[1,skin.darkColor]] : skin.base.map((color, index) => [index / (skin.base.length - 1), color]));
+  const specular = gradient(defs, 'radialGradient', `${id}-shine`, { cx: '.30', cy: '.12', r: '.70' },
+    [[0, '#fff', skin.shine], [.23, '#fff', skin.shine * .30], [.65, '#fff', .035], [1, '#fff', 0]]);
+  const volume = gradient(defs, 'radialGradient', `${id}-volume`, { cx: '.43', cy: '.30', r: '.76' },
+    [[0, '#091126', 0], [.58, '#091126', 0], [.82, '#091126', skin.shade * .27], [1, '#091126', skin.shade]]);
+  const rim = gradient(defs, 'linearGradient', `${id}-rim`, { x1: '0', y1: '0', x2: '1', y2: '1' },
+    [[0, '#fff', .95], [.28, skin.rim, .60], [.52, skin.rim, .06], [.82, skin.rim, .13], [1, skin.rim, .65]]);
+  const edge = gradient(defs, 'radialGradient', `${id}-edge`, { cx: '.88', cy: '.83', r: '.55' },
+    [[0, skin.rim, .25], [.65, skin.rim, .035], [1, skin.rim, 0]]);
+  const antenna = gradient(defs, 'radialGradient', `${id}-antenna`, { cx: '.28', cy: '.20', r: '.85' },
+    [[0, skin.antenna[0]], [.43, skin.antenna[1]], [1, skin.antenna[2]]]);
+  if (skin.pattern) texture(defs, `${id}-texture`, skin.pattern);
+
+  const layers = svgElement('g', { 'pointer-events': 'none', 'aria-hidden': 'true' });
+  head.after(layers);
+  const shape = { href: '#headShape', transform: head.getAttribute('transform') };
+  if (skin.pattern) svgElement('use', { ...shape, fill: fill('texture') }, layers);
+  if (!skin.simpleLayers) {
+  if (skin.translucent) {
+    gradient(defs, 'linearGradient', `${id}-glass`, { x1: '0', y1: '0', x2: '.6', y2: '1' },
+      [[0, '#fff', .6], [.14, '#fff', .03], [.77, '#fff', .02], [1, skin.glassTint || '#c5fff2', .3]]);
+    svgElement('use', { ...shape, fill: fill('glass'), stroke: skin.glassRim || '#d6fff5', 'stroke-width': 5, 'stroke-opacity': skin.glassEdgeOpacity ?? .25 }, layers);
+  }
+  svgElement('use', { ...shape, fill: fill('shine') }, layers);
+  svgElement('use', { ...shape, fill: fill('volume') }, layers);
+  svgElement('use', { ...shape, fill: fill('edge') }, layers);
+  svgElement('use', { ...shape, fill: 'none', stroke: fill('rim'), 'stroke-width': 1.25, opacity: skin.rimOpacity ?? (skin.matte ? .3 : 1) }, layers);
+  }
+  if(skin.stitched) svgElement('use',{href:'#headShape',transform:'translate(18 18) scale(.85)',fill:'none',stroke:'#ead09d','stroke-width':3,'stroke-dasharray':'6 6','stroke-linecap':'round',opacity:.9},layers);
+  if(skin.edgeColor) svgElement('use',{...shape,fill:'none',stroke:skin.edgeColor,'stroke-width':7,opacity:.9},layers);
+
+  // Love intentionally overlaps the two animated eyes into one heart. Paint
+  // that union once: independent porcelain gradients and drop shadows otherwise
+  // leave a seam and make one half look stacked on top of the other.
+  const eyeParent = root.getElementById('leftEye').parentElement;
+  const originalEyeOpacity = eyeParent.style.opacity;
+  let mergedSurface;
+  if (skin.raisedEyes) {
+    const silhouette = svgElement('mask', {
+      id: `${id}-joined-eyes`, maskUnits: 'userSpaceOnUse', maskContentUnits: 'userSpaceOnUse',
+      x: 0, y: 0, width: 240, height: 240, 'mask-type': 'alpha',
+    }, defs);
+    for (const side of ['left', 'right']) svgElement('use', { href: `#${side}Eye` }, silhouette);
+    mergedSurface = svgElement('g', { id: `${id}-joined-eye-surface`, 'pointer-events': 'none', 'aria-hidden': 'true',
+      'clip-path': eyeParent.getAttribute('clip-path') || 'none' });
+    eyeParent.after(mergedSurface);
+    const reliefSurface = svgElement('g', { style: 'filter:var(--material-eye-relief,none)' }, mergedSurface);
+    svgElement('rect', { x: 0, y: 0, width: 240, height: 240,
+      fill: 'var(--material-eye,#fff)', mask: `url(#${id}-joined-eyes)` }, reliefSurface);
+  }
+  function mergeEyes(merged) {
+    if (!mergedSurface) return;
+    // Opacity on the parent hides the original paint without hiding the eye
+    // nodes referenced by the union mask. Their live transforms still animate.
+    eyeParent.style.opacity = merged ? '0' : originalEyeOpacity;
+    mergedSurface.style.display = merged ? '' : 'none';
+    if (merged) avatar.style.setProperty('--material-separate-eye-relief', 'none');
+    else avatar.style.removeProperty('--material-separate-eye-relief');
+  }
+  const onFaceState = event => mergeEyes(event.detail?.state === 'love');
+  const onActionState = event => {
+    if (event.detail?.action === 'love' && event.detail.phase !== 'start') mergeEyes(false);
+  };
+  if (mergedSurface) {
+    avatar.addEventListener('face-state', onFaceState);
+    avatar.addEventListener('action-state', onActionState);
+    mergeEyes(Boolean(avatar._loveFx));
+  }
+
+  const style = document.createElement('style');
+  style.textContent = `
+    #leftBase,#rightBase,#leftInputBase,#rightInputBase{fill:var(--material-eye,#fff)}
+    #rightBase,#rightInputBase{fill:var(--material-eye-right,var(--material-eye,#fff))}
+    #antennaDot{fill:var(--material-antenna);stroke:var(--material-antenna-rim);stroke-width:.7px}
+    ${skin.raisedEyes ? '#leftEye,#rightEye{filter:var(--material-separate-eye-relief,var(--material-eye-relief,none))}' : ''}
+  `;
+  root.append(style);
+  const addedDefs = [...defs.children].filter(node => !originalDefs.has(node));
+  let disposed = false;
+
+  const material = {
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      avatar.removeEventListener('face-state', onFaceState);
+      avatar.removeEventListener('action-state', onActionState);
+      eyeParent.style.opacity = originalEyeOpacity;
+      mergedSurface?.remove();
+      for (const node of addedDefs) node.remove();
+      layers.remove();
+      style.remove();
+      if (originalFill === null) head.removeAttribute('fill');
+      else head.setAttribute('fill', originalFill);
+      if (originalOpacity === null) head.removeAttribute('fill-opacity');
+      else head.setAttribute('fill-opacity', originalOpacity);
+      for (const [key, value] of originalProperties) {
+        if (value) avatar.style.setProperty(key, value);
+        else avatar.style.removeProperty(key);
+      }
+    },
+    // Only these coordinates are driven by light(), not the saved material.
+    lightKeys: [
+      ...(!linear ? ['base:cx','base:cy'] : skin.linear ? ['base:x1','base:x2'] : []),
+      'shine:cx','shine:cy','volume:cx','volume:cy','edge:cx','edge:cy',
+      'rim:x1','rim:x2','antenna:cx','antenna:cy',
+    ],
+    light(x, y) {
+      if (eyeShadowOffset) {
+        eyeShadowOffset.setAttribute('dx', -x * 8);
+        eyeShadowOffset.setAttribute('dy', 5 - y * 6);
+      }
+      const cx = .5 + x * .30;
+      const cy = .30 + y * .17;
+      if (!linear) {
+        base.setAttribute('cx', cx);
+        base.setAttribute('cy', cy);
+      } else if (skin.linear) {
+        base.setAttribute('x1', .1 + x * .2);
+        base.setAttribute('x2', .9 + x * .2);
+      }
+      specular.setAttribute('cx', cx);
+      specular.setAttribute('cy', cy - .10);
+      volume.setAttribute('cx', .5 + x * .12);
+      volume.setAttribute('cy', .35 + y * .08);
+      edge.setAttribute('cx', .5 - x * .42);
+      edge.setAttribute('cy', .75 - y * .12);
+      rim.setAttribute('x1', .5 + x * .5);
+      rim.setAttribute('x2', .5 - x * .5);
+      antenna.setAttribute('cx', cx);
+      antenna.setAttribute('cy', Math.max(.1, cy));
+    },
+  };
+  head.setAttribute('fill', fill('base'));
+  head.setAttribute('fill-opacity', skin.translucent ? (skin.bodyOpacity ?? .58) : 1);
+  avatar.style.setProperty('--material-eye', skin.raisedEyes ? fill('eye-porcelain') : skin.eye);
+  avatar.style.setProperty('--material-eye-right', skin.raisedEyes ? fill('eye-porcelain') : skin.eyeRight || skin.eye);
+  if (skin.raisedEyes) avatar.style.setProperty('--material-eye-relief', fill('eye-relief'));
+  avatar.style.setProperty('--material-antenna', fill('antenna'));
+  avatar.style.setProperty('--material-antenna-rim', skin.rim);
+  material.light(-.5, -.5);
+  return material;
+}
+
+
+export { skins };

package/src/skins/metal-tint.js

@@ -0,0 +1,11 @@
+// Change hue while keeping each silver color's HSL lightness. White highlights
+// stay white; reflection positions, stop offsets and opacity are untouched.
+export function metalTint(color,family) {
+  const channels = [1,3,5].map(offset => parseInt(color.slice(offset,offset+2),16)/255);
+  const lightness = (Math.max(...channels)+Math.min(...channels))/2;
+  const hue = family === 'gold' ? 44/60 : 22/60;
+  const saturation = family === 'gold' ? .58 : .48;
+  const c = (1-Math.abs(2*lightness-1))*saturation;
+  const x = c*(1-Math.abs(hue%2-1)), m = lightness-c/2;
+  return '#' + [c,x,0].map(value => Math.round((value+m)*255).toString(16).padStart(2,'0')).join('');
+}

package/src/skins/more-materials.js

@@ -0,0 +1,69 @@
+// Native SVG swatches: no image files, external libraries or remote requests.
+const EXTRA = new Set(['cork', 'pearl', 'hologram', 'ice', 'soap', 'leather', 'lace', 'bamboo', 'wave', 'origami', 'circuit', 'topo']);
+
+export function extraTexture(defs, id, kind, el, gradient) {
+  if (!EXTRA.has(kind)) return null;
+  const size = {pearl:240,hologram:120,ice:240,soap:240,copper:100,leather:24,cork:64,knit:18,bamboo:32,origami:120,stained:80,circuit:80,koi:200,sakura:72,lace:64,checker:48,tiger:120,camo:120,topo:160,wave:48,moon:160}[kind];
+  const p = el('pattern', {id,width:size,height:size,patternUnits:'userSpaceOnUse'}, defs);
+  const path = (d,stroke,width=1,opacity=1,fill='none',parent=p) => el('path',{d,stroke,'stroke-width':width,opacity,fill,'stroke-linejoin':'round','stroke-linecap':'round'},parent);
+  const circle = (cx,cy,r,fill,opacity=1,parent=p) => el('circle',{cx,cy,r,fill,opacity},parent);
+  if (kind === 'pearl') {
+    for(let i=0;i<20;i++) path(`M-20 ${i*15}Q90 ${i*15-100} 260 ${i*15-22}`,i%2?'#d5c1e2':'#fff9e4',2,.35);
+  } else if (kind === 'hologram') {
+    const colors=['#fff7bc','#96ffe6','#d9bcff','#ffb8de'];
+    for(let i=0;i<4;i++) path(`M${i*30-60} 0l60 120h18L${i*30-42} 0Z`,'none',0,.28,colors[i]);
+    for(const [x,y] of [[25,26],[91,83]]) path(`M${x-6} ${y}h12m-6-6v12`,'#fff',1,.85);
+  } else if (kind === 'ice') {
+    const facets=['M0 0L110 30 42 119Z','M110 30L240 0 195 143Z','M42 119L195 143 121 240Z','M195 143L240 0 240 240Z'];
+    facets.forEach((d,i)=>path(d,'#f3ffff',.8,.18+i*.035,i%2?'#efffff':'#5b9fc2'));
+    path('M110 30L99 80 131 107 121 162M42 119L63 167 50 210','#f4ffff',1.1,.7);
+    for(let i=0;i<22;i++) circle((i*43.7)%240,(i*i*19.3)%240,.8+i%3*.5,'#fff',.35);
+  } else if (kind === 'soap') {
+    ['#efb4e5','#94ddd9','#faf0b4','#b9b1e9'].forEach((c,i)=>{
+      path(`M${25+i*3} ${155-i*5}C${-5+i*3} 80 40 ${20+i*4} ${133+i*3} ${20+i*4}`,c,3,.55);
+      path(`M${210-i*3} 82Q${253-i*4} 190 ${120-i*2} ${213-i*3}`,c,2,.5);
+    });
+    for(const [x,y,r] of [[58,173,9],[181,43,5],[193,168,13]]) el('circle',{cx:x,cy:y,r,fill:'none',stroke:'#fff','stroke-width':1.4,opacity:.5},p);
+  } else if (kind === 'leather') {
+    path('M0 3L7 1 12 6 22 3 24 9M0 16L8 11 16 15 24 12M7 1L8 11 4 24M16 15L19 24','#402719',.6,.22);
+    path('M1 4L7 3 11 7M9 12L15 16 23 13','#f0d6ad',.5,.25);
+  } else if (kind === 'cork') {
+    for(let i=0;i<65;i++) {
+      const x=(i*23.7)%64,y=(i*i*11.3)%64,r=1+i%3;
+      el('rect',{x,y,width:r*1.7,height:r,rx:.5,fill:['#76542e','#fff0c6','#aa743a'][i%3],opacity:.3,transform:`rotate(${i*31} ${x} ${y})`},p);
+    }
+  } else if (kind === 'bamboo') {
+    for(let i=-2;i<4;i++) {
+      path(`M${i*16} -16l64 64`,'#796335',6,.3);
+      path(`M${i*16+2} -16l64 64`,'#f1dfad',3,.65);
+      path(`M${i*16} 48l64-64`,'#c6a76c',6,.8);
+      path(`M${i*16+2} 48l64-64`,'#f9eac0',1,.55);
+    }
+  } else if (kind === 'origami' || kind === 'stained') {
+    const s=size, m=s*.43;
+    const shapes=[`M0 0H${s}L${m} ${m}Z`,`M${s} 0V${s}L${m} ${m}Z`,`M${s} ${s}H0L${m} ${m}Z`,`M0 ${s}V0L${m} ${m}Z`];
+    const colors=kind==='stained'?['#c29a57','#508e8d','#9279a7','#698bb0']:['#fff5dc','#8ca6ae','#b5b7d5','#eab69d'];
+    shapes.forEach((d,i)=>path(d,kind==='stained'?'#303951':'#fff7ef',kind==='stained'?2.7:.7,kind==='stained'?.85:.6,colors[i]));
+  } else if (kind === 'circuit') {
+    for(const d of ['M0 12H22L38 28H80','M8 80V53L24 37V0','M44 80V57L63 38H80','M52 0V12L68 28']) path(d,'#d1bc73',1.3,.7);
+    for(const [x,y] of [[38,28],[24,37],[44,57],[68,28]]) {
+      circle(x,y,3,'#dac98c',.9);circle(x,y,1.3,'#285348');
+    }
+    el('rect',{x:47,y:7,width:14,height:10,rx:2,fill:'#102f2c',stroke:'#819d76','stroke-width':.7},p);
+  } else if (kind === 'lace') {
+    for(const [x,y] of [[0,0],[32,32],[64,0],[0,64],[64,64]]) {
+      const g=el('g',{transform:`translate(${x} ${y})`},p);
+      for(let i=0;i<8;i++) el('ellipse',{cx:0,cy:10,rx:4,ry:10,fill:'none',stroke:'#eee1ce','stroke-width':.7,opacity:.65,transform:`rotate(${i*45})`},g);
+      circle(0,0,2,'#eee1ce',.7,g);
+      for(let i=0;i<12;i++) circle(Math.cos(i*Math.PI/6)*24,Math.sin(i*Math.PI/6)*24,.7,'#eee1ce',.6,g);
+    }
+  } else if (kind === 'topo') {
+    for(let i=0;i<11;i++) {
+      const r=9+i*7;
+      path(`M${80-r} 80C${80-r*1.3} ${80-r} ${80+r*.6} ${80-r*1.4} ${80+r} ${80-r*.4}S${80+r*.4} ${80+r*1.4} ${80-r*.4} ${80+r}S${80-r} 95 ${80-r} 80Z`,'#d8edc9',i%3===0?1.2:.6,.48);
+    }
+  } else if (kind === 'wave') {
+    for(const [x,y] of [[0,24],[48,24],[24,48],[0,72],[48,72]]) for(const r of [6,12,18,24]) path(`M${x-r} ${y}a${r} ${r} 0 0 1 ${r*2} 0`,'#e7e7cf',1,.55);
+  }
+  return p;
+}