wu-xing.svg raw

   1  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700">
   2    <!-- Black ground — the Tai Chi, the void, the space between -->
   3    <rect width="700" height="700" fill="#000"/>
   4  
   5    <!-- Outer pentagon — generating cycle (shēng) clockwise from top:
   6         Fire → Earth → Metal → Water → Wood → Fire
   7         Grey — the natural flow needs no color, it just turns -->
   8    <polygon points="350,120 569,279 485,536 215,536 131,279"
   9             fill="none" stroke="#444" stroke-width="1.5"/>
  10  
  11    <!-- Pentagram — controlling cycle (kè) — the destructors
  12         Line color = the complement that sits between the two elements:
  13         Fire→Metal = pink (between red and white — the sword forged in fire)
  14         Metal→Wood = grey (between white and green — the invisible cut)
  15         Wood→Earth = purple (between green and yellow — communication as control)
  16         Earth→Water = orange (between yellow and blue — ground containing fear)
  17         Water→Fire = cyan (between blue and red — the bridge that cuts excess) -->
  18    <line x1="350" y1="120" x2="485" y2="536"
  19          stroke="#cc44cc" stroke-width="1.5"/>
  20    <line x1="485" y1="536" x2="131" y2="279"
  21          stroke="#333" stroke-width="1" stroke-dasharray="6,4"/>
  22    <line x1="131" y1="279" x2="569" y2="279"
  23          stroke="#7733cc" stroke-width="1.5"/>
  24    <line x1="569" y1="279" x2="215" y2="536"
  25          stroke="#ee8833" stroke-width="1.5"/>
  26    <line x1="215" y1="536" x2="350" y2="120"
  27          stroke="#33cccc" stroke-width="1.5"/>
  28  
  29    <!-- Inner pentagon (pentagram intersections) -->
  30    <polygon points="402,279 434,377 350,438 266,377 298,279"
  31             fill="none" stroke="#333" stroke-width="0.8"/>
  32  
  33    <!-- Cutting arrowheads — controller color pointing toward target -->
  34    <!-- Fire cuts Metal (red → toward lower-right) -->
  35    <polygon points="434,380 424,367 435,363" fill="#ee3333" opacity="0.85"/>
  36    <!-- Metal cuts Wood (white → toward upper-left) -->
  37    <polygon points="265,376 281,380 274,390" fill="#e8e8e8" opacity="0.85"/>
  38    <!-- Wood cuts Earth (green → toward right) -->
  39    <polygon points="404,279 389,273 389,285" fill="#33bb33" opacity="0.85"/>
  40    <!-- Earth cuts Water (yellow → toward lower-left) -->
  41    <polygon points="349,439 358,425 365,435" fill="#eecc00" opacity="0.85"/>
  42    <!-- Water cuts Fire (blue → toward top) -->
  43    <polygon points="299,277 301,293 289,289" fill="#3388ee" opacity="0.85"/>
  44  
  45    <!-- FIRE — red equilateral triangle (3) -->
  46    <polygon points="350,78 386,141 314,141" fill="#ee3333"/>
  47  
  48    <!-- EARTH — yellow square (4) -->
  49    <rect x="539" y="249" width="60" height="60" fill="#eecc00"/>
  50  
  51    <!-- METAL — white regular octagon (8) -->
  52    <polygon points="520,536 510,561 485,571 460,561 450,536 460,511 485,501 510,511"
  53             fill="#e8e8e8"/>
  54  
  55    <!-- WATER — blue diamond (2, the line) -->
  56    <polygon points="215,501 226,536 215,571 204,536" fill="#3388ee"/>
  57  
  58    <!-- WOOD — green regular pentagon (5) -->
  59    <polygon points="131,241 167,267 153,310 109,310 95,267" fill="#33bb33"/>
  60  </svg>
  61