1.radio-input {
2  --c: rgb(74, 156, 233);
3}
4
5.radio-input label {
6  position: relative;
7  display: inline-block;
8  border-radius: 99999px;
9  appearance: unset;
10  margin: 8px;
11  width: 3em;
12  height: 3em;
13}
14
15.radio-input input {
16  position: absolute;
17  border-radius: 99999px;
18  appearance: unset;
19  inset: 0.75em;
20  margin: 0;
21  transition: background-color 0.5s;
22}
23
24.radio-input input:checked {
25  background-color: var(--c);
26  filter: drop-shadow(0 0 10px var(--c));
27}
28
29.radio-input svg {
30  position: absolute;
31  pointer-events: none;
32  overflow: visible;
33  filter: drop-shadow(0 0 4px var(--c));
34}
35
36.radio-input svg .hi {
37  width: 3em;
38  height: 3em;
39  rx: 1.5em;
40  fill: transparent;
41  stroke: var(--c);
42  stroke-width: 0.25em;
43  stroke-dasharray: 70 30;
44  animation: strokeWee 32s linear infinite;
45}
46
47@keyframes strokeWee {
48  0% {
49    stroke-dashoffset: 0;
50  }
51
52  100% {
53    stroke-dashoffset: 1000;
54  }
55}