JSFiddle - React, Tailwind, and code Playground

HTML

<input id="input" type="text">


<div id="clock">
<svg viewBox="0 0 500 500">
    <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
    <text width="500">

    </text>
  </svg>
  
</div>

CSS

#clock {
  position: relative;
  margin: auto;
  margin-top: 50px;
  width: 400px;
  height: 400px;
  border: 40px solid lightgray;
  border-radius: 50%;
}

body {
  background-color: #333;
  font-family: 'Luckiest Guy', cursive;
  font-size: 35px;
}

svg {
  position: absolute;
  top: -60px;
}

path {
  fill: transparent;
}

text {
  fill: #FF9800;
}

JavaScript

input.addEventListener('input', e => {
	document.querySelector('#clock > svg > text').innerHTML = `      <textPath xlink:href="#curve">
        ${e.target.value}
      </textPath>`
})