<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ol>

<form class="controls">
  <label for="elements">
    Elements: <span class="value">6</span>
  </label>
  <input type="range" id="elements" min="2" max="100" value="6">
</form>
@property --distance {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

li {
  --position: calc((360 / var(--sibling-count)) * var(--sibling-index));

  --rotation: calc(var(--position) * 1deg);
  --distance: calc(6rem * (1 + var(--sibling-count) / 100));
  --x: calc(var(--distance) * cos(var(--rotation)));
  --y: calc(var(--distance) * sin(var(--rotation)));

  transform: translateX(var(--x)) translateY(var(--y));

  background-color: hsl(var(--position) 100% 40%);
}

/* Aesthetic Styles */

:root {
  --text-color: #eae2b7;
  --spacing: 20px;
}

* {
  padding: 0px;
  margin: 0px;
}

html {
  font-family: monospace;
  font-size: clamp(12px, min(2vw, 2vh), 18px);
}

body {
  background: repeating-linear-gradient(
    -45deg,
    #111,
    #111 30px,
    #222 30px,
    #222 60px
  );

  height: 100vh;
}

li {
  position: absolute;
  top: 50%;
  left: 50%;

  display: grid;
  place-items: center;

  border-radius: 50%;

  width: 3rem;
  aspect-ratio: 1;

  list-style: none;

  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color);
}

.controls {
  position: absolute;
  top: var(--spacing);
  left: var(--spacing);

  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 10px;

  padding: var(--spacing);
  border-radius: 20px;

  background-color: #111;
  color: var(--text-color);
  font-size: 1.3rem;

  box-shadow: 4px 4px 4px 4px #000;

  input {
    width: 200px;
  }

  .value {
    display: inline-block;
    width: 2rem;
  }
}

const elements = document.querySelector("ol");

const updateCustomProperties = () => {
  let index = 1;

  for (element of elements.children) {
    element.style.setProperty("--sibling-index", index);
    index++;
  }

  elements.style.setProperty("--sibling-count", elements.children.length);
};

updateCustomProperties();

const observer = new MutationObserver(updateCustomProperties);
const config = { attributes: false, childList: true, subtree: false };
observer.observe(elements, config);

// Add elements on slider input. For DEMO

const elementsInput = document.querySelector("#elements");
const elementsLabelValue = document.querySelector(
  "label[for='elements'] .value"
);

const createLiElement = (index) => {
  const newElement = document.createElement("li");
  newElement.innerText = index;

  return newElement;
};

elementsInput.addEventListener("input", (event) => {
  const elementsNumber = elements.children.length;
  const targetElementsNumber = parseInt(event.target.value);
  const difference = targetElementsNumber - elementsNumber;

  for (let i = 0; i < Math.abs(difference); i++) {
    // Add one element
    if (difference > 0) {
      const newElement = createLiElement(elementsNumber + i + 1);
      elements.appendChild(newElement);
    }

    // Remove last element
    if (difference < 0) {
      elements.children[elementsNumber - i - 1].remove();
    }
  }

  elementsLabelValue.innerHTML = targetElementsNumber;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.