Radio by SelfMadeSystem

1.rating {
2  display: flex;
3  flex-direction: row-reverse;
4  gap: 0.3rem;
5  --stroke: #666;
6  --fill: #ffc73a;
7}
8
9.rating input {
10  appearance: unset;
11}
12
13.rating label {
14  cursor: pointer;
15}
16
17.rating svg {
18  width: 2rem;
19  height: 2rem;
20  overflow: visible;
21  fill: transparent;
22  stroke: var(--stroke);
23  stroke-linejoin: bevel;
24  stroke-dasharray: 12;
25  animation: idle 4s linear infinite;
26  transition: stroke 0.2s, fill 0.5s;
27}
28
29@keyframes idle {
30  from {
31    stroke-dashoffset: 24;
32  }
33}
34
35.rating label:hover svg {
36  stroke: var(--fill);
37}
38
39.rating input:checked ~ label svg {
40  transition: 0s;
41  animation: idle 4s linear infinite, yippee 0.75s backwards;
42  fill: var(--fill);
43  stroke: var(--fill);
44  stroke-opacity: 0;
45  stroke-dasharray: 0;
46  stroke-linejoin: miter;
47  stroke-width: 8px;
48}
49
50@keyframes yippee {
51  0% {
52    transform: scale(1);
53    fill: var(--fill);
54    fill-opacity: 0;
55    stroke-opacity: 1;
56    stroke: var(--stroke);
57    stroke-dasharray: 10;
58    stroke-width: 1px;
59    stroke-linejoin: bevel;
60  }
61
62  30% {
63    transform: scale(0);
64    fill: var(--fill);
65    fill-opacity: 0;
66    stroke-opacity: 1;
67    stroke: var(--stroke);
68    stroke-dasharray: 10;
69    stroke-width: 1px;
70    stroke-linejoin: bevel;
71  }
72
73  30.1% {
74    stroke: var(--fill);
75    stroke-dasharray: 0;
76    stroke-linejoin: miter;
77    stroke-width: 8px;
78  }
79
80  60% {
81    transform: scale(1.2);
82    fill: var(--fill);
83  }
84}
85