Sarang labah-labah

Prt Scr

Demo

HTML view

<div class="labu">
<div class="srg">
  <span style="--idx: 0"></span>
  <span style="--idx: 1"></span>
  <span style="--idx: 2"></span>
  <span style="--idx: 3"></span>
  <span style="--idx: 4"></span>
  <span style="--idx: 5"></span>
  <span style="--idx: 6"></span>
  <span style="--idx: 7"></span>
  <span style="--idx: 8"></span>
  <span style="--idx: 9"></span>
  <span style="--idx: 10"></span>
  <span style="--idx: 11"></span>
</div>
</div>
<style>
.labu * { margin: 0; padding: 0; box-sizing: border-box }
.labu { 
    background-color: #1D1E22;
    background-image: radial-gradient(#42093b, #1D1E22);
    height: 80vh;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.srg {
  --size: 80vmin;
  --segments: 12;
  --line-color: rgb(255 255 255 / .5);
  --line-size: 0.25vmin;
  --line-spacing: 4.75vmin;
  filter: drop-shadow(0 0 2px black);
  width: var(--size);
  aspect-ratio: 1;
  display: grid;
}
.srg > span {
  --segment-angle: calc(360deg / var(--segments));
  grid-area: 1/1;
  display: grid;
  transform: rotate(calc(var(--segment-angle) * var(--idx)));
  border-radius: 50%;
}
.srg > span::after {
  grid-area: 1/1;
  content: "";
  width: var(--line-size);
  justify-self: center;
  background-color: var(--line-color);
  --mask-image: linear-gradient(black 50%, transparent 50%);
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
  transform: rotate(calc(var(--segment-angle) / -2)) scaleY(5);
}
.srg > span::before{
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  width: 100%;
  --stop1: calc(var(--line-spacing));
  --stop2: calc(var(--stop1) + var(--line-size));
  background-image: repeating-radial-gradient(
    circle at center -25%,
    transparent 0 var(--stop1), 
    var(--line-color) var(--stop1) var(--stop2)
  );
  --mask-image: conic-gradient(
    black 0 calc(var(--segment-angle) / 2),
    transparent calc(var(--segment-angle) / 2) calc(360deg - var(--segment-angle) / 2),
    black calc(360deg - var(--segment-angle) / 2) 360deg
  );
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
}
  </style> 

Demo dipetik dari codepen/MarkBoots