*{box-sizing:border-box}body{display:grid;place-items:center;min-height:100vh}.points{position:relative}.indicator{--complete: 0;position:fixed;bottom:1rem;right:1rem;border-radius:50%;background:hsl(var(--hue, 10) 80% 50% / var(--alpha, .1));height:10vmin;aspect-ratio:1}.indicator:after{content:"";position:absolute;inset:0;border:1vmin solid hsl(var(--hue, 10) 80% 50%);border-radius:50%;-webkit-mask:conic-gradient(white calc(var(--complete) * 1%),transparent 0);mask:conic-gradient(white calc(var(--complete) * 1%),transparent 0)}.indicator[data-direction=ccw]:after{transform:scaleX(-1)}.point{height:4px;aspect-ratio:1;position:fixed;background:hsl(var(--hue, 10) 80% 50%);left:calc(var(--x, 0) * 1px);top:calc(var(--y, 0) * 1px);transform:translate(-50%,-50%);filter:brightness(1.5) drop-shadow(0 0 4px hsl(var(--hue, 10) 80% 50%))}