.toggle { /* <1.0 = fast 1.0 = regular speed >1.0 = slow */ --speed: 0.5; --night: 0px; --circle: 0.14em; --pos-y-ray1: 10%; --pos-x-ray2: 0.65em; --pos-y-ray2: 0.175em; --pos-x-ray3: 0.725em; --pos-x-ray4: 0.65em; --pos-y-ray4: 0.62em; --pos-y-ray5: 90%; --pos-x-ray6: 0.225em; --pos-y-ray6: 0.62em; --pos-x-ray7: 0.125em; --pos-x-ray8: 0.225em; --pos-y-ray8: 0.175em; --width-star1: 0px; --width-star2: 0px; --width-star3: 0px; appearance: none; position: relative; font-size: 1em; width: 2em; aspect-ratio: 2; border: max(1px, 0.05em) solid; border-radius: 2em; background: /* sun */ radial-gradient(circle at 0.5em 50%, #0000 var(--circle), #000 0 calc(var(--circle) + 0.045em), #0000 0), radial-gradient(70% 50%, #000 99%, #0000) 0.475em var(--pos-y-ray1) / 0.04em 0.15em, linear-gradient(-45deg, #0000 38%, #000 0 62%, #0000 0) var(--pos-x-ray2) var(--pos-y-ray2) / 0.12em 0.12em, radial-gradient(50% 70%, #000 99%, #0000) var(--pos-x-ray3) 50% / 0.15em 0.04em, linear-gradient(45deg, #0000 38%, #000 0 62%, #0000 0) var(--pos-x-ray4) var(--pos-y-ray4) / 0.12em 0.12em, radial-gradient(70% 50%, #000 99%, #0000) 0.475em var(--pos-y-ray5) / 0.04em 0.15em, linear-gradient(-45deg, #0000 38%, #000 0 62%, #0000 0) var(--pos-x-ray6) var(--pos-y-ray6) / 0.12em 0.12em, radial-gradient(50% 70%, #000 99%, #0000) var(--pos-x-ray7) 50% / 0.15em 0.04em, linear-gradient(45deg, #0000 38%, #000 0 62%, #0000 0) var(--pos-x-ray8) var(--pos-y-ray8) / 0.12em 0.12em, /* moon */ radial-gradient(farthest-side circle at 40% 50%, #0000 0.3em, #fff 0 0.33em, #0000 0) 95% 50% / 0.7em 0.7em, radial-gradient(farthest-side circle at 29% 50%, #0000 0.19em, #fff 0 0.22em, #0000 0) 81% 50% / 0.5em 0.5em, radial-gradient(circle at 20% 30%, #fff var(--width-star1), #0000 0), radial-gradient(circle at 30% 70%, #fff var(--width-star2), #0000 0), radial-gradient(circle at 45% 45%, #fff var(--width-star3), #0000 0), /* extra */ radial-gradient(circle at 0.5em 50%, #000 var(--night), #0000 0) ; background-repeat: no-repeat; transition: --night calc(var(--speed) * 0.5s), --circle calc(var(--speed) * 0.25s), --pos-y-ray1 calc(var(--speed) * 0.25s) , --pos-x-ray2 calc(var(--speed) * 0.45s), --pos-y-ray2 calc(var(--speed) * 0.45s), --pos-x-ray3 calc(var(--speed) * 0.6s), --pos-x-ray4 calc(var(--speed) * 0.45s), --pos-y-ray4 calc(var(--speed) * 0.45s), --pos-y-ray5 calc(var(--speed) * 0.25s), --pos-x-ray6 calc(var(--speed) * 0.45s), --pos-y-ray6 calc(var(--speed) * 0.45s), --pos-x-ray7 calc(var(--speed) * 0.25s), --pos-x-ray8 calc(var(--speed) * 0.45s), --pos-y-ray8 calc(var(--speed) * 0.45s), --width-star1 calc(var(--speed) * 0.5s), --width-star2 calc(var(--speed) * 0.5s), --width-star3 calc(var(--speed) * 0.5s) ; transition-delay: calc(var(--speed) * 0s), calc(var(--speed) * 0.4s), calc(var(--speed) * 0.5s), calc(var(--speed) * 0.6s), calc(var(--speed) * 0.6s), calc(var(--speed) * 0.7s), calc(var(--speed) * 0.9s), calc(var(--speed) * 0.9s), calc(var(--speed) * 1.2s), calc(var(--speed) * 1.25s), calc(var(--speed) * 1.25s), calc(var(--speed) * 1.55s), calc(var(--speed) * 1.65s), calc(var(--speed) * 1.65s), calc(var(--speed) * 0s), calc(var(--speed) * 0.05s), calc(var(--speed) * 0.1s); &::before { content: ""; position: absolute; top: 50%; left: 25%; border-radius: 50%; border: 0.2em solid #0000; transform: translate(-50%, -50%); } &:checked { --night: 2em; --circle: 0em; --pos-y-ray1: -20%; --pos-x-ray2: 1.15em; --pos-y-ray2: -0.225em; --pos-x-ray3: 2em; --pos-x-ray4: 1.15em; --pos-y-ray4: 1.12em; --pos-y-ray5: 120%; --pos-x-ray6: -0.275em; --pos-y-ray6: 1.12em; --pos-x-ray7: -0.25em; --pos-x-ray8: -0.275em; --pos-y-ray8: -0.225em; --width-star1: 0.04em; --width-star2: 0.04em; --width-star3: 0.04em; transition-delay: calc(var(--speed) * 1.5s), calc(var(--speed) * 1.35s), calc(var(--speed) * 0.0s), calc(var(--speed) * 0.1s), calc(var(--speed) * 0.1s), calc(var(--speed) * 0.2s), calc(var(--speed) * 0.4s), calc(var(--speed) * 0.4s), calc(var(--speed) * 0.6s), calc(var(--speed) * 0.75s), calc(var(--speed) * 0.75s), calc(var(--speed) * 0.9s), calc(var(--speed) * 1.1s), calc(var(--speed) * 1.1s), calc(var(--speed) * 1.7s), calc(var(--speed) * 1.9s), calc(var(--speed) * 1.8s); &::before { left: 75%; } } &[disabled] { opacity: 0.25; } } @media print { .toggle { &, &::before, &::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } } @media (prefers-reduced-motion) { .toggle { &, &::before, &::after { transition: none !important; animation: none !important; } } } @property --circle { syntax: ''; initial-value: 0px; inherits: false; } @property --night { syntax: ''; initial-value: 0px; inherits: false; } @property --pos-y-ray1 { syntax: ''; initial-value: 10%; inherits: false; } @property --pos-x-ray2 { syntax: ''; initial-value: 1px; inherits: false; } @property --pos-y-ray2 { syntax: ''; initial-value: 1px; inherits: false; } @property --pos-x-ray3 { syntax: ''; initial-value: 1px; inherits: false; } @property --pos-x-ray4 { syntax: ''; initial-value: 1px; inherits: false; } @property --pos-y-ray4 { syntax: ''; initial-value: 1px; inherits: false; } @property --pos-y-ray5 { syntax: ''; initial-value: 90%; inherits: false; } @property --pos-x-ray6 { syntax: ''; initial-value: 1px; inherits: false; } @property --pos-y-ray6 { syntax: ''; initial-value: 1px; inherits: false; } @property --pos-x-ray7 { syntax: ''; initial-value: 1px; inherits: false; } @property --pos-x-ray8 { syntax: ''; initial-value: 1px; inherits: false; } @property --pos-y-ray8 { syntax: ''; initial-value: 1px; inherits: false; } @property --width-star1 { syntax: ''; initial-value: 0px; inherits: false; } @property --width-star2 { syntax: ''; initial-value: 0px; inherits: false; } @property --width-star3 { syntax: ''; initial-value: 0px; inherits: false; } /* demo only */ body { display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; margin: 0; min-height: 100vh; font-size: 12vmin; abackground: #123; }