JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<button class="animate">Рисауалке нашальника</button>
<button class="clear">Очистить</button>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 361 267.3" xml:space="preserve">
<path class="line" d="M26.2,259.8
	C13.9,236,7,209.1,7,180.5C7,84.7,84.7,7,180.5,7S354,84.7,354,180.5c0,28.8-7,55.9-19.4,79.8"/>
<path class="line1" d="M26.2,259.8
	C13.9,236,7,209.1,7,180.5C7,84.7,84.7,7,180.5,7S354,84.7,354,180.5c0,28.8-7,55.9-19.4,79.8"/>

</svg>

CSS

svg{
  display:block;
  margin-top:20px;
}
.line{
  fill:none;
  stroke:#00b2ac;
  stroke-width:15;
  stroke-linecap:round;
 }
 
.line1{
  fill:none;
  stroke:#ff5a5a;
  stroke-width:15;
  stroke-linecap:round;
 }
 .fill{
   stroke-dashoffset:100;
 }

JavaScript

var path = document.querySelector('.line');
var length = path.getTotalLength();
var path1 = document.querySelector('.line1');
var length1 = path1.getTotalLength();
clear();
function animate(){
	clear();
  path.getBoundingClientRect()
  path.style.transition = "all 1s ease-in-out";
  path.style.strokeDashoffset = "0";
  //2
  setTimeout(function(){
 		path1.getBoundingClientRect()
    path1.style.transition = "all 1s ease-in-out";
    path1.style.strokeDashoffset = "0"; 
  },2000);
	setTimeout(function(){
 		path1.style.strokeDashoffset = length1*0.6; 
  },3000);
  setTimeout(function(){
    path.style.strokeDashoffset = length*0.3;
  }, 1000);
}
function clear(){
	path.style.transition = "none";
  path.style.strokeDasharray = length;
	path.style.strokeDashoffset = length;
  //2
  path1.style.transition = "none";
  path1.style.strokeDasharray = length1;
	path1.style.strokeDashoffset = length1;


}
document.querySelector(".animate").onclick = animate;
document.querySelector(".clear").onclick = clear;