<svg width='100%' height='65px' viewBox='0 0 1132 65'>
<g class='bars'>
<rect class='bg' fill='#ccc' width='100%' height='25'></rect>
<rect class='data' 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>
<g text-anchor='middle'>
<text text-anchor='start' fill='#0074d9' x='0' y='60'>0%</text>
<text fill='#0074d9' x='25%' y='60'>25%</text>
<text fill='#0074d9' x='50%' y='60'>50%</text>
<text fill='#0074d9' x='75%' y='60'>75%</text>
<text text-anchor='end' fill='#0074d9' x='100%' y='60'>100%</text>
</g>
<g>
<text class='result' y='60px' x='69%'>45%</text>
</g>
</svg>
html, body {
height: 100%;
}
body {
display: flex;
background-color: #fff;
align-items: center;
justify-content: center;
font-family: "Helvetica";
cursor: pointer;
}
h1 {
width: 100%;
}
body * {
transition: all .3s ease;
}
body:hover {
.data {
transform: scale(2);
transform-origin: 50% 50%;
fill: lighten(#0074d9,10);
}
.bg {
transform: scaleY(.0);
transform-origin: 50% 50%;
}
text {
opacity: 0;
}
.markers {
opacity: 0;
}
.result {
opacity: 1;
font-size: 80px;
font-weight: bold;
animation: flicker 2s ease infinite;
}
}
.result {
opacity: 0;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.