body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #212121;
}

.container {
    cursor: pointer;
}

.container input {
    display: none;
}

.container svg {
    overflow: visible;
}

.path {
    fill: none;
    stroke: white;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease;
    stroke-dasharray: 241 9999999;
    stroke-dashoffset: 0;
}

.container input:checked~svg .path {
    stroke-dasharray: 70.5096664428711 9999999;
    stroke-dashoffset: -262.2723388671875;
}