Аранжировка элементов в искаженной форме круга с помощью CSS или JS ⇐ CSS

[Anonymous]

Я пытаюсь разместить элементы в искаженную форму круга/контейнер, причем основной элемент помещается в нижний центр круга, а все остальные масштабируются дальше позади него.
Пожалуйста, смотрите это изображение для справки - цифры представляют шкалу элементов.
< /p>
Я хочу иметь возможность динамически вставлять новые элементы в контейнер, чтобы они автоматически следили за перекошенной формой. < /p>
Вот грубый обзор моего текущего кода - https://codepen.io/ocixcrom/pen/mygrjrk
Я ищу творческое решение только для CSS или JS. Любая помощь будет оценена! = "Snippet-Code">

Код: Выделить всё

body {
min-height: 100vh;
background-color: #1a1c21;
display: flex;
align-items: center;
justify-content: center;
padding: 6rem 2rem;
}

.path {
width: 400px;
height: 400px;
position: relative;
}

.item {
--c: calc(1 / var(--itotal) * 100);
width: 3rem;
height: 3rem;
position: absolute;
top: 0;
left: 0;
offset-path: ellipse(80% 40% at 25% 25%);
offset-distance: calc(var(--i) * (var(--c) * 1%));
offset-rotate: 0deg;
opacity: 1;
background: red;
}< /code>

1
2
3
4
5
6
7
8
9
10
11

code на кодепен: https://codepen.io/ Ocixcrom/pen/yybwwym
Это то, что я пытался сделать, но у меня есть еще 2 проблемы:

• У меня трудности размещать первый элемент (синий коробку) в нижний центр формы. По часовой стрелке вместо часовой стрелки. Таким образом, в основном, начиная с нижнего центра и иду против часовой стрелки. Это кажется легким вопросом, но я потратил более 3 часов, пытаясь правильно их разместить.

Подробнее здесь: https://stackoverflow.com/questions/794 ... -css-or-js