---
name: iching-mandala-svg
description: I Ching mandala SVG component — concentric rings of hexagrams with bottom-toward-center orientation
version: 1
---

# I Ching Mandala SVG

## Task
Create a clean SVG mandala of the I Ching system with concentric rings, all hexagrams/text oriented with bottom toward center and top toward outside.

## Ring Structure (from center outward)
1. **Yin-Yang** — center symbol
2. **4 Bigrams** (2-line figures) — inner ring
3. **8 Trigrams** (3-line figures) — next ring
4. **16 Tetragrams** (4-line figures) — next ring  
5. **64 Hexagrams** (6-line figures) — outer ring

## Orientation Rules (per Alex's request)
- ALL rings: **bottom of each figure faces toward the center**, top faces outward
- This differs from the reference image where the outer ring had bottoms facing the viewer (upright)
- Gate/line numbers along the outside should also follow bottom-toward-center orientation (rotated text)

## Reference Image
Cached at: `/home/avalon/.hermes/image_cache/img_9a35e16cc8b1.jpg`

## Existing Code
- `RaveMandala.tsx` exists in the HD Prism codebase with gate ordering logic
- The mandala gate order follows the I Ching sequence used in Human Design

## Technical Notes
- SVG with rotation transforms: each figure rotated so its baseline arc is tangent to its ring
- Text rotated 180° on bottom half of circle to remain readable
- Use CSS transforms or SVG `transform="rotate(angle, cx, cy)"` for each element