<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
<svg width="480" height="640" viewBox="0 0 480 640">
  <defs>
    <filter id="dropShadow" x="0" y="0" width="120%" height="120%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2 2"/> 
      <feOffset dx="2" dy="2" />
      <feComponentTransfer result="shadow">
        <feFuncA type="linear" slope=".25" intercept="0" />
      </feComponentTransfer>
      <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
    <marker id="arrowHead" markerWidth="12" markerHeight="9" 
            viewBox="0 0 4 3" refX="4" refY="1.5" orient="auto">
      <path fill="black" stroke="none" d="M 0 0 L 4 1.5 L 0 3 Z" />
    </marker>
  </defs>
  <style type="text/css">
svg {
  font-family: sansserif, sans-serif;
  font-size:   12pt;
}
.arrowLinks {
    fill:        none;
    stroke:      black;
    marker-end:  url(#arrowHead);
    }
rect, ellipse {
  fill:        white;
  stroke:      black;
}
text {
  fill:        black;
}
.label { 
  text-anchor: middle;
  stroke:      none;
}
  </style>

  
  <g transform='scale(0.75)'>
  <g transform='translate(0, -200)'>
    <g transform='translate(180, 0)'>
    <g filter="url(#dropShadow)" transform='translate(10, 210)'>
      <line class="arrowLinks" x1="50" y1="40" x2="50" y2="70"/>
      <rect x="0" y="0" width="100" height="40"/>
      <text class='label' x="50" y="26.5">&lt;table></text>
    </g>
    
    <g filter="url(#dropShadow)" transform='translate(10, 280)'>
      <rect x="0" y="0" width="100" height="40"/>
      <text class='label' x="50" y="26.5">&lt;tbody></text>
    </g>
  </g>

  <g transform='translate(0, 350)'>
    <g filter="url(#dropShadow)">
      <line class="arrowLinks" x1="240" y1="-30" x2="120" y2="0"/>
      <line class="arrowLinks" x1="240" y1="-30" x2="360" y2="0"/>
    </g>
    <g filter="url(#dropShadow)" transform='translate(70, 0)'>
      <rect x="0" y="0" width="100" height="40"/>
      <text class='label' x="50" y="26.5">&lt;tr></text>
    </g>
    <g filter="url(#dropShadow)" transform='translate(310, 0)'>
      <rect x="0" y="0" width="100" height="40"/>
      <text class='label' x="50" y="26.5">&lt;tr></text>
    </g>
  </g>

  <g transform='translate(0, 420)'>
    <g filter="url(#dropShadow)">
      <line class="arrowLinks" x1="120" y1="-30" x2="60" y2="0"/>
      <line class="arrowLinks" x1="120" y1="-30" x2="180" y2="0"/>
      <line class="arrowLinks" x1="360" y1="-30" x2="300" y2="0"/>
      <line class="arrowLinks" x1="360" y1="-30" x2="420" y2="0"/>
    </g>
    <g filter="url(#dropShadow)" transform='translate(10, 0)'>
      <line class="arrowLinks" x1="50" y1="40" x2="50" y2="60"/>
      <rect x="0" y="0" width="100" height="40"/>
      <text class='label' x="50" y="26.5">&lt;td></text>
    </g>
    <g filter="url(#dropShadow)" transform='translate(130, 0)'>
      <line class="arrowLinks" x1="50" y1="40" x2="50" y2="60"/>
      <rect x="0" y="0" width="100" height="40"/>
      <text class='label' x="50" y="26.5">&lt;td></text>
    </g>
    <g filter="url(#dropShadow)" transform='translate(250, 0)'>
      <line class="arrowLinks" x1="50" y1="40" x2="50" y2="60"/>
      <rect x="0" y="0" width="100" height="40"/>
      <text class='label' x="50" y="26.5">&lt;td></text>
    </g>
    <g filter="url(#dropShadow)" transform='translate(370, 0)'>
      <line class="arrowLinks" x1="50" y1="40" x2="50" y2="60"/>
      <rect x="0" y="0" width="100" height="40"/>
      <text class='label' x="50" y="26.5">&lt;td></text>
    </g>
  </g>

  <g transform='translate(0, 490)'>
    <g filter="url(#dropShadow)" transform='translate(10, 0)'>
      <ellipse cx="50" cy="20" rx="55" ry="30"/>
      <text class='label' x="50" y="26.5">Shady Grove</text>
    </g>
    <g filter="url(#dropShadow)" transform='translate(130, 0)'>
      <ellipse cx="50" cy="20" rx="55" ry="30"/>
      <text class='label' x="50" y="26.5">Aeolian</text>
    </g>
    <g filter="url(#dropShadow)" transform='translate(250, 0)'>
      <ellipse cx="50" cy="20" rx="60" ry="30"/>
      <text class='label' x="50" y="22.5">Over the river,</text>
      <text class='label' x="50" y="38.5">Charlie</text>
    </g>
    <g filter="url(#dropShadow)" transform='translate(370, 0)'>
      <ellipse cx="50" cy="20" rx="55" ry="30"/>
      <text class='label' x="50" y="26.5">Dorian</text>
    </g>
      </g>
    </g>
  </g>
</svg>