Scorpion overlay

Information about Scorpion weapons, abilities, etc.

HTML

<svg height="512" width="512">
  <g>
    <polygon points="120, 250,
    75, 180,
    60, 125,
    81, 55,
    98, 45,
    155, 75,
    200, 140,
    180, 160,
    125, 120,
    185, 190,
    145, 210" />
    <text x="160" y="20">Lightning Tail
      <tspan x="180" y="45">Surprise your enemies with a</tspan>
      <tspan x="180" y="63">high powered electro magnetic</tspan>
      <tspan x="180" y="81">lightning sting.</tspan>
      <tspan x="200" y="101">Enough to quickly disable even</tspan>
      <tspan x="200" y="119">a tougher opponent.</tspan>
    </text>
  </g>
  
  <g>
    <polygon points="378, 240,
    423, 235,
    489, 281,
    439, 322,
    378, 278" />
    <polygon points="225, 350,
    270, 345,
    336, 391,
    283, 434,
    225, 390" />
    <text x="265" y="100">Frontal Particle Cannons
      <tspan x="295" y="125">After an enemy has been</tspan>
      <tspan x="295" y="143">disabled by the tail there</tspan>
      <tspan x="295" y="161">is not much chance for them</tspan>
      <tspan x="295" y="179">to escape these particle</tspan>
      <tspan x="295" y="197">accelerators.</tspan>
      <tspan x="365" y="217">Pew pew pew.</tspan>
    </text>
  </g>
  
  <g>
    <polygon points="245, 195,
    315, 240,
    315, 265,
    215, 340,
    145, 295,
    145, 270" />
    <text x="230" y="80">Cloaking device
      <tspan x="230" y="105">A very distinctive feature,</tspan>
      <tspan x="230" y="123">this high tech cloaking device</tspan>
      <tspan x="230" y="141">is strong enough to hide even</tspan>
      <tspan x="230" y="159">the massive Scorpion strider</tspan>
      <tspan x="230" y="177">from enemy sensors.</tspan>
      <tspan x="278" y="193" class="small">(Provided you don't</tspan>
      <tspan x="283" y="207" class="small">run out of energy.)</tspan>
    </text>
  </g>
  
  <g>
    <circle cx="75" cy="300" r="30" />
    <circle cx="130" cy="370" r="30" />
    <circle cx="200" cy="420" r="30" />
    <!--<circle cx="230" cy="170" r="25" />
   ...

CSS

html {
  background-color: #000;
}

svg {
  background: url('http://licho.eu/alba/Zero-K/showcase_big_1.png') no-repeat scroll left top;
}

text {
  display: none;
  fill: #fff;
  text-shadow: 1px 1px 2px #000,
               -1px 1px 2px #000,
               1px -1px 2px #000,
               -1px -1px 2px #000;
  font-size: 22px;
}
tspan {
  font-size: 16px;
}
tspan.small {
  font-size: 12px;
}

g:hover text {
  display: block;
}

polygon, circle {
  fill: rgba(0, 255, 255, 0);
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 3;
  transition: fill 1.5s;
}

g:hover polygon, g:hover circle {
  fill: rgba(0, 255, 255, 0.33);
  stroke: rgba(0, 255, 255, 0.5);
  stroke-width: 4;
  cursor: help;
}