<div class="wrapper">
  <div class="svg1">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304.39 284.28"><path id="path" d="M243.72,155.21c-2.35,33.19-4.36,64.37-6.71,90.85h64v38.22H3.35V246.06H64c4.69-26.48,9.72-58,14.08-90.85H0V115.66H83.14c3.35-26.15,6.37-52.3,8.38-76.77H30.17V0H251.76c-1.34,36.21-3.35,76.43-5.7,115.66h58.33v39.55Zm-48.61,90.85c2.68-26.48,5.36-58,7.71-90.85H118.34c-4.36,33.19-8.72,64.7-13.08,90.85ZM132.42,38.89c-2.68,24.8-5.7,51-8.72,76.77h81.46c1.68-25.82,2.69-52,3.69-76.77Z"/></svg>
  </div>
  <div class="svg2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304.39 284.28"><path id="path" d="M243.72,155.21c-2.35,33.19-4.36,64.37-6.71,90.85h64v38.22H3.35V246.06H64c4.69-26.48,9.72-58,14.08-90.85H0V115.66H83.14c3.35-26.15,6.37-52.3,8.38-76.77H30.17V0H251.76c-1.34,36.21-3.35,76.43-5.7,115.66h58.33v39.55Zm-48.61,90.85c2.68-26.48,5.36-58,7.71-90.85H118.34c-4.36,33.19-8.72,64.7-13.08,90.85ZM132.42,38.89c-2.68,24.8-5.7,51-8.72,76.77h81.46c1.68-25.82,2.69-52,3.69-76.77Z"/></svg>
  </div>
  <div class="svg3">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304.39 284.28"><path id="path" d="M243.72,155.21c-2.35,33.19-4.36,64.37-6.71,90.85h64v38.22H3.35V246.06H64c4.69-26.48,9.72-58,14.08-90.85H0V115.66H83.14c3.35-26.15,6.37-52.3,8.38-76.77H30.17V0H251.76c-1.34,36.21-3.35,76.43-5.7,115.66h58.33v39.55Zm-48.61,90.85c2.68-26.48,5.36-58,7.71-90.85H118.34c-4.36,33.19-8.72,64.7-13.08,90.85ZM132.42,38.89c-2.68,24.8-5.7,51-8.72,76.77h81.46c1.68-25.82,2.69-52,3.69-76.77Z"/></svg>
  </div>
</div>

body{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
}

.wrapper{
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg{
  width: 100%;
  height: auto;
  fill: transparent;
}

.svg1 svg{
  stroke: #fff;
}

.svg2 {
  position: absolute;
  right: -12px;
  bottom: -6px;
  stroke: #A6FF8F;
}

.svg3 {
  position: absolute;
  left: -12px;
  top: -6px;
  stroke:#8453E3;
}

const path_anime1 = anime({
  targets: '.svg1 path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 8000,
  direction: 'alternate',
  loop: true
});

const path_anime2 = anime({
  targets: '.svg2 path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 5000,
  direction: 'alternate',
  loop: true
});

const path_anime3 = anime({
  targets: '.svg3 path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 3000,
  direction: 'alternate',
  loop: true
});