1<div class="checkbox-wrapper">
2  <input checked="" type="checkbox">
3  <svg viewBox="0 0 35.6 35.6">
4    <circle class="background" cx="17.8" cy="17.8" r="17.8"></circle>
5    <circle class="stroke" cx="17.8" cy="17.8" r="14.37"></circle>
6    <polyline class="check" points="11.78 18.12 15.55 22.23 25.17 12.87"></polyline>
7  </svg>
8</div>          

 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}