1 
 2<div class="checkbox-wrapper">
 3  <input checked="" type="checkbox" class="check" id="check1-61">
 4  <label for="check1-61" class="label">
 5    <svg width="45" height="45" viewBox="0 0 95 95">
 6      <rect x="30" y="20" width="50" height="50" stroke="black" fill="none"></rect>
 7      <g transform="translate(0,-952.36222)">
 8        <path d="m 56,963 c -102,122 6,9 7,9 17,-5 -66,69 -38,52 122,-77 -7,14 18,4 29,-11 45,-43 23,-4" stroke="black" stroke-width="3" fill="none" class="path1"></path>
 9      </g>
10    </svg>
11    <span>Checkbox</span>
12  </label>
13</div>          

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