<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg" onload="engWord(evt);">

<script type='text/ecmascript'>
<![CDATA[
function engWord()
{
document.getElementById("moonText1").onmouseover ="moon"; 
}
]]>
</script>

<!--
<text x='50' y='50' style='fill:black; stroke:none; font-size:150%;'>&#x6c34;</text>
-->

<defs>
      <marker id="endArrow" viewBox="0 0 10 10" refX="1" refY="5" markerUnits="strokeWidth" orient="auto" markerWidth="5" markerHeight="4">
         <polyline points="0,0 10,5 0,10 1,5" fill="darkblue" />
      </marker>

      <marker id="startArrow" viewBox="0 0 10 10" refX="1" refY="5" markerUnits="strokeWidth" orient="auto" markerWidth="5" markerHeight="4">
         <polyline points="10,0 0,5 10,10 9,5" fill="darkblue" />
      </marker>
  </defs>

<desc>NW</desc>
<g id='NW' transform='translate(10, -60)' style='background-color:blue;'>

<desc> moonDrawing </desc>
<g transform='rotate(315, 250, 340) scale(0.5, 0.5) translate(0, 10)' id='moon' stroke-width='3'>
<path d='M400 100 Q500 250, 600 100' style='fill:none; stroke:black; height:2px;' />
<path d='M400 100 Q500 350, 600 100' style='fill:none; stroke:black; height:2px;' />
</g>

<desc> treeDrawing </desc>
<g class='treeDrawing' stroke-width='2'>
<line x1='200' y1='100' x2='150' y2='180' style='stroke:black;' />

<line x1='200' y1='100' x2='250' y2='180' style='stroke:black;' />

<line x1='150' y1='180' x2='250' y2='180' style='stroke:black;' />

<line x1='190' y1='180' x2='190' y2='220' style='stroke:black;' />

<line x1='210' y1='180' x2='210' y2='220' style='stroke:black;' />
</g>

<desc>manDrawing</desc>
<g class='manDrawing' style='fill:none; stroke:black;' transform='translate(70, -150)' stroke-width='2'>
<circle cx='250' cy='250' r='20' /> <!--head-->
<line x1='250' y1='270' x2='250' y2='330' /> <!-- body -->
<line x1='250' y1='290' x2='220' y2='270' /> <!-- left arm -->
<line x1='250' y1='290' x2='280' y2='270' /> <!-- right arm -->
<line x1='250' y1='330' x2='220' y2='370' /> <!-- left arm -->
<line x1='250' y1='330' x2='280' y2='370' /> <!-- right arm -->
</g>

<desc>water graph</desc>
<g id='water' transform='translate(-380, 0)' stroke-width='2'>
<path d='M800 100 Q720 200 800 220' style='fill:none; stroke:black;' />

<path d='M800 100 Q880 200 800 220' style='fill:none; stroke:black;' />
</g>

<desc> arrow  and text for 1st, moon  </desc>
<line x1="60" y1="230" x2="60" y2="320" stroke="lime" stroke-width="3" marker-start="url(#startArrow)" />
      <text x='45' y='350' stroke='none' fill='black' stroke-width='1' style='font-size:180%;  font-weight:700;' id='moonText1'>&#x6708;</text>

<desc> arrow  and text for 2nd, tree </desc>
<line x1="200" y1="230" x2="200" y2="320" stroke="lime" stroke-width="3" marker-start="url(#startArrow)" />
      <text x='185' y='350' stroke='none' fill='black' stroke-width='1' style='font-size:180%; font-weight:700;'>&#x6728;</text>

<desc> arrow  and text 3rd, man  </desc>
<line x1="320" y1="230" x2="320" y2="320" stroke="lime" stroke-width="3" marker-start="url(#startArrow)" />
     <text x='305' y='350' stroke='none' fill='black' stroke-width='1' style='font-size:180%; font-weight:700;'>&#x4eba;</text>

<desc> arrow  and text for 4th, water </desc>
<line x1="420" y1="230" x2="420" y2="320" stroke="lime" stroke-width="3" marker-start="url(#startArrow)" />
      <text x='405' y='350' stroke='none' fill='black' stroke-width='1' style='font-size:180%;  font-weight:700;'>&#x6c34;</text>
</g>


<desc> NE </desc>
<g id='NE' transform='translate(550, -60)'>

<desc> moon </desc>
<g class='moonDrawing' transform='rotate(315, 250, 340) scale(0.5, 0.5) translate(0, 10)' stroke-width='3'>
<path d='M400 100 Q500 250, 600 100' style='fill:none; stroke:black; height:2px;' />
<path d='M400 100 Q500 350, 600 100' style='fill:none; stroke:black; height:2px;' />
</g>

<g class='treeDrawing' stroke-width='2'>
<line x1='200' y1='100' x2='150' y2='180' style='stroke:black;' />

<line x1='200' y1='100' x2='250' y2='180' style='stroke:black;' />

<line x1='150' y1='180' x2='250' y2='180' style='stroke:black;' />

<line x1='190' y1='180' x2='190' y2='220' style='stroke:black;' />

<line x1='210' y1='180' x2='210' y2='220' style='stroke:black;' />
</g>

<g class='manDrawing' style='fill:none; stroke:black;' transform='translate(70, -150)' stroke-width='2'>
<circle cx='250' cy='250' r='20' /> <!--head-->
<line x1='250' y1='270' x2='250' y2='330' /> <!-- body -->
<line x1='250' y1='290' x2='220' y2='270' /> <!-- left arm -->
<line x1='250' y1='290' x2='280' y2='270' /> <!-- right arm -->
<line x1='250' y1='330' x2='220' y2='370' /> <!-- left arm -->
<line x1='250' y1='330' x2='280' y2='370' /> <!-- right arm -->
</g>

<g class='waterDrawing' transform='translate(-380, 0)' stroke-width='2'>
<path d='M800 100 Q720 200 800 220' style='fill:none; stroke:black;' />

<path d='M800 100 Q880 200 800 220' style='fill:none; stroke:black;' />
</g>

<desc> arrow and text for 1st, tree </desc>
<line x1="60" y1="230" x2="60" y2="320" stroke="lime" stroke-width="3" marker-start="url(#startArrow)" />
      <text x='45' y='350' stroke='none' fill='blue' stroke-width='1' style='font-size:180%; font-weight:700;'>&#x6728;</text>

<desc> arrow  and text for 2nd, man </desc>
<line x1="200" y1="230" x2="200" y2="320" stroke="lime" stroke-width="3" marker-start="url(#startArrow)" />
      <text x='185' y='350' stroke='none' fill='blue' stroke-width='1' style='font-size:180%; font-weight:700;'>&#x4eba;</text>

<desc> arrow  and text for 3rd, water </desc>
<line x1="320" y1="230" x2="320" y2="320" stroke="lime" stroke-width="3" marker-start="url(#startArrow)" />
      <text x='305' y='350' stroke='none' fill='blue' stroke-width='1' style='font-size:180%; font-weight:700;'>&#x6c34;</text>

<desc> arrow  and text for 4th, moon </desc>
<line x1="420" y1="230" x2="420" y2="320" stroke="lime" stroke-width="3" marker-start="url(#startArrow)" />
      <text x='405' y='350' stroke='none' fill='blue' stroke-width='1' style='font-size:180%; font-weight:700;'>&#x6708;</text>
</g>

<desc> Starting SW quadrant </desc>
<g id='SW' transform='translate(0, 250)' style='background-color:blue;'>
<!--
<rect x='0' y='60' width='500' height='300' style='fill:#fdebcf; stroke:none;' />
-->
<desc> moonDrawing </desc>
<g transform='rotate(315, 250, 340) scale(0.5, 0.5) translate(0, 10)' class='moonDrawing' stroke-width='3'>
<path d='M400 100 Q500 250, 600 100' style='fill:none; stroke:black; height:2px;' />
<path d='M400 100 Q500 350, 600 100' style='fill:none; stroke:black; height:2px;' />
</g>

<desc> tree </desc>
<g class='treeDrawing' stroke-width='2'>
<line x1='200' y1='100' x2='150' y2='180' style='stroke:black;' />

<line x1='200' y1='100' x2='250' y2='180' style='stroke:black;' />

<line x1='150' y1='180' x2='250' y2='180' style='stroke:black;' />

<line x1='190' y1='180' x2='190' y2='220' style='stroke:black;' />

<line x1='210' y1='180' x2='210' y2='220' style='stroke:black;' />
</g>

<desc> manDrawing </desc>
<g class='manDrawing' style='fill:none; stroke:black;' transform='translate(70, -150)' stroke-width='2'>
<circle cx='250' cy='250' r='20' /> <!--head-->
<line x1='250' y1='270' x2='250' y2='330' /> <!-- body -->
<line x1='250' y1='290' x2='220' y2='270' /> <!-- left arm -->
<line x1='250' y1='290' x2='280' y2='270' /> <!-- right arm -->
<line x1='250' y1='330' x2='220' y2='370' /> <!-- left arm -->
<line x1='250' y1='330' x2='280' y2='370' /> <!-- right arm -->
</g>

<desc>  water </desc>
<g class='waterDrawing' transform='translate(-380, 0)' stroke-width='2'>
<path d='M800 100 Q720 200 800 220' style='fill:none; stroke:black;' />

<path d='M800 100 Q880 200 800 220' style='fill:none; stroke:black;' />
</g>

<desc> arrow  and text for 1st, man  </desc>
<line x1="60" y1="230" x2="60" y2="320" stroke="lime" stroke-width="3" marker-start="url(#startArrow)" />
      <text x='45' y='350' stroke='none' fill='blue' stroke-width='1' style='font-size:180%; font-weight:700;' class='manText'>&#x4eba;</text>

<desc> arrow  and text for 2nd, water  </desc>
<line x1="200" y1="230" x2="200" y2="320" stroke="lime" stroke-width="3" marker-start="url(#startArrow)" />
      <text x='185' y='350' stroke='none' fill='blue' stroke-width='1' style='font-size:180%; font-weight:700;'>&#x6c34;</text>

<desc> arrow  and text 3rd, moon  </desc>
<line x1="320" y1="230" x2="320" y2="320" stroke="lime" stroke-width="3" marker-start="url(#startArrow)" />
     <text x='305' y='350' stroke='none' fill='blue' stroke-width='1' style='font-size:180%; font-weight:700;'>&#x6708;</text>

<desc> arrow  and text for 4th, tree </desc>
<line x1="420" y1="230" x2="420" y2="320" stroke="lime" stroke-width="3" marker-start="url(#startArrow)" />
      <text x='405' y='350' stroke='none' fill='blue' stroke-width='1' style='font-size:180%; font-weight:700;'>&#x6728;</text>
</g>
<desc> end of SW  </desc>


<desc> Starting SE quadrant </desc>
<g id='SE' transform='translate(550, 250)' style='background-color:blue;'>
<!--
<rect x='0' y='60' width='500' height='300' style='fill:#fdebcf; stroke:none;' />
-->
<!-- moon  -->
<g transform='rotate(315, 250, 340) scale(0.5, 0.5) translate(0, 10)' id='moon' stroke-width='3'>
<path d='M400 100 Q500 250, 600 100' style='fill:none; stroke:black; height:2px;' />
<path d='M400 100 Q500 350, 600 100' style='fill:none; stroke:black; height:2px;' />
</g>

<!-- tree -->
<g id='tree' stroke-width='2'>
<line x1='200' y1='100' x2='150' y2='180' style='stroke:black;' />

<line x1='200' y1='100' x2='250' y2='180' style='stroke:black;' />

<line x1='150' y1='180' x2='250' y2='180' style='stroke:black;' />

<line x1='190' y1='180' x2='190' y2='220' style='stroke:black;' />

<line x1='210' y1='180' x2='210' y2='220' style='stroke:black;' />
</g>

<!-- man -->
<g id='man' style='fill:none; stroke:black;' transform='translate(70, -150)' stroke-width='2'>
<circle cx='250' cy='250' r='20' /> <!--head-->
<line x1='250' y1='270' x2='250' y2='330' /> <!-- body -->
<line x1='250' y1='290' x2='220' y2='270' /> <!-- left arm -->
<line x1='250' y1='290' x2='280' y2='270' /> <!-- right arm -->
<line x1='250' y1='330' x2='220' y2='370' /> <!-- left arm -->
<line x1='250' y1='330' x2='280' y2='370' /> <!-- right arm -->
</g>

<!-- water -->
<g id='water' transform='translate(-380, 0)' stroke-width='2'>
<path d='M800 100 Q720 200 800 220' style='fill:none; stroke:black;' />

<path d='M800 100 Q880 200 800 220' style='fill:none; stroke:black;' />
</g>

<desc> arrow  and text for 1st, water  </desc>
<line x1="60" y1="230" x2="60" y2="320" stroke="lime" stroke-width="3" marker-start="url(#startArrow)" />
      <text x='45' y='350' stroke='none' fill='blue' stroke-width='1' style='font-size:180%; font-weight:700;'>&#x6c34;</text>

<!-- arrow  and text for 2nd, moon -->
<line x1="200" y1="230" x2="200" y2="320" stroke="lime" stroke-width="3" marker-start="url(#startArrow)" />
      <text x='185' y='350' stroke='none' fill='blue' stroke-width='1' style='font-size:180%; font-weight:700;'>&#x6708;</text>

<!-- arrow  and text 3rd, tree  -->
<line x1="320" y1="230" x2="320" y2="320" stroke="lime" stroke-width="3" marker-start="url(#startArrow)" />
     <text x='305' y='350' stroke='none' fill='blue' stroke-width='1' style='font-size:180%; font-weight:700;'>&#x6728;</text>

<!-- arrow  and text for 4th, man -->
<line x1="420" y1="230" x2="420" y2="320" stroke="lime" stroke-width="3" marker-start="url(#startArrow)" />
      <text x='405' y='350' stroke='none' fill='blue' stroke-width='1' style='font-size:180%; font-weight:700;'>&#x4eba;</text>
</g>
<!-- end of SE  -->

<!--
<desc>notes</desc>
<text x='25' y='610' style='fill:black; stroke:none; font-size:150%; font-weight:600;'>Black Word: Representing object in real world</text>
<text x='25' y='640' style='fill:blue; stroke:none; font-size:150%; font-weight:600;'>Blue Word: Assumingly representing object by theory of arbitrariness</text>
-->

<desc>outer rectangle</desc>
<rect id='outerRect' x='5' y='5' width='1050' height='650' rx='10' ry='10' style='fill:none; stroke:red; stroke-width:3px;'/>

<!--
<desc>Figure I</desc>
<text x='20' y='690' style='stroke:none; fill:black; font-family:verdana, helvetica, sans-serif; font-size:250%;'>Figure I:
<tspan style='stroke:none; fill:green; font-size:105%; font-family:"courier new"; font-weight:600; '>Arbitrary Relationship in Alphabetic Writing</tspan>

</text>
-->


</svg>