Как я могу динамически создать многоцветный круг только с 1 делением в Javascript

Question

Я могу сделать набор окружностей подходящего цвета, используя несколько элементов div и файл css для страницы. Моя текущая задача, однако, состоит в том, чтобы использовать только один элемент div для динамического создания цели в javascript, а не css с несколькими цветными кольцами, смоделированными после этого изображения. Я начал что-то вроде этого:

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

Но это только установило бы самый большой круг, который мне нужен, если что-нибудь. Я не уверен, как динамически создавать меньшие разноцветные круги внутри цели.

Answer 1

самая легкая тень:

#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>