<div class="container">
  <svg viewBox="0 0 262 21.6">
    <path d="M14.348 17.774H7.732l-1.169 3.034H.593l7.612-17.41h5.77l7.61 17.41h-6.068zm-1.617-4.228L11.04 9.168l-1.691 4.378z" />
    <path d="M31.824 6.954q2.512 0 4.03 1.517 1.541 1.517 1.541 4.577v7.76h-5.62v-6.79q0-2.338-1.667-2.338-.945 0-1.542.671-.572.647-.572 2.065v6.392h-5.621V7.203h5.347v1.343q.796-.796 1.84-1.194 1.045-.398 2.264-.398z" />
    <path d="M39.813 7.203h5.621v13.605h-5.621zm2.81-1.094q-1.517 0-2.462-.796-.92-.821-.92-2.065t.92-2.04q.945-.82 2.462-.82 1.543 0 2.463.771.92.771.92 1.99 0 1.293-.92 2.139-.92.82-2.463.82z" />
    <path d="M65.933 6.954q2.462 0 3.93 1.517 1.492 1.517 1.492 4.577v7.76h-5.621v-6.79q0-2.338-1.517-2.338-.796 0-1.294.597-.472.597-.472 1.89v6.64H56.83v-6.79q0-2.337-1.518-2.337-.796 0-1.293.597-.473.597-.473 1.89v6.64h-5.62V7.204h5.347V8.47q1.517-1.517 3.855-1.517 1.368 0 2.462.522 1.095.498 1.791 1.543.82-.995 1.99-1.518 1.169-.547 2.562-.547z" />
    <path d="M79.863 6.954q3.581 0 5.472 1.617 1.89 1.592 1.89 4.924v7.313h-5.223v-1.791q-.97 2.04-3.855 2.04-1.617 0-2.761-.548-1.12-.572-1.716-1.517-.573-.97-.573-2.164 0-2.014 1.543-3.06 1.542-1.044 4.676-1.044h2.263q-.274-1.591-2.562-1.591-.92 0-1.865.298-.945.274-1.617.771l-1.79-3.706q1.168-.721 2.81-1.12 1.666-.422 3.308-.422zm-.025 10.72q.597 0 1.07-.323.472-.324.696-.97v-.945H80.21q-1.716 0-1.716 1.144 0 .472.348.796.373.298.995.298z" />
    <path d="M99.677 20.336q-1.269.721-3.457.721-2.86 0-4.403-1.368-1.542-1.393-1.542-4.153v-3.482H88.41V7.95h1.865V4.144h5.621V7.95h2.786v4.104h-2.786v3.432q0 .622.324.97.323.348.845.348.722 0 1.269-.373z" />
    <path d="M115.205 13.993q0 .124-.075 1.318h-9.451q.298.771.995 1.194.696.398 1.74.398.896 0 1.493-.224.622-.224 1.343-.77l2.935 2.959q-1.99 2.189-5.944 2.189-2.463 0-4.328-.896-1.865-.92-2.885-2.537-1.02-1.616-1.02-3.631 0-2.04.995-3.631 1.02-1.617 2.76-2.512 1.767-.896 3.955-.896 2.065 0 3.756.82 1.716.822 2.711 2.414 1.02 1.591 1.02 3.805zm-7.437-3.208q-.87 0-1.442.472-.572.473-.747 1.343h4.378q-.174-.845-.746-1.318-.572-.497-1.443-.497z" />
    <path d="M132.003 2.353v18.455h-5.348v-1.12q-1.218 1.369-3.73 1.369-1.791 0-3.308-.846-1.493-.87-2.388-2.487-.87-1.617-.87-3.73 0-2.115.87-3.707.895-1.616 2.388-2.462 1.517-.87 3.308-.87 2.263 0 3.457 1.168v-5.77zm-7.735 14.326q.97 0 1.592-.696.621-.722.621-1.99 0-1.269-.621-1.965-.622-.697-1.592-.697-.97 0-1.592.697-.622.696-.622 1.965 0 1.268.622 1.99.622.696 1.592.696z" />
    <path d="M148.639 21.206q-2.164 0-4.228-.473-2.04-.497-3.358-1.318l1.89-4.278q1.244.722 2.786 1.17 1.542.422 2.96.422 1.219 0 1.74-.224.523-.249.523-.721 0-.547-.696-.82-.672-.274-2.239-.598-2.014-.423-3.357-.895-1.344-.498-2.338-1.592-.995-1.12-.995-3.01 0-1.641.92-2.984t2.736-2.114Q146.823 3 149.435 3q1.79 0 3.507.398 1.74.373 3.06 1.119l-1.767 4.253q-2.562-1.293-4.85-1.293-2.263 0-2.263 1.094 0 .522.671.796.672.249 2.214.547 1.99.373 3.358.87 1.368.473 2.362 1.567 1.02 1.095 1.02 2.985 0 1.642-.92 2.985-.92 1.318-2.76 2.114-1.817.771-4.428.771z" />
    <path d="M177.077 3.398l-7.362 17.41h-5.77l-7.362-17.41h6.317l4.154 10.173 4.253-10.173z" />
    <path d="M188.887 11.63h5.099v7.362q-1.542 1.07-3.582 1.642-2.04.572-4.004.572-2.786 0-5-1.144-2.213-1.17-3.482-3.234-1.243-2.089-1.243-4.725t1.243-4.701q1.269-2.09 3.507-3.234Q183.69 3 186.525 3q2.561 0 4.576.87 2.04.847 3.382 2.488l-3.755 3.308q-1.642-1.915-3.905-1.915-1.94 0-3.084 1.169-1.144 1.169-1.144 3.183 0 1.965 1.119 3.16 1.144 1.193 3.034 1.193 1.12 0 2.14-.423z" />
    <path d="M207.767 7.949h-5.099V3.397h16.067V7.95h-5.099v12.859h-5.87z" />
    <path d="M233.207 13.993q0 .124-.075 1.318h-9.451q.298.771.995 1.194.696.398 1.74.398.896 0 1.493-.224.622-.224 1.343-.77l2.935 2.959q-1.99 2.189-5.944 2.189-2.463 0-4.328-.896-1.865-.92-2.885-2.537-1.02-1.616-1.02-3.631 0-2.04.995-3.631 1.02-1.617 2.76-2.512 1.767-.896 3.955-.896 2.065 0 3.756.82 1.716.822 2.711 2.414 1.02 1.591 1.02 3.805zm-7.437-3.208q-.87 0-1.442.472-.572.473-.747 1.343h4.378q-.174-.845-.746-1.318-.572-.497-1.443-.497z" />
    <path d="M243.147 20.808l-1.865-2.91-2.09 2.91H233.1l5.148-6.74-5-6.865h6.343l1.94 2.885 2.04-2.885h5.894l-4.999 6.616 5.124 6.99z" />
    <path d="M260.617 20.336q-1.269.721-3.457.721-2.86 0-4.403-1.368-1.542-1.393-1.542-4.153v-3.482h-1.865V7.95h1.865V4.144h5.621V7.95h2.786v4.104h-2.786v3.432q0 .622.324.97.323.348.845.348.722 0 1.269-.373z" />
  </svg>
  <footer>
    <div class="made-by">Made by Brian</div>
    <div><a href="https://twitter.com/Brian_C_Cross" target="_top"><i class="fab fa-twitter"></i></a></div>
  </footer>

</div>

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  color: #789;
  background: black;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  overflow: hidden;
}

a {
  color: currentcolor;
}

.container {
  height: 100vh;
  width: 90vw;
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

svg {
  width: 100%;
  flex-grow: 1;
}

path {
  stroke: white;
}

footer {
  display: flex;
  width: 100%;
  padding: 1em 0;
  justify-content: space-between;
}

.made-by {
  font-size: 0.75em;
}

const tl = gsap.timeline();

tl.from("path", {
  drawSVG: 0,
  opacity: 0,
  duration: 2.5,
  ease: "power1.inOut",
  stagger: {
    amount: 2,
    from: "random",
    onComplete: function () {
      gsap.to(this.targets()[0], {
        fill: "#789",
        ease: "power1.inOut",
        duration: 1.5
      });
    }
  }
});

tl.from("footer", { y: "1rem", opacity: 0 }, ">1.25");