Checkbox by mscholz-dev

1/* add this to your :root variables */
2.checkbox {
3  --light: rgba(207, 205, 205, 0.425);
4  --primary-color: #8c00ff;
5  --duration: 0.3s;
6  --ease: ease-in-out;
7}
8
9/* hide checkbox */
10.checkbox input[type="checkbox"] {
11  display: none;
12}
13
14.checkbox label {
15  align-items: center;
16  cursor: pointer;
17  display: flex;
18}
19
20.checkbox label span {
21  margin-left: 8px;
22}
23
24.checkbox svg {
25  height: 30px;
26  width: 30px;
27}
28
29/* svg rectangle property */
30.checkbox svg > rect {
31  fill: var(--light);
32  stroke: #8c00ff;
33  /* responsive values */
34  stroke-dasharray: 400%;
35  stroke-dashoffset: 400%;
36  transition: var(--duration) stroke-dashoffset var(--ease);
37}
38
39/* svg check property */
40.checkbox svg path {
41  stroke: var(--primary-color);
42  /* responsive values */
43  stroke-dasharray: 100%;
44  stroke-dashoffset: 100%;
45  transition: var(--duration) stroke-dashoffset var(--ease);
46}
47
48.checkbox input[type="checkbox"]:checked + label svg > rect,
49  .checkbox input[type="checkbox"]:checked + label svg path {
50  stroke-dashoffset: 0;
51}
52