TeeSkinRenderer

HTML + Auto-init Declarative setup via data attributes

<link href="tee-skin-renderer.css" rel="stylesheet">
<script src="tee-skin-renderer.umd.js"></script>

<div class="tee"
     data-skin="https://skins.ddnet.org/skin/community/pinky.png"
     data-color-body="5498880"
     data-color-feet="3079936"
     data-eyes="happy"
     data-follow-mouse="true">
</div>

<script>
  // Auto-initialize all .tee elements on the page
  TeeSkinRenderer.init();
</script>

Programmatic Create a tee with JS and append to DOM

const container = await TeeSkinRenderer.createAsync({
  skinUrl: 'https://skins.ddnet.org/skin/community/pinky.png',
  colorBody: 5498880,
  colorFeet: 3079936,
  eyes: 'happy',
  followMouse: true,
});

document.body.appendChild(container);

Dynamic Properties Change skin, colors, eyes and direction at runtime

const container = await TeeSkinRenderer.createAsync({
  skinUrl: 'https://skins.ddnet.org/skin/community/default.png',
});

// Access the renderer via container.tee
const tee = container.tee;

tee.skinUrl   = 'https://skins.ddnet.org/skin/community/pinky.png';
tee.colorBody = 16768387;
tee.colorFeet = 16777215;
tee.useCustomColor = true;
tee.eyes      = 'surprise';
tee.direction = 'left';
tee.fat       = true;

Events React to skin loading and rendering

const container = await TeeSkinRenderer.createAsync({
  skinUrl: 'https://skins.ddnet.org/skin/community/pinky.png',
  colorBody: 53063,
  colorFeet: 524159,
});

container.tee.addEventListener('tee:skin-loaded', (e) => {
  const { skin, success } = e.detail.payload;
  console.log(`Skin ${skin}: ${success ? 'loaded' : 'failed'}`);
});

container.tee.addEventListener('tee:rendered', (e) => {
  console.log('Tee rendered!');
});

Render to Canvas Export tee as a pixel-perfect canvas image

const container = await TeeSkinRenderer.createAsync({
  skinUrl: 'https://skins.ddnet.org/skin/community/pinky.png',
  colorBody: 5498880,
  colorFeet: 3079936,
});

const canvas = document.createElement('canvas');
container.tee.renderToCanvas(canvas, {
  size: 128,
  eyes: 'happy',
  direction: 'right',
});

document.body.appendChild(canvas);

Sizing Control tee size with CSS font-size (base = 96em at 1px)

/* Base tee is 96em × 96em.
   At font-size: 1px → 96px.
   Scale by changing font-size: */

.tee-xs  { font-size: 0.35px; }  /* 34px  */
.tee-sm  { font-size: 0.55px; }  /* 53px  */
.tee-md  { font-size: 1px;    }  /* 96px  (default) */
.tee-lg  { font-size: 1.6px;  }  /* 154px */
.tee-xl  { font-size: 2.2px;  }  /* 211px */

/* Or set it inline: */
<div class="tee" style="font-size: 1.5px"
     data-skin="..."></div>

/* Or dynamically via JS: */
container.style.fontSize = '2px';

Color Utilities Convert tee integer colors to HSL/RGBA

const { color } = TeeSkinRenderer;

const teeColor = 5498880;

const hsl  = color.convertTeeColorToHsl(teeColor);
// [74.8, 100, 75.1]  = H, S%, L%

const rgba = color.convertTeeColorToRgba(teeColor);
// [127.5, 255, 0, 255]  = R, G, B, A

Eye Gallery All 7 eye types side by side

const eyes = ['normal', 'happy', 'angry', 'pain', 'surprise', 'dead', 'blink'];

for (const eye of eyes) {
  const container = await TeeSkinRenderer.createAsync({
    skinUrl: 'https://skins.ddnet.org/skin/community/pinky.png',
    eyes: eye,
  });
  gallery.appendChild(container);
}

Code Examples UMD