Как сделать круг с помощью css и js

Question

Как мне можно сделать подобный круг с помощью css+js или же кто то знает библиотеку для этого?

Answer 1

Сам круг в CSS можно как-то таким образом сделать, но внутренние элементы (серые и розовый), я думаю, лучше как SVG вставлять, т.к. закругленные бордеры делать - возни много. Либо все вместе как SVG вставлять.

body {
  background: black;
}

.circle {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.circle__center {
  position: absolute;
  top: calc(50% - 2px);
  left: calc(50% - 2px);
  z-index: 1000;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: black;
}

.layer1 {
  width: 100%;
  height: 100%;
  position: relative;
}

.layer2 {
  background: black;
  height: 375px;
  width: 375px;
  position: absolute;
  z-index: 200;
  border-radius: 50%;
  top: calc(50% - 187.5px);
  left: calc(50% - 187.5px);
}

.layer2__wrapper {
  height: 370px;
  width: 370px;
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  top: calc(50% - 185px);
  left: calc(50% - 185px);
}

.layer3 {
  background: black;
  height: 250px;
  width: 250px;
  position: absolute;
  z-index: 300;
  border-radius: 50%;
  top: calc(50% - 125px);
  left: calc(50% - 125px);
}

.layer3__wrapper {
  height: 245px;
  width: 245px;
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  top: calc(50% - 122.5px);
  left: calc(50% - 122.5px);
}

.layer4 {
  background: black;
  height: 125px;
  width: 125px;
  position: absolute;
  z-index: 400;
  border-radius: 50%;
  top: calc(50% - 62.5px);
  left: calc(50% - 62.5px);
}

.layer4__wrapper {
  height: 120px;
  width: 120px;
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
}

.item {
  width: 100%;
  height: 100%;
  transform-origin: bottom right;
  position: absolute;
  background: gray;
  bottom: 50%;
  right: 50%;
}

.item:hover {
  background: purple;
  cursor: pointer;
}

.item:nth-child(1) {
  transform: skew(38.57142857deg, 6.428571429deg);
}

.item:nth-child(2) {
  transform: skew(-12.8571428deg, 57.85714286deg);
}

.item:nth-child(3) {
  transform: rotate(90deg) skew(25.71428571deg, 19.28571429deg);
}

.item:nth-child(4) {
  transform: rotate(180deg) skew(64.28571429deg, -19.28571429deg);
}

.item:nth-child(5) {
  transform: rotate(180deg) skew(12.85714286deg, 32.14285714deg);
}

.item:nth-child(6) {
  transform: rotate(270deg) skew(51.42857143deg, -6.428571429deg);
}

.item:nth-child(7) {
  transform: rotate(270deg) skew(0, 45deg);
}

<div class="circle">
  <div class="layer1">
    <div class="layer1__item item"></div>
    <div class="layer1__item item"></div>
    <div class="layer1__item item"></div>
    <div class="layer1__item item"></div>
    <div class="layer1__item item"></div>
    <div class="layer1__item item"></div>
    <div class="layer1__item item"></div>
  </div>
  <div class="layer2">
    <div class="layer2__wrapper">
      <div class="layer2__item item"></div>
      <div class="layer2__item item"></div>
      <div class="layer2__item item"></div>
      <div class="layer2__item item"></div>
      <div class="layer2__item item"></div>
      <div class="layer2__item item"></div>
      <div class="layer2__item item"></div>
    </div>
  </div>
  <div class="layer3">
    <div class="layer3__wrapper">
      <div class="layer3__item item"></div>
      <div class="layer3__item item"></div>
      <div class="layer3__item item"></div>
      <div class="layer3__item item"></div>
      <div class="layer3__item item"></div>
      <div class="layer3__item item"></div>
      <div class="layer3__item item"></div>
    </div>
  </div>
  <div class="layer4">
    <div class="layer4__wrapper">
      <div class="layer4__item item"></div>
      <div class="layer4__item item"></div>
      <div class="layer4__item item"></div>
      <div class="layer4__item item"></div>
      <div class="layer4__item item"></div>
      <div class="layer4__item item"></div>
      <div class="layer4__item item"></div>
    </div>
  </div>
  <div class="circle__center"></div>
</div>

БЛОГ НА HUSL

Как сделать круг с помощью css и js

Ответы (1 шт):