iching-mandala-svg

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