JSFiddle - React, Tailwind, and code Playground
HTML
<div id="lasso">
<svg viewBox="0 0 300 300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="layer1">
<path id="strikeout3"
class="tekst three"
d="M 40.000 200 c 10 -30 20 -90 15 -50 1 -8 -5 60 -5 70 0 -60 -15 -20 0 -20 3 0 0 0 5 0 5 0 30 -75 40 -20 -40 -75 -20 110 2 10 6.600 -30 -4 -7 0 0">
<animate attributeName="stroke-dashoffset"
from="800" to="0" dur="4s" begin="0s"
repeatCount="1" fill="freeze"/>
</path>
</g>
</svg>
</div>
CSS
#lasso {
display: none;
}
#counter {
text-align: center;
width: 150px;
margin: 0 auto auto 0;
padding: 5px;
background: #ddf;
font-size: 1.3em;
}
#number {
font-weight: bold;
display: block;
}
.tekst {
fill: none;
stroke: black;
stroke-width: 2px;
stroke-linecap: round;
}
.three {
stroke-dasharray: 800,800;
}
text {
font-size: 40px;
font-family: stix;
text-anchor: middle;
}
JavaScript
$(document).ready(function() {
var $lasso = $('#lasso'),
animater = $lasso.find('animate')[0],
$counter = $('<div id="counter"> seconds left</div>'),
$number = $('<span id="number">'),
$restart = $('<button id="restart">Restart Timer</button>'),
loops = 5,
loop = loops;
$counter
.prepend($number)
.append($restart)
.prependTo(document.body);
var wait = function(){
$number.text(loop);
if (loop > 0) {
loop--;
} else {
$number.text(0);
loop = loops;
animater.beginElement();
$lasso.show();
return;
}
setTimeout(wait, 1000);
};
var restart = function(){
$lasso.hide();
animater.endElement();
loop = loops;
wait();
};
$restart.click(restart);
restart();
});