Rак сделать из диска более скруглунные и толстые диски как спагетти?

Question

Bvivg @Bvivg

HTML
CSS

Rак сделать из диска более скруглунные и толстые диски как спагетти?

Надо сделать эти линии(протоны электроны) вокруг ядря ввиде как бы не диска а ввиде спаггетти т.е круглыми а не ввиде диска у которого нет центра

:root {
      --color: #7b48cd;
      --animation-duration: 1600;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #000;
    }

    body::before {
      width: 3vh;
      height: 3vh;
      background: var(--color);
      border-radius: 50%;
      box-shadow: 0 0 1vh 1px var(--color);
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: 0.75s;

    }

    svg {
      width: 100%;
      height: 75vh;
    }

    circle {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      fill: none;
      stroke: var(--color);
      stroke-width: 1;
      stroke-dasharray: 310;
      stroke-dashoffset: 310;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-duration: calc(var(--animation-duration) * 1ms);
      transform-origin: center;
      transition: 0.75s;
    }

    @keyframes drawCircle {
      to {
        stroke-dashoffset: -310;
      }
    }

    circle:nth-child(1) {
      transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
      animation-name: drawCircle, rotateCircle1;
    }

    @keyframes rotateCircle1 {
      to {
        transform: rotateX(80deg) rotateY(0deg) rotateZ(360deg);
      }
    }
    circle:nth-child(2) {
      transform: rotateX(75deg) rotateY(45deg) rotateZ(0deg);
      animation-name: drawCircle, rotateCircle2;
      animation-delay: 0.125s;
    }
    @keyframes rotateCircle2 {
      to {
        transform: rotateX(75deg) rotateY(45deg) rotateZ(360deg);
      }
    }
    circle:nth-child(3) {
      transform: rotateX(-75deg) rotateY(45deg) rotateZ(0deg);
      animation-name: drawCircle, rotateCircle3;
      animation-delay: 0.25s;
    }
    @keyframes rotateCircle3 {
      to {
        transform: rotateX(-75deg) rotateY(45deg) rotateZ(360deg);
      }
    }

<body>
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="49" />
    <circle cx="50" cy="50" r="49" />
    <circle cx="50" cy="50" r="49" />
  </svg>
</body>