SOURCE

<label class="checkbox">
    <input type="checkbox" checked />
    <svg viewBox="0 0 21 18">
        <defs>
            <mask id="tick">
                <use class="tick" xlink:href="#tick-path" stroke="white" />
            </mask>
        </defs>
        <use class="tick" xlink:href="#tick-path" stroke="currentColor" />
        <use class="rect" xlink:href="#rect-path-small" fill="currentColor" stroke="currentColor" />
        <use xlink:href="#rect-path" fill="white" mask="url(#tick)" />
    </svg>
    <svg class="lines" viewBox="0 0 11 11">
        <path d="M5.88086 5.89441L9.53504 4.26746" />
        <path d="M5.5274 8.78838L9.45391 9.55161" />
        <path d="M3.49371 4.22065L5.55387 0.79198" />
    </svg>
</label>

<label class="checkbox">
    <input type="checkbox" />
    <svg viewBox="0 0 21 18">
        <defs>
            <mask id="tick1">
                <use class="tick" xlink:href="#tick-path" stroke="white" />
            </mask>
        </defs>
        <use class="tick" xlink:href="#tick-path" stroke="currentColor" />
        <use class="rect" xlink:href="#rect-path-small" fill="currentColor" stroke="currentColor" />
        <use xlink:href="#rect-path" fill="white" mask="url(#tick1)" />
    </svg>
    <svg class="lines" viewBox="0 0 11 11">
        <path d="M5.88086 5.89441L9.53504 4.26746" />
        <path d="M5.5274 8.78838L9.45391 9.55161" />
        <path d="M3.49371 4.22065L5.55387 0.79198" />
    </svg>
</label>

<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
    <symbol id="tick-path" viewBox="0 0 21 18" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.22003 7.26C5.72003 7.76 7.57 9.7 8.67 11.45C12.2 6.05 15.65 3.5 19.19 1.69" fill="none" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" />
    </symbol>
    <symbol id="rect-path" viewBox="0 0 21 18" xmlns="http://www.w3.org/2000/svg">
        <path d="M18 9C18 10.4464 17.9036 11.8929 17.7589 13.1464C17.5179 15.6054 15.6054 17.5179 13.1625 17.7589C11.8929 17.9036 10.4464 18 9 18C7.55357 18 6.10714 17.9036 4.85357 17.7589C2.39464 17.5179 0.498214 15.6054 0.241071 13.1464C0.0964286 11.8929 0 10.4464 0 9C0 7.55357 0.0964286 6.10714 0.241071 4.8375C0.498214 2.39464 2.39464 0.482143 4.85357 0.241071C6.10714 0.0964286 7.55357 0 9 0C10.4464 0 11.8929 0.0964286 13.1625 0.241071C15.6054 0.482143 17.5179 2.39464 17.7589 4.8375C17.9036 6.10714 18 7.55357 18 9Z" />
    </symbol>
    <symbol id="rect-path-small" viewBox="0 0 21 18" xmlns="http://www.w3.org/2000/svg">
        <path d="M9 0.75C7.4706 0.75 5.94938 0.883374 4.72639 1.03209C2.78094 1.26866 1.26866 2.78094 1.03209 4.72639C0.883374 5.94938 0.75 7.4706 0.75 9C0.75 10.5294 0.883374 12.0506 1.03209 13.2736C1.26866 15.2191 2.78093 16.7313 4.72639 16.9679C5.94937 17.1166 7.4706 17.25 9 17.25C10.5294 17.25 12.0506 17.1166 13.2736 16.9679C15.2191 16.7313 16.7313 15.2191 16.9679 13.2736C17.1166 12.0506 17.25 10.5294 17.25 9C17.25 7.4706 17.1166 5.94937 16.9679 4.72639C16.7313 2.78094 15.2191 1.26866 13.2736 1.03209C12.0506 0.883374 10.5294 0.75 9 0.75Z" stroke-width="1.5" />
    </symbol>
</svg>

.checkbox {
    --border: #bbbbc1;
    --border-hover: #9898a3;
    --border-active: #6E7BF2;
    display: block;
    width: 18px;
    height: 18px;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    svg {
        display: block;
        position: absolute;
    }
    input {
        display: block;
        outline: none;
        border: none;
        background: none;
        padding: 0;
        margin: 0;
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        & + svg {
            width: 21px;
            height: 18px;
            left: 0;
            top: 0;
            color: var(--color, var(--border));
            transition: color .25s linear;
            .tick {
                stroke-dasharray: 20;
                stroke-dashoffset: var(--stroke-dashoffset, 20);
                transition: stroke-dashoffset .2s;
            }
            .rect {
                fill-opacity: var(--fill-opacity, 0);
                transition: fill-opacity .25s linear;
            }
            & + svg {
                width: 11px;
                height: 11px;
                fill: none;
                stroke: var(--border-active);
                stroke-width: 1.25;
                stroke-linecap: round;
                top: -6px;
                right: -10px;
                stroke-dasharray: 4.5px;
                stroke-dashoffset: 13.5px;
                animation: var(--animation, none) .2s ease .175s;
            }
        }
        &:checked {
            & + svg {
                --color: var(--border-active);
                --stroke-dashoffset: 0;
                --fill-opacity: 1;
                & + svg {
                    --animation: check;
                }
            }
        }
    }
    &:hover {
        input {
            &:not(:checked) {
                & + svg {
                    --color: var(--border-hover);
                }
            }
        }
    }
}

@keyframes check {
    100% {
        stroke-dashoffset: 4.5px;
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .checkbox {
        margin: 0 24px;
    }
}