<figure class="element" data-level-value="50">
  <svg width="200px" height="200px" viewBox="0 0 200 200" class="element__rating">
    <circle cx="100" cy="100" r="95" fill="none" class="element-rating__fill"></circle>
    <circle cx="100" cy="100" r="95" fill="none" class="element-rating__line"></circle>
  </svg>
  <figcaption class="element__info">
    <span class="element-info__level">1</span>
    <span class="element-info__title">level</span>
  </figcaption>
</figure>
body {
  font-family: "Oswald", sans-serif;
  background: #131313;
  padding: 40px;
}

.element {
  display: inline-flex;
  padding: 40px 40px;
  background: #161a1f;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 5px;
}

.element-rating__fill {
  stroke: #282942;
  stroke-width: 10px;
}

.element-rating__line {
  stroke: #fff;
  stroke-width: 10px;
  transform-origin: center;
  transform: rotate(-90deg);
  stroke-linecap: round;
  stroke-dasharray: var(--dasharray);
  stroke-dashoffset: var(--dashoffset);
}

.element__info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.element-info__level {
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
}

.element-info__title {
  margin-top: 30px;
  font-size: 30px;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
}
const levelUP = (e) => {
  const element = document.querySelector(".element");
  const rating = document.querySelector(".element-rating__line");

  const radius = 95;
  const value = element.dataset.levelValue;
  const count = radius * Math.PI * 2;

  rating.style.setProperty("--dasharray", `${count}`);
  rating.style.setProperty("--dashoffset", `${count - count * (value / 100)}`);
};

document.addEventListener("DOMContentLoaded", levelUP);
View Compiled

External CSS

  1. https://moonpresence.site/moonpresence/foundation/css/base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.