<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600">

  <path class="" d="M600,400H200c-55,0-100-45-100-100h0c0-55,45-100,100-100h800c55,0,100,45,100,100h0c0,55-45,100-100,100Z" stroke="#333" fill="none" />
  <text transform="translate(600 100)">DrawSVG Multi-Looping</text>
  <a href="https://www.motiontricks.com" target="_blank"><text transform="translate(600 520)">motiontricks.com</text></a> 
  
</svg>

body {
  font-family: "proxima-nova", sans-serif;
  display: flex;
  height: 100vh;
  background: #262626;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.target {
  stroke-miterlimit: 10;
  stroke-width: 6;
  fill: none;
  stroke-linecap: round;
}

svg {
  width: 90vw;
  height: auto;
}

text {
  text-anchor: middle;
  font-size: 50px;
  fill: white;
    font-family: "proxima-nova", sans-serif;
  font-weight: 600;
}

console.clear();
gsap.registerPlugin(DrawSVGPlugin);
const svgns = "http://www.w3.org/2000/svg";
const demo = document.querySelector("svg");
const colorArray = ["#5cceee", "#94c356", "#eae047", "#a63ba0", "#cf5b21"];
let targetCount = 6;

for (let i = 0; i < targetCount; i++) {
  let newPath = document.createElementNS(svgns, "path");
  demo.appendChild(newPath);
  gsap.set(newPath, {
    attr: {
      d:
        "M600,400H200c-55,0-100-45-100-100h0c0-55,45-100,100-100h800c55,0,100,45,100,100h0c0,55-45,100-100,100Z",
      stroke: colorArray[i % colorArray.length],
      class: "target"
    },
    strokeWidth: 6 + 3 * i
  });

  gsap
    .timeline({ delay: i * 0.15, repeat: -1, repeatDelay: 0.5 })
    .fromTo(newPath, { drawSVG: 0 }, { drawSVG: "0% 5%", ease: "power3.in" })
    .to(newPath, { duration: 4, drawSVG: "365% 400%", ease: "none" })
    .to(newPath, { drawSVG: "400% 400%", ease: "power3" })
    .timeScale(0.75);
}