CSS
body {
background-image: linear-gradient(#b8c8d8 5vmin, #c8d8e8 0 calc(5vmin + 1px), #d8e8f8);
display: grid;
height: 100vh;
justify-content: center;
margin: 0;
overflow: hidden;
width: 100%;
}
#on {
background-image:
radial-gradient(ellipse 23% 4% at 50% 50%,#eee 50%, transparent 0),
radial-gradient(circle at 50% 100%, white 20%, transparent 0),
linear-gradient(white 70%, #ccc);
background-position: center top;
background-repeat: no-repeat;
background-size:
100% 100%,
50% 50%,
2.5% 50%;
display: block;
font-size: 0;
height: 60vmin;
perspective: 1200px;
width: 60vmin;
}
@keyframes spin {
to {
transform: rotate3d(1, 0, 0, -75deg) rotate(390deg);
}
}
#on::before {
--color: #b53;
--color-dark: #a42;
content: "";
background-image:
linear-gradient(#0000 44%, black 0 56%, #0000 0),
linear-gradient(to right, #0000 44%, black 0 56%, #0000 0),
radial-gradient(circle at 50% 23%, black 6%, #0000 0),
radial-gradient(circle at 50% 77%, black 6%, #0000 0),
radial-gradient(circle at 23% 50%, black 6%, #0000 0),
radial-gradient(circle at 77% 50%, black 6%, #0000 0),
conic-gradient(at 50% 150%, var(--color) 0 8deg, #0000 0 352deg, var(--color-dark) 0, var(--color) 360deg),
conic-gradient(at 50% -50%, #0000 0 172deg, var(--color-dark) 0, var(--color) 180deg 188deg, #0000 0),
conic-gradient(at -50% 50%, #0000 0 82deg, var(--color-dark) 0, var(--color) 90deg 98deg, #0000 0),
conic-gradient(at 150% 50%, #0000 0 262deg, var(--color-dark) 0, var(--color) 270deg 278deg, #0000 0),
radial-gradient(black 20%, #0000 0);
background-position: center center, center center, center center, center center, center center, center center, 50% 0%, 50% 100%, 100% 50%, 0% 50%, center center;
background-repeat: no-repeat;
background-size: 25% 25%, 25% 25%, 42% 42%, 42% 42%, 42% 42%, 42% 42%, 42% 42%, 42% 42%, 42% 42%, 42% 42%, 42% 42%;
border-radius: 50%;
display: block;
...