1.checkbox-wrapper:hover .check {
2  stroke-dashoffset: 0;
3}
4
5.checkbox-wrapper {
6  position: relative;
7  display: inline-block;
8  width: 40px;
9  height: 40px;
10}
11
12.checkbox-wrapper .background {
13  fill: rgb(75, 50, 121);
14  transition: ease all 0.6s;
15  -webkit-transition: ease all 0.6s;
16}
17
18.checkbox-wrapper .stroke {
19  fill: none;
20  stroke: #fff;
21  stroke-miterlimit: 10;
22  stroke-width: 2px;
23  stroke-dashoffset: 100;
24  stroke-dasharray: 100;
25  transition: ease all 0.6s;
26  -webkit-transition: ease all 0.6s;
27}
28
29.checkbox-wrapper .check {
30  fill: none;
31  stroke: #fff;
32  stroke-linecap: round;
33  stroke-linejoin: round;
34  stroke-width: 2px;
35  stroke-dashoffset: 22;
36  stroke-dasharray: 22;
37  transition: ease all 0.6s;
38  -webkit-transition: ease all 0.6s;
39}
40
41.checkbox-wrapper input[type=checkbox] {
42  position: absolute;
43  width: 100%;
44  height: 100%;
45  left: 0;
46  top: 0;
47  margin: 0;
48  opacity: 0;
49  -appearance: none;
50  -webkit-appearance: none;
51}
52
53.checkbox-wrapper input[type=checkbox]:hover {
54  cursor: pointer;
55}
56
57.checkbox-wrapper input[type=checkbox]:checked + svg .background {
58  fill: #421c64;
59}
60
61.checkbox-wrapper input[type=checkbox]:checked + svg .stroke {
62  stroke-dashoffset: 0;
63}
64
65.checkbox-wrapper input[type=checkbox]:checked + svg .check {
66  stroke-dashoffset: 0;
67}