I have successfully created a SVG circle using Javascript and now I need to draw 1 degree center line arcs inside the circle.
Currently, I am struggling with the calculation of degrees and iterating through to create filled arcs as shown in the image, but each arc should be exactly 1 degree wide to completely fill the circle.
This is what I have accomplished so far:
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var svgwidth=550, svgheight=550;
var width = 500, height = 500;
var x = width/2;
var y = width/2;
var r = width/2-10;
svg.setAttribute("width", svgwidth);
svg.setAttribute("height", svgheight);
// create a circle
const circle = document.createElementNS(
"http://www.w3.org/2000/svg",
"circle",
);
circle.setAttributeNS(null, "cx", x);
circle.setAttributeNS(null, "cy", y);
circle.setAttributeNS(null, "r", r);
circle.setAttributeNS(null, 'style', 'fill: none; stroke: blue; stroke-width: 4px;' );
svg.appendChild(circle);
//Arcs
var degree = 1;
var totalArcs = 360;
var middlePointX = width/2;
var middlePointY = width/2;
var newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
newLine.setAttribute('id','line2');
newLine.setAttribute('x1', middlePointX);
newLine.setAttribute('y1',middlePointY);
newLine.setAttribute('x2',100);
newLine.setAttribute('y2',100);
newLine.setAttribute("stroke", "black")
svg.append(newLine);
document.getElementById("div1").appendChild(svg);<div id="div1">
</div>I aim to achieve something similar to the provided image, with each segment filling up precisely by 1 degree.
https://i.sstatic.net/uJjel.png
Your assistance would be greatly appreciated.