Checkbox by SelfMadeSystem

1.container {
2  cursor: pointer;
3}
4
5.container input {
6  display: none;
7}
8
9.container svg {
10  overflow: visible;
11}
12
13.path {
14  fill: none;
15  stroke: white;
16  stroke-width: 6;
17  stroke-linecap: round;
18  stroke-linejoin: round;
19  transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease;
20  stroke-dasharray: 241 9999999;
21  stroke-dashoffset: 0;
22}
23
24.container input:checked ~ svg .path {
25  stroke-dasharray: 70.5096664428711 9999999;
26  stroke-dashoffset: -262.2723388671875;
27}
28