<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="12" value="6">
</form>
/* Sibling Index and Count */

li:nth-child(1) {
  --sibling-index: 1;

  ol:has(> &:last-child) {
    --sibling-count: 1;
  }
}

li:nth-child(2) {
  --sibling-index: 2;

  ol:has(> &:last-child) {
    --sibling-count: 2;
  }
}

li:nth-child(3) {
  --sibling-index: 3;

  ol:has(> &:last-child) {
    --sibling-count: 3;
  }
}
li:nth-child(4) {
  --sibling-index: 4;

  ol:has(> &:last-child) {
    --sibling-count: 4;
  }
}
li:nth-child(5) {
  --sibling-index: 5;

  ol:has(> &:last-child) {
    --sibling-count: 5;
  }
}
li:nth-child(6) {
  --sibling-index: 6;

  ol:has(> &:last-child) {
    --sibling-count: 6;
  }
}
li:nth-child(7) {
  --sibling-index: 7;

  ol:has(> &:last-child) {
    --sibling-count: 7;
  }
}

li:nth-child(8) {
  --sibling-index: 8;

  ol:has(> &:last-child) {
    --sibling-count: 8;
  }
}

li:nth-child(9) {
  --sibling-index: 9;

  ol:has(> &:last-child) {
    --sibling-count: 9;
  }
}

li:nth-child(10) {
  --sibling-index: 10;

  ol:has(> &:last-child) {
    --sibling-count: 10;
  }
}

li:nth-child(11) {
  --sibling-index: 11;

  ol:has(> &:last-child) {
    --sibling-count: 11;
  }
}

li:nth-child(12) {
  --sibling-index: 12;

  ol:has(> &:last-child) {
    --sibling-count: 12;
  }
}

/* Styles Based on Index and Count */

@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: 8rem;
  --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;

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

const elements = document.querySelector("ol");
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++) {
    if (difference > 0) {
      const newElement = createLiElement(elementsNumber + i + 1);
      elements.appendChild(newElement);
    }

    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.