<svg width='100%' height='65px'>
  <g class='bars'>
    <rect fill='#ccc' width='100%' height='25'></rect>
    <rect fill='#0074d9' width='45%' height='25'></rect>
  </g>
  <g class='markers'>
    <rect fill='#001f3f' x='0%' y='0' width='2px' height='35'></rect>
    <rect fill='#001f3f' x='25%' y='0' width='2px' height='35'></rect>
    <rect fill='#001f3f' x='50%' y='0' width='2px' height='35'></rect>
    <rect fill='#001f3f' x='75%' y='0' width='2px' height='35'></rect>
    <rect text-anchor='' fill='#001f3f' x='100%' y='0' width='2px' height='35'></rect>
  </g>
</svg>
html, body {
  height: 100%;
}

body {
  display: flex;
  background-color: #fff;
  align-items: center;
  justify-content: center;
  font-family: "Helvetica";
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.