JSFiddle - React, Tailwind, and code Playground

by Hal_9100

HTML

Circle completion: <input type="number" id="input" value="90" min="0" max="360" autofocus>° <br>

<svg style="width: 500px; height: 500px;">
    <path id="path" fill="black" d=""></path>
</svg>

CSS

svg {margin-top: 20px;}
path {
    fill: none;
    stroke: #61C0BF;
}

JavaScript

var path = document.getElementById('path');
var input = document.getElementById('input');

var angle = 90,
	radius = 200,
	centerX = 150,
	centerY = 200,
	coords = [];

function draw_circle() {
	for (var i = 0; i < radius; i++) {
        var x = i * (radius * Math.cos(angle)) + centerX;
        var y = i * (radius * Math.sin(angle)) + centerY;
        coords.push((i == 0 ? 'M' : 'L') + x + ',' + y);
    } 
    path.setAttribute('d', coords.join(' ') );
}
draw_circle();



input.addEventListener('input', function() {
	angle = parseInt(this.value);
    draw_circle();
}, false);