1.checkbox-wrapper input[type="checkbox"] {
2  visibility: hidden;
3  display: none;
4}
5
6.checkbox-wrapper *,
7  .checkbox-wrapper ::after,
8  .checkbox-wrapper ::before {
9  box-sizing: border-box;
10}
11
12.checkbox-wrapper {
13  position: relative;
14  display: block;
15  overflow: hidden;
16}
17
18.checkbox-wrapper .check {
19  width: 50px;
20  height: 50px;
21  position: absolute;
22  opacity: 0;
23}
24
25.checkbox-wrapper .label svg {
26  vertical-align: middle;
27}
28
29.checkbox-wrapper .path1 {
30  stroke-dasharray: 400;
31  stroke-dashoffset: 400;
32  transition: .5s stroke-dashoffset;
33  opacity: 0;
34}
35
36.checkbox-wrapper .check:checked + label svg g path {
37  stroke-dashoffset: 0;
38  opacity: 1;
39}