<h1>A Few Stats</h1>
<div class="wrap">
  <div>
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 200 200" fill="#000000">
      <circle cx="100" cy="100" r="90" fill="none" stroke="#99aaff" stroke-width="5"/>
      </svg>
      <p>75%</p>
    </div>
    <p>Some text under the circle.</p>
  </div>
    <div>
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 200 200" fill="#000000">
      <circle cx="100" cy="100" r="90" fill="none" stroke="#99aaff" stroke-width="5"/>
      </svg>
      <p>34%</p>
    </div>
    <p>Some slightly longer text under the circle.</p>
  </div>
    <div>
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 200 200" fill="#000000">
      <circle cx="100" cy="100" r="90" fill="none" stroke="#99aaff" stroke-width="5"/>
      </svg>
      <p>50%</p>
    </div>
    <p>Some text under the circle.</p>
  </div>
</div>
html { font-family: sans-serif }
h1, .wrap { text-align: center }
.wrap {
  display: flex;
  justify-content: space-around;
  flex-flow: wrap;
}
.wrap div {
  width: 12em;
  background: #aaa;  /* just for visibility */
}
.wrap div div {
  height: 12em;
  background: #ddd; /* just for visibility */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrap div div svg {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: auto;
}
.wrap div div p {
  position: relative;
  font-size: 3em;
  font-weight: bold
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.