JSFiddle - React, Tailwind, and code Playground

by ProjectSoft

HTML

<label class='checkbox'>
	<input type="checkbox" name="check">
	<svg version="1.1" class="checkbox_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><polyline class="checkbox_line" points="3.5,51.5 40.5,82.5 96.7,15.3 "/></svg> Chek my
</label>

CSS

label.checkbox {
    cursor: pointer;
    user-select: none;
}

label.checkbox [type=checkbox] {
    display: none;
}

.checkbox_svg {
    width: 40px;
}

.checkbox_line {
    fill: none;
    stroke: #F00;
    stroke-width: 20;
    stroke-miterlimit: 10;
    stroke-dasharray: 0, 154;
}

.checkbox [type=checkbox]:checked + .checkbox_svg .checkbox_line {
    animation: checked 0.4s ease 1 forwards;
}

@keyframes checked {
    from {
        stroke-dasharray: 0, 154;
    }
    to {
        stroke-dasharray: 140, 154;
    }
}