<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;
}