<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;
}
View Compiled
gsap.registerPlugin(DrawSVGPlugin, CustomEase);

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js
  3. https://assets.codepen.io/16327/CustomEase3.min.js
  4. https://assets.codepen.io/16327/DrawSVGPlugin3.min.js