SVG CHARTS

by Rodwyn Moreno

HTML

<svg class="chart" width="100%" role="img">
  <g class="bar">
    <rect width="100%" height="19" class="bar-background"></rect>
    <rect width="40%" height="19" class="bar-percent"></rect>
  </g>
  <g class="bar">
    <rect width="100%" height="19" class="bar-background" y="20"></rect>
    <rect width="80%" height="19" y="20" class="bar-percent"></rect>
  </g>
  <g class="bar">
    <rect width="100%" height="19" class="bar-background" y="40"></rect>
    <rect width="50%" height="19" y="40" class="bar-percent"></rect>
  </g>
  <g class="bar">
    <rect width="100%" height="19" class="bar-background" y="60"></rect>
    <rect width="60%" height="19" y="60" class="bar-percent"></rect>
  </g>
  <g class="bar">
    <rect width="100%" height="19" class="bar-background" y="80"></rect>
    <rect width="23%" height="19" y="80" class="bar-percent"></rect>
  </g>
</svg>

CSS

.bar {
  height: 21px;
}

.bar-background {
  fill: #e6e6e6;
}

.bar-percent {
  fill: #006699;
}