# PixelGlyph

`PixelGlyph` is how a card gets a picture without an image file. A glyph is nine strings of nine characters: `x` for a lit pixel, `o` for a half-lit one, a dot for nothing. It is drawn in one colour, the card's tier, so the same glyph reads as common or legendary by colour alone.

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/components/pixel-glyph/
>
> The twenty five that ship, by name.

## Usage

```tsx
import { GLYPHS, PixelGlyph } from "@react-cards-opening/ui";

<PixelGlyph art={GLYPHS.dragon} colour="#f2cc60" cell={14} />
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `art` | `PixelArt` | Nine strings of nine characters. |
| `colour` | `string` | Lit pixels wear it. Half-lit ones wear half of it. |
| `cell?` | `number` | The size of one pixel. 11 by default: 14 on a card, 3 in a badge. |

## Draw your own

```ts
import type { PixelArt } from "@react-cards-opening/ui";

export const heart: PixelArt = [
  ".........",
  ".xx...xx.",
  "xxxx.xxxx",
  "xxxxxxxxx",
  "xxxxxxxxx",
  ".xxxxxxx.",
  "..xxxxx..",
  "...xxx...",
  "....x....",
];
```

Use `o` for shading: the inside of a shape, a shadow under it. Nine by nine is small enough that every pixel is a decision, which is the charm of it.

## Or use a picture

Nothing requires glyphs. A card's face is a slot: put an image, an SVG or a 3D canvas in it with `renderFace`. See [Custom card face](https://bettertyped.github.io/react-cards-opening/docs/guides/custom-card-face/).

## Related

- [Card](https://bettertyped.github.io/react-cards-opening/docs/components/card/)
- [Custom card face](https://bettertyped.github.io/react-cards-opening/docs/guides/custom-card-face/)
- [Theming](https://bettertyped.github.io/react-cards-opening/docs/theming/)
- [Components](https://bettertyped.github.io/react-cards-opening/docs/components/)

Source: https://bettertyped.github.io/react-cards-opening/docs/components/pixel-glyph/