how do I make an animations around one character

Question

is there a way to make animation around a number correspond to the number amount? like the 5 in this picture:

example model

Answer 1

Do you mean something like this? Enter a number above 5 for aqua and below 5 for orange.

 document.getElementById('applyNum').addEventListener('click', function() { document.getElementById('numCon').innerHTML = document.getElementById('numInput').value; const v = document.getElementById('numCon').innerHTML; if (v >= 5) { document.getElementById('numCon').style.borderLeft = '2px solid aqua'; document.getElementById('numCon').style.borderBottom = '2px solid aqua'; } else if (v < 5) { document.getElementById('numCon').style.borderLeft = '2px solid orange'; document.getElementById('numCon').style.borderBottom = '2px solid orange'; } })

 #numCon { display: flex; justify-content: center; align-items: center; position: absolute; top: 25%; left: 5%; width: 50px; height: 50px; font-size: 5vw; border-radius: 50%; }

 <input id='numInput' /> <button id='applyNum'>Apply Number</button> <div id="numCon"></div>