<svg width='100%' height='65px' viewBox='0 0 1132 65'>
<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='1130' 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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.