# Toto · 8-bit pixel art

[Español](README.es.md) · [Main collection](../../../README.md) · [Preview](preview.html)

Eleven alternative illustrations: Toto’s ten poses and a new pose of Toto peeking through the official Total.js logo. All have transparent backgrounds and preserve his European red fox features.

The collection has its own [JSON catalog](manifest.json). Original PNG files are 1254 × 1254; lossless WebP exports are 800 and 480 pixels wide and use nearest-neighbor scaling.

| ID | Pose | Preview | Files |
| --- | --- | --- | --- |
| `signature` | Signature | <img src="webp/toto-signature-480.webp" width="128" height="128" alt="Pixel art: Toto smiling and winking." style="image-rendering:pixelated"> | [PNG](toto-signature.png) · [WebP 800](webp/toto-signature.webp) · [WebP 480](webp/toto-signature-480.webp) |
| `welcome` | Welcome | <img src="webp/toto-welcome-480.webp" width="128" height="128" alt="Pixel art: Toto waves with a raised paw." style="image-rendering:pixelated"> | [PNG](toto-welcome.png) · [WebP 800](webp/toto-welcome.webp) · [WebP 480](webp/toto-welcome-480.webp) |
| `thinking` | Thinking | <img src="webp/toto-thinking-480.webp" width="128" height="128" alt="Pixel art: Toto tilts his head and touches his cheek thoughtfully." style="image-rendering:pixelated"> | [PNG](toto-thinking.png) · [WebP 800](webp/toto-thinking.webp) · [WebP 480](webp/toto-thinking-480.webp) |
| `coding` | Coding | <img src="webp/toto-coding-480.webp" width="128" height="128" alt="Pixel art: Toto works on a dark laptop." style="image-rendering:pixelated"> | [PNG](toto-coding.png) · [WebP 800](webp/toto-coding.webp) · [WebP 480](webp/toto-coding-480.webp) |
| `celebrate` | Celebrate | <img src="webp/toto-celebrate-480.webp" width="128" height="128" alt="Pixel art: Toto celebrates with raised paws and a smile." style="image-rendering:pixelated"> | [PNG](toto-celebrate.png) · [WebP 800](webp/toto-celebrate.webp) · [WebP 480](webp/toto-celebrate-480.webp) |
| `error` | Something went wrong | <img src="webp/toto-error-480.webp" width="128" height="128" alt="Pixel art: Toto scratches his head with a gently puzzled expression." style="image-rendering:pixelated"> | [PNG](toto-error.png) · [WebP 800](webp/toto-error.webp) · [WebP 480](webp/toto-error-480.webp) |
| `production` | Production | <img src="webp/toto-production-480.webp" width="128" height="128" alt="Pixel art: Toto rests a paw on a small server with a terminal." style="image-rendering:pixelated"> | [PNG](toto-production.png) · [WebP 800](webp/toto-production.webp) · [WebP 480](webp/toto-production-480.webp) |
| `email` | Email | <img src="webp/toto-email-480.webp" width="128" height="128" alt="Pixel art: Toto holds an envelope between his paws." style="image-rendering:pixelated"> | [PNG](toto-email.png) · [WebP 800](webp/toto-email.webp) · [WebP 480](webp/toto-email-480.webp) |
| `totaljs` | Total.js | <img src="webp/toto-totaljs-480.webp" width="128" height="128" alt="Pixel art: Toto nuzzles the Total.js symbol with his eyes closed and an affectionate smile." style="image-rendering:pixelated"> | [PNG](toto-totaljs.png) · [WebP 800](webp/toto-totaljs.webp) · [WebP 480](webp/toto-totaljs-480.webp) |
| `ia` | Artificial intelligence | <img src="webp/toto-ia-480.webp" width="128" height="128" alt="Pixel art: Toto plays with a small AI robot and high-fives its hand." style="image-rendering:pixelated"> | [PNG](toto-ia.png) · [WebP 800](webp/toto-ia.webp) · [WebP 480](webp/toto-ia-480.webp) |
| `hexagonal` | Peeking through Total.js | <img src="webp/toto-hexagonal-480.webp" width="128" height="128" alt="Pixel art: Toto peeks through the official Total.js logo, with his head and ears emerging and both paws resting on its inner rim." style="image-rendering:pixelated"> | [PNG](toto-hexagonal.png) · [WebP 800](webp/toto-hexagonal.webp) · [WebP 480](webp/toto-hexagonal-480.webp) |

## Use

Preserve the aspect ratio and transparent margin. Use `image-rendering: pixelated` to keep the pixels crisp. “8-bit” describes the retro aesthetic; these files are transparent RGBA PNGs, not indexed images with a technical eight-bit limit.

```html
<img src="toto-hexagonal.png" width="160" height="160"
     alt="Peeking through Total.js in pixel art."
     style="image-rendering:pixelated;object-fit:contain">
```

This alternative collection is stored separately; the main gallery keeps the 3D collection. The `totaljs` pose shows Toto with the green Total.js symbol; `hexagonal` shows Toto leaning out through the official logo; his anatomy remains that of a fox.

The repository [license](../../../LICENSE.md) and [identity guide](../../../docs/identity.md) apply. Apps, sites, services and Total.js content showing Toto must include a visible “Built with Total.js” notice and a link to [totaljs.com](https://www.totaljs.com) or [totaljs.es](https://www.totaljs.es), under the license conditions.

## Export

From the repository root, with `ffmpeg` and `cwebp` available:

```sh
node tools/pixel.cjs
```

© 2026 Spanish Total.js.

Toto is the official mascot of the entire Total.js community; the identity and artwork are credited to Spanish Total.js.