Надо сделать эти линии(протоны электроны) вокруг ядря ввиде как бы не диска а ввиде спаггетти т.е круглыми а не ввиде диска у которого нет центра
: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>
Средний
Средний
