<section>
  <div class="clock">
    <div>12</div>
    <hr>
    <hr>
    <div>3</div>
    <hr>
    <hr>
    <div><span>6</span></div>
    <hr>
    <hr>
    <div>9</div>
    <hr>
    <hr>
  </div>

  <input type="range" id="fontWidth" min="1" max="100">
</section>

* {
  box-sizing: border-box;
}

.clock {
  width: 200px;
  height: 200px;
  border-radius: 200px;
  background: #302b2b;
  color: white;
  font: 110% system-ui;
  font-variation-settings: "wght" 300, "wdth" 5;
  position: relative;
  > div {
    padding-block-start: 0.5rem;
    &:nth-of-type(2) {
      rotate: 90deg;
    }
    &:nth-of-type(3) {
      rotate: 180deg;
      span {
        display: inline-block;
        scale: -1 -1;
      }
    }
    &:nth-of-type(4) {
      rotate: 270deg;
    }
  }
  > div,
  > hr {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    height: 50%;
    transform-origin: bottom center;
    margin: 0;
    border: 0;
  }
  > hr {
    width: 1px;
    background: linear-gradient(
      to top,
      transparent,
      transparent 70%,
      gray 70%,
      gray 87%,
      transparent 87%
    );
    &:nth-of-type(1) {
      rotate: 30deg;
    }
    &:nth-of-type(2) {
      rotate: 60deg;
    }
    &:nth-of-type(3) {
      rotate: 120deg;
    }
    &:nth-of-type(4) {
      rotate: 150deg;
    }
    &:nth-of-type(5) {
      rotate: 210deg;
    }
    &:nth-of-type(6) {
      rotate: 240deg;
    }
    &:nth-of-type(7) {
      rotate: 300deg;
    }
    &:nth-of-type(8) {
      rotate: 330deg;
    }
  }
}

body {
  background: #111;
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}
section {
  display: flex;
  gap: 2rem;
}

input[type="range"] {
  -webkit-appearance: slider-vertical;
  width: 20px;
}

// if you start smurfing with editing the CSS, CodePen might inject stylesheets in the preview such that this stops working. Just refresh.
const stylesheet = document.styleSheets[0];

let clock;

for (let i = 0; i < stylesheet.cssRules.length; i++) {
  if (stylesheet.cssRules[i].selectorText === ".clock") {
    clock = stylesheet.cssRules[i];
  }
}

window.fontWidth.addEventListener("input", (e) => {
  clock.style.setProperty(
    "font-variation-settings",
    `"wght" 300, "wdth" ${e.currentTarget.value}`
  );
  clock.style.setProperty("font-size", 40 - e.currentTarget.value / 5 + "px");
});