JSFiddle - React, Tailwind, and code Playground

HTML

<input type="number" id="deg" >

<?xml version="1.0" standalone="no"?>
<svg width="250" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <circle cx="50" cy="50" r="30" stroke="red" fill="transparent" stroke-width="5"/>  

  <circle id="point" cx="50" cy="50" r="5" stroke="blue" fill="blue" stroke-width="1"/>  
    
</svg>

JavaScript

function toRadians (angle) {
  return angle * (Math.PI / 180);
}

$("#deg").change(function(){
    var deg = +$(this).val();
    var y = 50 + ( Math.sin(toRadians (deg)) * 30 );
    var x = 50 + ( Math.cos(toRadians (deg)) * 30 );
    
    $("#point").attr("cy", y);
    $("#point").attr("cx", x);
});