How can I dynamically generate a multicolored circle with only 1 div in Javascript

Question

I can make a set of circles that are all the appropriate color using multiple div elements and the css file for the page. My current task however is to only use a single div element to dynamically create a target in javascript and not css that has multiple colored rings, modeled after this image. I started something like this:

var containerDiv = document.getElementById("container");
containerDiv.style.width = "200px";
containerDiv.style.height = "200px";

But this would only set the biggest circle that I need if anything. I am not sure how to create the smaller, different colored circles inside the target dynamically.

have you tried inset shadow or radial-gradient ? and where did you fail ? — G-Cyrillus, Mar 16 '20 at 16:05
@G-Cyrillus I failed in that I know how to do it in css, but I cannot seem to be able to do it in javascript. I started by creating what would be the largest circle, but I am not sure how to create smaller colored circles from the one large one without creating new div elements. — , Mar 16 '20 at 16:49

score 2 · Answer 1 · answered Mar 16 '20 at 16:13

the easiest is inset shadow:

#container {
  height:200px;width:200px;
  border-radius:50%;
  box-shadow: 0 0 5px gray ,
    inset 0 0 0 10px white,
    inset 0 0 0 20px black,
    inset 0 0 0 35px white,
    inset 0 0 0 50px black,
    inset 0 0 0 65px rgb(64, 171, 191),
    inset 0 0 0 85px rgb(253, 23, 0),
    inset  0 0 0 100px rgb(255, 255, 51);
}

/* demo purpose */
html {display:flex;min-height:100vh;}
body {margin:auto;}

<div id="container"></div>

How can I dynamically generate a multicolored circle with only 1 div in Javascript

1 Answers1