<div id="screen">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="-268.5 -100 1282 1482">
    <defs>
      <mask id="mask-straight-yellow" maskUnits="userSpaceOnUse">
        <path d="M683.21,158.12a65.25,65.25,0,0,0-92.28-92.28l-172.12,172,92.28,92.28Z" fill="#fff" />
        <path d="M683.21,1123.34,200.66,640.8,326.53,514.94l-92.29-92.29L62.12,594.53a65.22,65.22,0,0,0,0,92.28L590.93,1215.5a65.21,65.21,0,1,0,92.28-92.16Z" fill="#fff" />
      </mask>
      <mask id="mask-straight-grey" maskUnits="userSpaceOnUse">
        <path d="M62.12,1123.34a65.26,65.26,0,1,0,92.29,92.29l172-172-92.28-92.28-172,172Z" fill="#fff" />
        <path d="M683.23,594.54,154.41,65.85a65.26,65.26,0,0,0-92.29,92.28L544.67,640.68l-125.86,126,92.28,92.28,172-172A65.28,65.28,0,0,0,683.23,594.54Z" fill="#fff" />
      </mask>
    </defs>
    <path mask="url(#mask-straight-grey)" id="straight-grey" class="line" d="M110.66,112.67,328.23,330.12,512.79,514.94,638.67,640.8,110.89,1168.56" fill="none" stroke="#a39c95" stroke-linecap="round" stroke-linejoin="round" stroke-width="126" />

    <path mask="url(#mask-straight-yellow)" id="straight-yellow" class="line" d="M638.67,112.67,421.09,330.12,236.53,514.94,110.66,640.8l527.78,527.76" fill="none" stroke="#fac11c" stroke-linecap="round" stroke-linejoin="round" stroke-width="126" />

  </svg>

</div>
<h1>Click To Repeat</h1

body {
  background-color: #374452;
}
#screen {
  width: 100%;
  margin: 0 auto;
  max-width: 500px;
  svg {
    //     Show viewbox
    // border: 1px solid plum;
  }
}
h1 {
  color: white;
  font-family: sans-serif;
  text-align: center;
}

gsap.registerPlugin(DrawSVGPlugin, CustomEase);

gsap.set(".line", { transformOrigin: "center center" });
const timeline = gsap
  .timeline({ repeatRefresh: true })
  .from(".line", {
    scale: 0,
    rotate: -480
  })
  .fromTo("#straight-yellow", { drawSVG: "0% 0%" }, { drawSVG: "0% 100%" })
  .fromTo("#straight-grey", { drawSVG: "100% 100%" }, { drawSVG: "0% 100%" });
window.addEventListener("click", () => {
  timeline.restart();
});