Captain Ele Ukulele

by whelkaholism

HTML

<h1>Captain Ele - Ukulele</h1>
<svg class="chordChart" height="188" width="92" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 188" preserveAspectRatio="xMidYMid meet" font-size="16"><g class="grid"><path d=" M14.5 84 h63 M14.5 109 h63 M14.5 134 h63 M14.5 159 h63" class="frets"/><path d=" M14.5 59 v100 M35.5 59 v100 M56.5 59 v100 M77.5 59 v100" class="strings"/><path d="M14.5 59 h -2.5 a2.5 2.5 0 0 1 0 -5 h68 a2.5 2.5 0 0 1 0 5 z" class="nut"/></g><g class="dots"><circle cy="96.5" r="9.5" cx="14.5"/></g><g text-anchor="middle" class="text"><text x="46" y="29" class="title">Em</text><text class="header"><tspan x="35.5" y="47">o</tspan><tspan x="56.5" y="47">o</tspan><tspan x="77.5" y="47">o</tspan></text><text class="labels"/><text class="footer"><tspan x="14.5" y="177">G</tspan><tspan x="35.5" y="177">C</tspan><tspan x="56.5" y="177">E</tspan><tspan x="77.5" y="177">A</tspan></text></g></svg>

<svg class="chordChart" height="188" width="92" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 188" preserveAspectRatio="xMidYMid meet" font-size="16"><g class="grid"><path d=" M14.5 84 h63 M14.5 109 h63 M14.5 134 h63 M14.5 159 h63" class="frets"/><path d=" M14.5 59 v100 M35.5 59 v100 M56.5 59 v100 M77.5 59 v100" class="strings"/><path d="M14.5 59 h -2.5 a2.5 2.5 0 0 1 0 -5 h68 a2.5 2.5 0 0 1 0 5 z" class="nut"/></g><g class="dots"><circle cy="96.5" r="9.5" cx="14.5"/><circle cy="71.5" r="9.5" cx="56.5"/></g><g text-anchor="middle" class="text"><text x="46" y="29" class="title">C</text><text class="header"><tspan x="35.5" y="47">o</tspan><tspan x="77.5" y="47">o</tspan></text><text class="labels"/><text class="footer"><tspan x="14.5" y="177">G</tspan><tspan x="35.5" y="177">C</tspan><tspan x="56.5" y="177">E</tspan><tspan x="77.5" y="177">A</tspan></text></g></svg>

<svg class="chordChart" height="188" width="92" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 188" preserveAspectRatio="xMidYMid meet" font-size="16"><g class="grid"><path d=" M14.5 84 h63 M14.5 109...

CSS

html * {
font-family: Verdana
}
svg.chordChart{
  background: white; 
  border: 1px #ccc solid;
  }
svg.chordChart .grid{
  stroke: black;
  stroke-linecap: round;
  }
svg.chordChart .labels{
  fill: white;
  }
svg.chordChart .title{
  font-size:140%;
  }