<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800">
     <rect id="bg1" x="0" y="0" width="1200" height="800" fill="#100D18" />
     <rect id="bg2" class="bg" x="1200" y="0" width="1200" height="800" fill="#4EA5D5" />
     <rect id="bg3" class="bg" x="1200" y="0" width="1200" height="800" fill="#C08250" />
     <rect id="bg4" class="bg" x="1200" y="0" width="1200" height="800" fill="#BBC052" />
     <rect id="bg5" class="bg" x="1200" y="0" width="1200" height="800" fill="#CC81B9" />
     <rect id="bg6" class="bg" x="1200" y="0" width="1200" height="800" fill="#CD0000" />
     <g id="title">
       <text x="530.745" y="248.517" font-family="Fontdinerdotcom" font-size="80">
         The
       </text>
       <text x="619.488" y="442.004" font-family="Fontdinerdotcom" font-size="80">
         Mrs.
       </text>
       <text x="400.183" y="352.084" font-family="Fontdinerdotcom" font-size="140">
         Marvelous
       </text>
       <text x="674.057" y="311.245" font-family="Fontdinerdotcom Sparkly" font-size="120">
         *
       </text>
       <text x="465.468" y="548.199" font-family="Fontdinerdotcom" font-size="190">
         Maisel
       </text>
       <text x="409.372" y="542.419" font-family="Fontdinerdotcom Sparkly" font-size="120">
         *
       </text>
     </g>
   </svg>

@font-face {
  font-family: "Fontdinerdotcom";
  src: url("https://raw.githubusercontent.com/robole/title-sequences/main/the-marvelous-mrs-maisel/fonts/Fontdinerdotcom.woff") format("woff");
}

@font-face {
  font-family: "Fontdinerdotcom Sparkly";
  src: url("https://raw.githubusercontent.com/robole/title-sequences/main/the-marvelous-mrs-maisel/fonts/FontdinerdotcomSparkly.woff") format("woff");
}

text {
  fill: papayawhip;
  mix-blend-mode: exclusion;
}

svg {
  width: 100%;
}

let tl = gsap.timeline();

tl.to(".bg", {
  duration: 0.4,
  x: -1200,
  ease: "power1.out",
  stagger: 0.3,
});


let svg = document.getElementsByTagName("svg")[0];
svg.addEventListener("click", replay);

function replay() {
  tl.restart();
}