<!-- Get your text paths at this link. Add the paths into the clip path element (make sure your viewbox is updated!) -->
<!-- https://danmarshall.github.io/google-font-to-svg-path/ -->

<!-- cool gifs here 😎 -->
<!-- https://giphy.com/ -->

  <svg
      viewBox="0 0 316.09 164.72"
      aria-labelledby="Big City Lights"
      role="img"
    >
      <title id="cityLights">Big City Lights</title>

      <clipPath id="bigCity" fill="none"
          stroke="#000"
          stroke-miterlimit="10">
        <path
          d="M529.08,223.85V185.56h12.36q6.54,0,9.8,2.29a7.87,7.87,0,0,1,3.27,6.91,11.36,11.36,0,0,1-.34,2.8,8.7,8.7,0,0,1-1,2.51,8.23,8.23,0,0,1-1.76,2,7.88,7.88,0,0,1-2.49,1.37,9,9,0,0,1,2.74.93,8.26,8.26,0,0,1,2.29,1.78,8.43,8.43,0,0,1,1.55,2.6,9.29,9.29,0,0,1,.57,3.34q0,5.85-3.92,8.8t-11.34,2.94ZM547,196a5.34,5.34,0,0,0-.35-2,3.57,3.57,0,0,0-1.13-1.49,5.68,5.68,0,0,0-2-1,11.38,11.38,0,0,0-2.95-.33h-4.36v10.13h4.36a9.22,9.22,0,0,0,3-.42,5.47,5.47,0,0,0,2-1.17,4.25,4.25,0,0,0,1.11-1.72A6.09,6.09,0,0,0,547,196ZM541.27,218a9.58,9.58,0,0,0,3-.44,6.29,6.29,0,0,0,2.18-1.22,5.07,5.07,0,0,0,1.33-1.83,5.5,5.5,0,0,0,.46-2.26,4.6,4.6,0,0,0-1.86-3.89q-1.86-1.41-5.7-1.41h-4.48V218Z"
          transform="translate(-501.43 -180.76)"
          
        />
        <path
          d="M572,199.66h-8.41v-5.57h15.73v24.2h8.59v5.56H562.54v-5.56H572Zm7.91-13.72a4.8,4.8,0,0,1-.35,1.82,4.55,4.55,0,0,1-1,1.48,4.89,4.89,0,0,1-1.48,1,4.69,4.69,0,0,1-1.85.36,4.64,4.64,0,0,1-3.35-1.36,4.4,4.4,0,0,1-1-1.48,4.77,4.77,0,0,1,1-5.13,4.6,4.6,0,0,1,3.35-1.37,4.69,4.69,0,0,1,1.85.36,4.92,4.92,0,0,1,1.48,1,4.72,4.72,0,0,1,1.33,3.31Z"
          transform="translate(-501.43 -180.76)"
         
        />
        <path
          d="M617.67,199.3a6.33,6.33,0,0,1,1.16,2.16,8.16,8.16,0,0,1,.34,2.3,10.46,10.46,0,0,1-.87,4.39,8.66,8.66,0,0,1-2.43,3.2,10.59,10.59,0,0,1-3.75,1.94,16.57,16.57,0,0,1-4.82.66,13,13,0,0,1-2.87-.3,7.27,7.27,0,0,1-2-.72,5.31,5.31,0,0,0-.85,1.1,2.58,2.58,0,0,0-.35,1.36,2.07,2.07,0,0,0,.23.94,2.58,2.58,0,0,0,.69.83,3.74,3.74,0,0,0,1.08.6,4.23,4.23,0,0,0,1.43.26l7.06.27a17.48,17.48,0,0,1,4.29.6,10.12,10.12,0,0,1,3.29,1.54,7,7,0,0,1,2.13,2.41,6.85,6.85,0,0,1,.74,3.24,8.61,8.61,0,0,1-.93,3.93,9,9,0,0,1-2.83,3.21,15.15,15.15,0,0,1-4.7,2.15,24.21,24.21,0,0,1-6.54.79,29.2,29.2,0,0,1-6.19-.57,13.44,13.44,0,0,1-4.25-1.6,6.89,6.89,0,0,1-2.45-2.44,6.4,6.4,0,0,1-.79-3.12,6.48,6.48,0,0,1,.27-1.91,6.27,6.27,0,0,1,.79-1.68,9,9,0,0,1,1.32-1.57,14.45,14.45,0,0,1,1.87-1.52,5.75,5.75,0,0,1-2.18-2.11,5.4,5.4,0,0,1-.75-2.76,6.58,6.58,0,0,1,.26-1.86,9.58,9.58,0,0,1,.69-1.65,12.39,12.39,0,0,1,1-1.53c.38-.48.77-1,1.18-1.43a8.83,8.83,0,0,1-1.8-2.62,9.11,9.11,0,0,1-.72-3.86,10.48,10.48,0,0,1,.89-4.44,9.38,9.38,0,0,1,2.48-3.28,10.79,10.79,0,0,1,3.76-2,15.73,15.73,0,0,1,4.76-.69,23,23,0,0,1,2.54.14,10.29,10.29,0,0,1,2.21.45h10.31v5.21Zm-16.84,28.51a2.69,2.69,0,0,0,1.74,2.55,11.76,11.76,0,0,0,4.91.82,13.26,13.26,0,0,0,3.41-.38,7.38,7.38,0,0,0,2.27-1,3.61,3.61,0,0,0,1.26-1.43,4.08,4.08,0,0,0,.38-1.7,2.39,2.39,0,0,0-.36-1.34,2.93,2.93,0,0,0-1-.9,5.55,5.55,0,0,0-1.55-.56,12.72,12.72,0,0,0-2-.25l-6.3-.12a10.51,10.51,0,0,0-1.39,1.12,4.86,4.86,0,0,0-.85,1,3.13,3.13,0,0,0-.41,1A5.66,5.66,0,0,0,600.83,227.81Zm1.2-23.88a5.08,5.08,0,0,0,1.39,3.77,5.24,5.24,0,0,0,3.88,1.39,5.62,5.62,0,0,0,2.3-.44,4.58,4.58,0,0,0,1.63-1.17,4.84,4.84,0,0,0,1-1.7,6.24,6.24,0,0,0,.33-2,4.84,4.84,0,0,0-5.28-5.28,5.65,5.65,0,0,0-2.3.44,4.67,4.67,0,0,0-1.62,1.19,5.11,5.11,0,0,0-1,1.74A6.9,6.9,0,0,0,602,203.93Z"
          transform="translate(-501.43 -180.76)"
          
        />
        <path
          d="M686.67,222.36a29.5,29.5,0,0,1-4.94,1.52,23.74,23.74,0,0,1-5,.5,20.31,20.31,0,0,1-7.3-1.21,13.84,13.84,0,0,1-5.37-3.62,16,16,0,0,1-3.31-6,30.92,30.92,0,0,1,.11-16.88,17.94,17.94,0,0,1,3.51-6.36A15.11,15.11,0,0,1,670,186.4a18.9,18.9,0,0,1,7.34-1.36c.88,0,1.71,0,2.48.06s1.53.11,2.27.21,1.49.25,2.25.43,1.56.4,2.38.67v7.15a22.77,22.77,0,0,0-4.75-1.67,19.28,19.28,0,0,0-4.1-.5,10.12,10.12,0,0,0-4.66,1,8.53,8.53,0,0,0-3.18,2.75,12.19,12.19,0,0,0-1.83,4.22,23.08,23.08,0,0,0-.58,5.37,23.45,23.45,0,0,0,.6,5.56,11.42,11.42,0,0,0,1.86,4.14,8.09,8.09,0,0,0,3.22,2.59,11.1,11.1,0,0,0,4.66.9,13.4,13.4,0,0,0,2.09-.19c.75-.13,1.52-.3,2.29-.5s1.53-.45,2.28-.73,1.45-.57,2.1-.87Z"
          transform="translate(-501.43 -180.76)"
         
        />
        <path
          d="M703.92,199.66h-8.41v-5.57h15.74v24.2h8.58v5.56H694.49v-5.56h9.43Zm7.91-13.72a4.61,4.61,0,0,1-.35,1.82,4.4,4.4,0,0,1-1,1.48,4.77,4.77,0,0,1-1.48,1,4.69,4.69,0,0,1-1.85.36,4.64,4.64,0,0,1-3.35-1.36,4.4,4.4,0,0,1-1-1.48,4.77,4.77,0,0,1,1-5.13,4.6,4.6,0,0,1,3.35-1.37,4.69,4.69,0,0,1,1.85.36,4.8,4.8,0,0,1,1.48,1,4.72,4.72,0,0,1,1.33,3.31Z"
          transform="translate(-501.43 -180.76)"
        
        />

        <path
          d="M751.85,223.56c-1.29.29-2.59.53-3.89.71a29,29,0,0,1-3.72.26,18.32,18.32,0,0,1-5.06-.62,8.74,8.74,0,0,1-3.51-1.87,7.35,7.35,0,0,1-2-3.21,14.54,14.54,0,0,1-.66-4.64V199.66h-8v-5.57h8v-7.62l7.32-1.9v9.52h11.57v5.57H740.28v14a5.59,5.59,0,0,0,1.17,3.85,5.07,5.07,0,0,0,3.93,1.31,19.45,19.45,0,0,0,3.43-.3c1.11-.19,2.12-.42,3-.67Z"
          transform="translate(-501.43 -180.76)"
        
        />

        <path
          d="M778.19,220.6a52.11,52.11,0,0,1-3.24,6.79,22.16,22.16,0,0,1-3.7,4.86,13.86,13.86,0,0,1-4.5,2.93,15,15,0,0,1-5.55,1c-.49,0-1,0-1.6-.07s-1.17-.13-1.77-.22V229.8l.8.13c.31,0,.62.09,1,.12l1,.07.95,0a5.56,5.56,0,0,0,2.28-.46,7,7,0,0,0,1.95-1.31,10.14,10.14,0,0,0,1.63-2,15.49,15.49,0,0,0,1.29-2.54l-11.81-29.76h8L771,211l1.85,5.45,1.81-5.21,6.24-17.11h7.68Z"
          transform="translate(-501.43 -180.76)"
         
        />
      </clipPath>
      <clipPath id="lights">
        <path
          d="M501.93,343.85V280h12.21v53.51h27v10.3Z"
          transform="translate(-501.43 -180.76)"
         
        />
        <path
          d="M554.62,289.85V280H595v9.81H580.89v44.09H595v9.91H554.62v-9.91h14.06V289.85Z"
          transform="translate(-501.43 -180.76)"
         
        />
        <path
          d="M630.06,316.85v-9.91h22.7v34a40.85,40.85,0,0,1-9.18,3,52.12,52.12,0,0,1-10.4,1,33,33,0,0,1-11.94-2.05,23.58,23.58,0,0,1-9-6.11,27.36,27.36,0,0,1-5.69-10.05,44.84,44.84,0,0,1-2-13.92,45.57,45.57,0,0,1,2.07-14.26,29.2,29.2,0,0,1,6.06-10.67,26,26,0,0,1,9.76-6.66,35.62,35.62,0,0,1,13.21-2.3,47.43,47.43,0,0,1,8.57.76,71.62,71.62,0,0,1,8.33,2v11.86a43.81,43.81,0,0,0-8-2.81,36.1,36.1,0,0,0-8.81-1.1,19.07,19.07,0,0,0-7.94,1.57,15.56,15.56,0,0,0-5.76,4.44,19.75,19.75,0,0,0-3.51,7.08,34.49,34.49,0,0,0-1.2,9.47,41.31,41.31,0,0,0,.93,9.16,18.73,18.73,0,0,0,3,6.93,13.45,13.45,0,0,0,5.35,4.37,18.84,18.84,0,0,0,8,1.52c.75,0,1.4,0,1.95-.08a14.29,14.29,0,0,0,1.56-.22,13.46,13.46,0,0,0,1.39-.34l1.4-.44V316.85Z"
          transform="translate(-501.43 -180.76)"
         
        />
        <path
          d="M695.58,343.85V316.07H673.9v27.78h-12V280h12v25.63h21.68V280h12v63.81Z"
          transform="translate(-501.43 -180.76)"
          
        />
        <path
          d="M745.88,290.05v53.8H733.57v-53.8H716.09V280h47.27v10Z"
          transform="translate(-501.43 -180.76)"
        
        />
        <path
          d="M817,324.57a20,20,0,0,1-1.93,9.08,17.35,17.35,0,0,1-5.4,6.37,24,24,0,0,1-8.25,3.74A42.38,42.38,0,0,1,791,345a78.28,78.28,0,0,1-9.71-.59,57.38,57.38,0,0,1-9.28-1.95V330.57q2.25.78,4.69,1.47c1.62.45,3.26.85,4.9,1.19s3.28.62,4.91.81a38.87,38.87,0,0,0,4.74.29,24.86,24.86,0,0,0,5.81-.58,12.15,12.15,0,0,0,3.9-1.61,6.22,6.22,0,0,0,2.2-2.45,7,7,0,0,0,.68-3.12,5.86,5.86,0,0,0-1.34-3.93,12.48,12.48,0,0,0-3.54-2.81,32.89,32.89,0,0,0-5-2.2q-2.81-1-5.72-2.1c-1.93-.74-3.84-1.59-5.71-2.53a20.75,20.75,0,0,1-5-3.52,16.19,16.19,0,0,1-3.54-5,16.57,16.57,0,0,1-1.35-7,18.81,18.81,0,0,1,1.37-7.13,15.08,15.08,0,0,1,4.3-5.88,21.55,21.55,0,0,1,7.52-4A36.23,36.23,0,0,1,796.9,279c1.27,0,2.6.06,4,.17s2.75.26,4.1.44,2.65.39,3.91.64,2.4.49,3.44.75v11a33.81,33.81,0,0,0-3.42-1.07c-1.23-.33-2.51-.61-3.83-.86s-2.65-.43-4-.56-2.6-.19-3.81-.19a24.21,24.21,0,0,0-5.37.51,11.62,11.62,0,0,0-3.61,1.41,5.44,5.44,0,0,0-2,2.23,6.53,6.53,0,0,0-.64,2.93,4.9,4.9,0,0,0,1.34,3.44,13.16,13.16,0,0,0,3.57,2.59,40.67,40.67,0,0,0,5,2.14q2.81,1,5.76,2.15a59.7,59.7,0,0,1,5.76,2.61,22.42,22.42,0,0,1,5,3.57,16.34,16.34,0,0,1,3.57,5A15.8,15.8,0,0,1,817,324.57Z"
          transform="translate(-501.43 -180.76)"
       
        />
      </clipPath>

      <g clip-path="url(#bigCity)">
        <image
          class="city-gif"
          href="https://media3.giphy.com/media/5oIlxpnB1iIWA/giphy.gif?cid=ecf05e47gg8tp0rjuemknh1zoq72ecora42bvh8kmmgnlh9a&rid=giphy.gif&ct=g"
          x="0"
          y="0"
          width="100%"
          height="100%"
          preserveAspectRatio="xMidYMid meet"
        />
      </g>
      <g clip-path="url(#lights)">
        <image
          class="lights-gif"
          href="https://media4.giphy.com/media/9JxkPTP3alOykb8PmQ/200w.webp?cid=ecf05e47ie3fdciakrvtc0lhrlutxxj7iz4uvgko4yzdwf69&rid=200w.webp&ct=g"
          x="0"
          y="0"
          width="100%"
          height="100%"
          preserveAspectRatio="xMidYMid slice"
        />
      </g>
    </svg>

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(https://images.unsplash.com/photo-1508194261197-0a0e8699867d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1103&q=80) ;
background-color: #00000;
background-position: center;
background-repeat: no-repeat; 
background-size: cover;
  
}

svg {
  flex: 1 1 auto;
  max-width: 60vw;
}
#lights{
  transform: translateY(-20px);
}
#bigCity {
  animation: rise 10s forwards ease-in-out;

}
.city-gif{
  transform: translateY(-90px);
}
@keyframes rise {
  0% {
    transform: translateY(70px);  
  }
  
  100% {
    transform: translateY(-0px);  
  }
}