<svg id="titleSvg" viewBox="0 0 1200 800">
      <defs>
        <radialGradient
          id="radial2"
          cx="1038.5"
          cy="213.52"
          r="76.168"
          gradientTransform="matrix(.020383 1.1666 -1.3959 .02439 1236.4 -1010)"
          gradientUnits="userSpaceOnUse"
          spreadMethod="repeat"
        >
          <stop
            id="stop1369"
            stop-color="#a41313"
            stop-opacity=".96525"
            offset="0"
          />
          <stop
            id="stop1441"
            stop-color="#ff3636"
            stop-opacity=".98132"
            offset=".31701"
          />
          <stop id="stop1371" stop-color="#780e0e" offset="1" />
        </radialGradient>
        <radialGradient
          id="radial3"
          cx="599.01"
          cy="233.7"
          r="76.168"
          gradientTransform="matrix(.17493 .98458 -.42958 .076323 583.62 -389.03)"
          gradientUnits="userSpaceOnUse"
          spreadMethod="reflect"
        >
          <stop id="stop32104" stop-color="#ff3c3c" offset="0" />
          <stop id="stop32242" stop-color="#601414" offset=".39687" />
          <stop id="stop32106" stop-color="#a41313" offset="1" />
        </radialGradient>
      </defs>
      <rect id="bg" width="1200" height="800" />
      <g id="title">
        <rect
          id="top-box"
          class="box"
          x="153.11"
          y="259.4"
          width="898.19"
          height="12.222"
          fill="none"
          stroke="url(#radial2)"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="4"
        />
        <rect
          id="bottom-left-box"
          class="box"
          x="152.15"
          y="460.32"
          width="169"
          height="12.114"
          fill="none"
          stroke="url(#radial2)"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="4"
        />
        <rect
          id="bottom-right-box"
          class="box"
          x="923.83"
          y="457.42"
          width="149.8"
          height="12.317"
          fill="none"
          stroke="url(#radial2)"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="3.7973"
        />
        <path
          id="word1-s"
          d="m168.6 389.73-3.5578 50.234c2.807-2.2194 1.6564-4.4968 9.4225-6.6434 13.99-0.61876 21.083 5.9413 36.038 6.1371 0 0 12.947 0.48292 22.858-1.5716 7.7487-1.6062 14.891-4.6608 17.774-5.8862 11.871-8.6555 20.885-17.656 22.51-35.666 1.1835-12.651 1.0453-17.521-4.2534-27.82-4.7127-9.121-10.409-16.446-23.246-20.213-17.3-5.3467-51.99-12.243-43.401-32.989 7.4003-19.136 35.827-16.226 49.092 2.9757l3.8702 6.491 5.9274-33.042-4.5653 1.2883c-8.2155-1.7953-2.4604-0.98236-17.384-3.6527-32.461-9.7138-69.306 1.0122-73.206 35.702-1.9216 17.924 1.1965 33.528 18.543 42.58l29.065 11.788 15.453 6.5867c18.582 12.844 1.5992 33.376-7.3793 36.442-12.137 1.584-23.641 2.1384-31.72-4.5209-10.455-8.628-14.277-15.036-17.572-28.26z"
          fill="none"
          stroke="url(#radial2)"
          stroke-width="4"
        />
        <path
          id="word1-t"
          d="m288.34 406.53h50.96v-4.48c-8.8-0.48-10.237-5.7639-9.92-18.56v-80.68h2.08c14.56 0 24 9.6403 28.8 25l4.48-0.8-5.7119-28.349-1.6927-6.7984c-26.363-0.11171-52.492-0.0526-79.715-0.0526-2.5019 0-4.2045-4e-3 -7.5712-0.0656l-0.43658 2.3619-6.5522 32.904 4.48 0.8c4.8-15.36 14.24-25 28.8-25h2.08v80.68c0 12.32-0.96 17.92-10.08 18.56z"
          stroke="url(#radial3)"
          stroke-width="4"
        />
        <path
          id="word1-r1"
          d="m366.76 404.63h46.32v-4.48c-7.36-1.28-7.68-5.92-7.68-16.48v-28.32l6.08-1.92c15.52 15.84 22.08 34.24 22.08 40.16 0 3.2-1.44 4.8-5.44 6.56v4.48h49.76v-4.48c-6.56-0.96-8.64-6.56-12.32-15.68-7.04-17.28-14.4-31.52-24.16-42.24 14.4-8.64 21.6-20 21.6-31.2 0-11.84-7.68-17.12-23.2-17.12h-73.04v4.48c7.36 1.28 7.68 5.92 7.68 16.48v68.8c0 10.56-0.32 15.2-7.68 16.48zm38.64-61.44v-29.92c0-6.08 0.32-8.8 11.04-8.8 9.44 0 13.92 3.52 13.92 11.68 0 11.04-8.8 23.52-24.96 27.04z"
          stroke="url(#radial2)"
          stroke-width="4"
        />
        <path
          id="word1-a"
          d="m506.84 308.71-24.64 71.44c-4 11.04-6.72 18.08-16.48 20v4.48h36.16v-4.48c-5.44 0-8.32-2.56-8.32-7.52 0-2.56 0.8-6.24 2.4-10.88l6.24-17.6c22.88 1.44 37.12 14.08 37.12 27.04 0 5.28-2.4 8-8.16 8.96v4.48h54.56v-4.48c-6.88-0.32-9.12-5.76-12.64-16l-24.32-75.44c-0.48-1.6-0.96-3.2-0.96-5.12 0-1.76 1.44-3.68 4.32-4.8v-4.48h-48.64v4.48c3.04 1.28 4.32 2.88 4.32 5.28 0 1.44-0.32 3.04-0.96 4.64zm-0.32 43.76 11.2-34.32 11.68 42c-6.56-4.32-13.92-6.72-22.88-7.68z"
          stroke="url(#radial2)"
          stroke-width="4"
        />
        <path
          id="word1-n"
          d="m596.28 315.27v68.5c0 10.56-0.32 15.2-7.68 16.48v4.48h31.36v-4.48c-9.28-0.64-10.08-6.56-10.08-18.56v-67.38l58.56 69.3v3.68c0 8.96-1.12 12.64-9.92 12.96v4.48h31.36v-4.48c-7.36-1.28-7.68-5.92-7.68-16.48v-68.5c0-10.56 0.32-15.2 7.68-16.48v-4.48h-29.12v4.48c7.36 1.28 7.68 5.92 7.68 16.48v16.32l-20.64-22.88c-1.92-2.08-2.88-4.48-2.88-5.6 0-1.6 1.12-3.2 3.68-4.32v-4.48h-60v4.48c7.36 1.28 7.68 5.92 7.68 16.48z"
          stroke="url(#radial3)"
          stroke-width="4"
        />
        <path
          id="word1-g"
          d="m762.66 362.15v15.52c0 10.72-0.8 16.48-11.68 16.48-16.16 0-30.72-19.36-30.72-48.16 0-22.56 11.68-40.16 30.24-40.16 12.8 0 22.24 6.88 30.56 20.96h3.84l-4.96-35.2c-4.16 2.4-7.52 3.84-10.72 3.84-5.92 0-14.88-3.2-28.16-3.2-23.964 0-42.424 11.871-49.823 30.809-2.2267 14.868-0.85946 29.566-1.3397 44.36 0.21956 1.3994 0.5279 2.801 0.95774 4.0866 6.7456 20.175 17.091 32.451 50.531 32.898 25.898 0.60938 40.802 0.35609 63.041 0.27039v-4.4006c-8.32-1.6-9.1267-5.4632-9.1267-15.703v-22.4c0-10.24 0.64-15.04 8.96-16.64v-4.32h-50.56v4.32c8.32 1.6 8.96 6.4 8.96 16.64z"
          stroke="url(#radial3)"
          stroke-width="4"
        />
        <path
          id="word1-e"
          d="m814.78 404.63h83.92c2.88 0 5.6 0 8.48 1.76l13.6-43.52-4.16-1.28c-10.56 21.92-23.68 32.32-41.28 32.32-11.52 0-13.276-3.8583-13.92-15.2v-35.2h8.16c13.28 0 18.72 5.44 22.72 18.72l3.2-1.28-6.88-40.8h-3.2c-1.28 10.72-4.96 12.32-15.04 12.32h-8.96v-11.04c0-9.12 1.28-16.24 11.04-16.24 17.28 0 29.44 8 35.84 23.68l4.16-0.96-8.96-36.8c-1.76 2.24-4.8 3.2-9.12 3.2h-79.6v4.48c7.36 1.28 7.68 9.5197 7.68 20.08v64.8c0 10.56-0.32 15.2-7.68 16.48z"
          stroke="url(#radial3)"
          stroke-width="4"
        />
        <path
          id="word1-r2"
          d="m923.54 430.67h61.805v-5.7301c-9.4143-1.6374-9.8236-7.5725-9.8236-21.079v-36.224l7.7769-2.4558c19.852 20.261 28.242 43.796 28.242 51.368 0 4.093-1.8423 6.1396-6.9571 8.3908v5.7301h63.646v-5.7301c-8.393-1.2281-11.05-8.3908-15.76-20.056-9.0018-22.103-18.418-40.317-30.9-54.028 18.418-11.052 27.627-20.466 27.627-34.791 0-15.144-9.8222-21.898-29.675-21.898h-95.982v5.7301c9.4139 1.6374 9.8233 7.5725 9.8233 21.079v82.885c0 13.507-0.40942 19.442-9.8233 21.079zm51.982-78.587v-33.154c0-7.7769 0.40932-11.256 14.121-11.256 12.075 0 17.804 4.5023 17.804 14.94 0 14.121-11.255 24.968-31.925 29.47z"
          stroke="url(#radial2)"
          stroke-width="5.1163"
        />
        <path
          id="word2-t"
          d="m357.06 551.61h50.96v-4.48c-8.8-0.48-10.237-5.7639-9.92-18.56v-80.68h2.08c14.56 0 24 9.6403 28.8 25l4.48-0.8-5.7119-28.349-1.6927-6.7984c-26.363-0.11171-52.492-0.0526-79.715-0.0526-2.5019 0-4.2045-4e-3 -7.5712-0.0656l-0.43658 2.3619-6.5522 32.904 4.48 0.8c4.8-15.36 14.24-25 28.8-25h2.08v80.68c0 12.32-0.96 17.92-10.08 18.56z"
          stroke="url(#radial3)"
          stroke-width="4"
        />
        <path
          id="word2-h"
          d="m477.1 482.15h27.04v48.84c0 10.56-0.32 15.2-7.68 16.48v4.48h48.32v-4.48c-7.36-1.28-7.68-5.92-7.68-16.48v-68.2c0-10.56 0.32-15.2 7.68-16.48v-4.48h-48.32v4.48c7.36 1.28 7.68 5.92 7.68 16.48v8.32h-27.04v-8.32c0-10.56 0.32-15.2 7.68-16.48v-4.48h-48.32v4.48c7.36 1.28 7.68 5.92 7.68 16.48v68.2c0 10.56-0.32 15.2-7.68 16.48v4.48h48.32v-4.48c-7.36-1.28-7.68-5.92-7.68-16.48z"
          stroke="url(#radial2)"
          stroke-width="4"
        />
        <path
          id="word2-i"
          d="m553.5 551.95h46.32v-4.48c-7.36-1.28-7.68-5.92-7.68-16.48v-68.2c0-10.56 0.32-15.2 7.68-16.48v-4.48h-46.32v4.48c7.36 1.28 7.68 5.92 7.68 16.48v68.2c0 10.56-0.32 15.2-7.68 16.48z"
          stroke="url(#radial3)"
          stroke-width="4"
        />
        <path
          id="word2-n"
          d="m615.7 462.48v68.5c0 10.56-0.32 15.2-7.68 16.48v4.48h31.36v-4.48c-9.28-0.64-10.08-6.56-10.08-18.56v-67.38l58.56 69.3v3.68c0 8.96-1.12 12.64-9.92 12.96v4.48h31.36v-4.48c-7.36-1.28-7.68-5.92-7.68-16.48v-68.5c0-10.56 0.32-15.2 7.68-16.48v-4.48h-29.12v4.48c7.36 1.28 7.68 5.92 7.68 16.48v16.32l-20.64-22.88c-1.92-2.08-2.88-4.48-2.88-5.6 0-1.6 1.12-3.2 3.68-4.32v-4.48h-60v4.48c7.36 1.28 7.68 5.92 7.68 16.48z"
          stroke="url(#radial2)"
          stroke-width="4"
        />
        <path
          id="word2-g"
          d="m782.51 509.38v15.52c0 10.72-0.8 16.48-11.68 16.48-16.16 0-30.72-19.36-30.72-48.16 0-22.56 11.68-40.16 30.24-40.16 12.8 0 22.24 6.88 30.56 20.96h3.84l-4.96-35.2c-4.16 2.4-7.52 3.84-10.72 3.84-5.92 0-14.88-3.2-28.16-3.2-23.964 0-42.424 11.871-49.823 30.809-2.2267 14.868-0.85946 29.566-1.3397 44.36 0.21956 1.3994 0.5279 2.801 0.95774 4.0866 6.7456 20.175 17.091 32.451 50.531 32.898 25.898 0.60938 40.802 0.35609 63.041 0.27039v-4.4006c-8.32-1.6-9.1267-5.4632-9.1267-15.703v-22.4c0-10.24 0.64-15.04 8.96-16.64v-4.32h-50.56v4.32c8.32 1.6 8.96 6.4 8.96 16.64z"
          stroke="url(#radial2)"
          stroke-width="4"
        />
        <path
          id="word2-s"
          d="m892.84 479.29-13.44-4.16c-8.96-2.88-14.08-5.28-14.08-12 0-6.24 5.76-11.2 14.88-11.2 11.52 0 22.56 7.84 30.08 22.56l4.48-0.64-3.36-33.92c-2.88 1.6-5.28 2.56-7.52 2.56-8.8 0-19.52-3.2-32.16-3.2-25.92 0-40.64 13.76-40.64 33.28 0 15.52 8.8 26.64 26.56 32.4l12.8 4.16c12.8 4.16 20.8 5.76 20.8 16.16 0 8.8-7.36 14.24-21.28 14.24-19.84 0-32.96-11.68-36.32-32.8l-4.32 0.16 2.72 45.12c3.2-2.24 5.76-3.36 8.96-3.36 6.24 0 17.12 3.84 33.28 3.84 31.68 0 51.36-16.16 51.36-38.88 0-19.04-11.52-27.6-32.8-34.32z"
          stroke="url(#radial2)"
          stroke-width="4"
        />
      </g>
    </svg>

svg {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

let boxesTimeline = gsap.timeline();

// in the complete animation, this happens after a delay of 14 seconds
boxesTimeline
  .set("#top-box", { scaleX: 0, transformOrigin: "50% 50%" })
  .set("#bottom-left-box", { scaleX: 0, transformOrigin: "100% 50%" })
  .set("#bottom-right-box", { scaleX: 0, transformOrigin: "0% 50%" });


  boxesTimeline
    .to("#top-box", { scaleX: 1, duration: 1, ease: "power3.out",  })
    .to(
      "#bottom-left-box, #bottom-right-box",
      { scaleX: 1, duration: 0.75 },
      "+=.75"
    );