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="8,50.6 41.8,80 93,16.3 "/></svg> Cheсk my
</label>
<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="8,50.6 41.8,80 93,16.3 "/></svg> Cheсk my
</label>
<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="8,50.6 41.8,80 93,16.3 "/></svg> Cheсk my
</label>
<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="8,50.6 41.8,80 93,16.3 "/></svg> Cheсk my
</label>

CSS

label.checkbox {
    cursor: pointer;
    user-select: none;
	display: flex;
	flex-direction: row;
	align-items: center;
}

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

.checkbox_svg {
    width: 30px;
	margin-right: 10px;
}

.checkbox_line {
    fill: none;
    stroke: #F00;
    stroke-width: 20;
    stroke-miterlimit: 10;
    stroke-dasharray: 0, 154;
}
.checkbox.nochek .checkbox_svg .checkbox_line {
    animation: nochecked 0.2s ease 1 forwards;
}
.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;
    }
}

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

JavaScript

(function($){
	$(document).on('input', 'label.checkbox [type=checkbox]', function(e){
		
		var $this = $(e.currentTarget),
			$label = $this.closest('label');
		$this.prop('checked') ? $label.removeClass('nochek') : $label.addClass('nochek');
	})
}(jQuery));