# Generating 400+ Magic: The Gathering Set Symbols as React Components

## **The Problem**

The collectible card game, Magic: The Gathering (MTG), has published over 50,000 cards spanning 20 years. Cards are published in themed sets and include a unique symbol — a small icon that appears on every card marking the set it was published in. These symbols change appearance based on a card's rarity: common cards get are a simple black-and-white icon, while cards that are uncommon, rare, or "mythic rare" receive metallic gradient fills in silver, gold, and orange respectively.

I wanted all of these symbols rendered natively in my collection management app — not as raster images that blur at different sizes, but as crisp, scalable vector components that could respond to rarity dynamically or be used in creative ways with CSS (background images, opaque overlays, animations, etc). There are over 400 unique set symbols, many with intricate interior details, and some composed of multiple overlapping layers. No existing library offered what I needed for these ready-to-use React components.

So I built a data pipeline to generate them myself!

---

## **The Approach**

The symbols originate from [Keyrune](https://github.com/andrewgioia/Keyrune), an open-source icon font that maps each MTG set symbol to a Unicode codepoint. My pipeline takes the raw font data and, through a series of automated steps, produces self-contained React TSX components — one per set — each with built-in rarity gradient support.

### **From Font Glyphs to Classified SVG Paths**

The first stage exports every glyph from the Keyrune TrueType font as individual SVG files using FontForge. The conversion script then parses a companion CSS file (also from Keyrune) to map each Unicode codepoint back to its corresponding set code (e.g., `MH3` for Modern Horizons 3).

```bash
fontforge -lang=ff -c '
Open("keyrune.ttf");
SelectAll();
foreach
  codepoint = GlyphInfo("Unicode");
  if (codepoint != -1)
    Export("glyph_svgs/U" + codepoint + ".svg");
  endif
endloop
'
```

<br />

Each SVG is decomposed into its constituent subpaths, and here's where things get interesting: the script uses the **Shoelace formula** to compute the signed area of each subpath. Positive area means the path is a filled shape; negative area means it's a hole — an interior cutout that should reveal whatever is behind it. This classification is critical because holes need to be rendered differently depending on a variety of factors.

```typescript
// Shoelace formula — positive area = filled shape, negative = hole
let area = 0;
for (let i = 0; i < points.length; i++) {
  const [x1, y1] = points[i];
  const [x2, y2] = points[(i + 1) % points.length];
  area += (x1 * y2 - x2 * y1);
}
return area / 2;
```

### **Seven Rendering Modes**

Not every set symbol follows the same visual rules. Through careful study of the official card renders, I identified and implemented seven distinct rendering modes:

<table>
  <thead><tr><th>Mode</th><th>Common Rarity</th><th>Non-Common Rarities</th></tr></thead>
  <tbody>
    <tr><td><strong>Default</strong></td><td>Black fill, white border, transparent holes</td><td>Gradient fill, black border, transparent holes</td></tr>
    <tr><td><strong>Gradient-in-Holes</strong></td><td>Black fill, white-filled holes</td><td>Black fill, gradient-filled holes</td></tr>
    <tr><td><strong>Inverted</strong></td><td>Black fill, white-filled holes, white border</td><td>Gradient fill, black-filled holes, black border</td></tr>
    <tr><td><strong>White Holes</strong></td><td>Black fill, white-filled holes, white border</td><td>Gradient fill, white-filled holes, black border</td></tr>
    <tr><td><strong>Always White Border</strong></td><td>Black fill, transparent holes, white border</td><td>Gradient fill, transparent holes, white border</td></tr>
    <tr><td><strong>No Border</strong></td><td>Black fill, no border</td><td>Gradient fill, no border</td></tr>
    <tr><td><strong>Multi-Layer</strong></td><td>Per-layer fill and hole rules composited together</td><td>Per-layer fill and hole rules with gradient support</td></tr>
  </tbody>
</table>

<br />

Each set is mapped to its correct rendering mode, and the generator produces the appropriate JSX structure automatically.

---

### **Multi-Layer Compositing**

Some of the more recent and visually complex set symbols are composed of two or three separate glyphs layered on top of each other. The pipeline handles these by loading each layer's SVG independently, computing a unified bounding box across all layers, and generating a single component that composites them with per-layer fill rules, hole modes, and optional borders. The result is a single `<svg>` element that faithfully reproduces symbols like Innistrad: Midnight Hunt's dual-layer crescent moon or Thunder Junction Commander's three-layer badge.

```typescript
// Each layer can have its own fill, hole mode, and border behavior
"MID": {
  layers: [
    { unicode: 59769, commonFill: "#fff", nonCommonFill: "#000",    holeMode: "transparent" },
    { unicode: 59768, commonFill: "#000", nonCommonFill: "gradient",  holeMode: "transparent" },
  ]
}
```

### **Normalization and Scaling**

Every generated component normalizes its paths into a consistent `1024x1024` coordinate space with uniform padding, ensuring symbols of wildly different original dimensions render at the same visual size. Stroke widths are inversely scaled to compensate, so borders appear consistent regardless of the underlying glyph geometry.

## **Additional Symbol Support**

Beyond set symbols, a companion script handles other MTG iconography — mana symbols, ability icons, and other game-specific glyphs. These follow a simpler pipeline (no rarity gradients or hole classification needed) but use the same SVG-to-React pattern, producing lightweight components with configurable fill colors and consistent `32x32` viewBoxes.

<div className="flex gap-2">
  <img src="/images/projects/glyph-conversion/Forest.png">
  <img src="/images/projects/glyph-conversion/Island.png">
  <img src="/images/projects/glyph-conversion/Mountain.png">
  <img src="/images/projects/glyph-conversion/Plains.png">
  <img src="/images/projects/glyph-conversion/Swamp.png">
  <img src="/images/projects/glyph-conversion/Tap.png">
</div>

---

## **The Result**

The pipeline generates over 500 production-ready React component which are:

- **Fully scalable** — Vector-based, sharp at any size
- **Rarity-aware** — Pass a `rarity` prop and the correct gradient or fill is applied automatically
- **Self-contained** — Each component includes its own gradient definitions, no external CSS or assets required
- **Lightweight** — No runtime SVG parsing, no image loading, no layout shift
- **Consistent** — Uniform coordinate space and stroke scaling across every symbol

```tsx
// Every generated component works like this out of the box
<MH3 rarity="mythic" width={24} height={24} className="bg-white/90" />
<DSK rarity="rare"   width={24} height={24} className="bg-black/50" />
<FDN rarity="common" width={24} height={24} className="transform-gpu transition-transform duration-500 ease-in-out origin-center hover:scale-105 hover:rotate-[360deg]" />
```

<br />

From a single font and CSS file, all the symbols regenerate in seconds — making it trivial to update as new sets are released.

A pipeline that converts Keyrune font glyphs into 500+ Magic: The Gathering React components, with rarity-aware gradients, CSS styling support and consistent SVG scaling.

Font Glyphs to Custom React Components

# Magic: The Gathering Slideshow

This project demonstrates a simple Node.js server. It serves a single highly interactive HTML file, `Slideshow.html`, which animates complex AI generated SVG's behind five Magic: The Gathering characters.

---

## **Features**

### Intro Slide:
  - Welcomes users and explains the purpose of the visualization.
  - Lists the goals: An emotional expression about my family through MTG characters and and abstract visual storytelling.

<div className="flex"><img width="1000" src="/images/cardanimationsample.gif" /></div>

### Character Slides
  - Each slide is dedicated to a specific Magic: The Gathering character, with:
    - Card art (from scryfall.com)
    - Themed animated SVG backgrounds
    - Two text boxes: lore/description and my own personal interpretation
  - Characters featured:
    - Sigarda, Heron's Grace (Selesnya)
    - Baird, Steward of Argive
    - Teysa Karlov (Orzhov)
    - Gyome, Master Chef (Golgari)
    - Aurelia, the Law Above (Boros)

<div className="flex"><img width="1000" src="/images/teysa.webp" /></div>

### Pegboard and Animation Engine
  - A large SVG pegboard is in the Intro slide that animates lines and filling in triangles as the become bound by the lines.
  - This particular animation was inspired by the game, Triangle Takeover, which myself and the intended audience of this presentation played together on Christmas day. 
  - The peg and triangle data were computed programmatically, which was done by providing AI with annotated screenshots.
  - The order in which lines are drawn and the triangles are filled in emulate actually playing. 
  - An array of values represent a player's turn within the game, that array can be modified to produce the results of any game!

<div className="flex gap-3 pl-3 sm:flex-row"><img width="300" src="/images/pegboard.gif" /><img width="300" src="/images/Geometry.webp" /><img width="300" src="/images/AIAttempt.webp" /></div>



<div className="flex"><img width="300" src="/images/controls.webp" />

<span className="p-5">

### Interactive Controls

  - Pressing the "H" key toggles the visibility of a right-side panel with various customizable controls.
  - Controls include animation speeds, transition speeds, positions of static content, and variables for specific animations.
  - Adjustments modify the animation and content real time.
  - The controls are context-sensitive, showing specific options for the slide actively being viewed.
  - Settings can be saved, copied, or imported/exported as JSON for customization and sharing.

### Outro Slide
  - Thanks the viewer and provides dynamic text based on run count.
  - Offers a "Run Again" button to restart the presentation.

### Customization
  - The project structure is simple, making it easy to add new slides, visualizations, or static assets.
  - All slide content, including text, images, and SVG backgrounds, can be edited directly in the HTML file.

</span>

</div>


---

A simple Node.js server. A single highly interactive HTML file which animates complex AI generated SVG's behind five Magic: The Gathering characters.

Magic: The Gathering Slideshow

A breakdown of making an interactive heatmap of my Spotify listening history.

Lucas Morris

Projects