public/images/hello.svg

<svg fill="none" viewBox="0 0 800 400" width="800" height="400" xmlns="http://www.w3.org/2000/svg">
	<foreignObject width="100%" height="100%">
		<main xmlns="http://www.w3.org/1999/xhtml">
			<style media="screen" type="text/css">
        @font-face {
          src: url('../fonts/bank-gothic/BankGothic-Bold.ttf') format('truetype');
          font-family: 'BankGothic';
          font-display: block;
          font-style: normal;
          font-weight: bold;
        }

        @keyframes glitch {
          0% {
            text-shadow:
               0.05em   0       0 rgba(255,   0,   0, 0.75),
              -0.05em  -0.025em 0 rgba(  0, 255,   0, 0.75),
              -0.025em  0.05em  0 rgba(  0,   0, 255, 0.75);
          }

          19.9% {
            text-shadow:
               0.05em   0       0 rgba(255,   0,   0, 0.75),
              -0.05em  -0.025em 0 rgba(  0, 255,   0, 0.75),
              -0.025em  0.05em  0 rgba(  0,   0, 255, 0.75);
          }

          20% {
            text-shadow:
              -0.05em  -0.025em 0 rgba(255,   0,   0, 0.75),
               0.025em  0.025em 0 rgba(  0, 255,   0, 0.75),
              -0.05em  -0.05em  0 rgba(  0,   0, 255, 0.75);
          }

          49.9% {
            text-shadow:
              -0.05em  -0.025em 0 rgba(255,   0,   0, 0.75),
               0.025em  0.025em 0 rgba(  0, 255,   0, 0.75),
              -0.05em  -0.05em  0 rgba(  0,   0, 255, 0.75);
          }

          50% {
            text-shadow:
              0.025em  0.05em 0 rgba(255,   0,   0, 0.75),
              0.05em   0      0 rgba(  0, 255,   0, 0.75),
              0       -0.05em 0 rgba(  0,   0, 255, 0.75);
          }

          99.9% {
            text-shadow:
              0.025em  0.05em 0 rgba(255,   0,   0, 0.75),
              0.05em   0      0 rgba(  0, 255,   0, 0.75),
              0       -0.05em 0 rgba(  0,   0, 255, 0.75);
          }

          100% {
            text-shadow:
              -0.025em  0       0 rgba(255,   0,   0, 0.75),
              -0.025em -0.025em 0 rgba(  0, 255,   0, 0.75),
              -0.025em -0.05em  0 rgba(  0,   0, 255, 0.75);
          }
        }

        main {
          -webkit-text-rendering: optimizeLegibility;
          -webkit-tap-highlight-color: transparent;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          -webkit-overflow-scrolling: touch;
          -webkit-touch-callout: none;

          text-rendering: optimizeLegibility;
          font-variant-ligatures: none;
          backface-visibility: hidden;

          text-size-adjust: none;
          letter-spacing: normal;
          line-height: normal;
          position: absolute;

          font-kerning: none;
          font-style: normal;
          font-weight: bold;

          user-select: none;
          appearance: none;
          overflow: hidden;

          max-height: 100%;
          min-height: 100%;

          max-width: 100%;
          min-width: 100%;

          height: 100%;
          width: 100%;

          padding: 0;
          margin: 0;
        }

        section {
          transform: translate(-50%, -50%);
          position: absolute;
          margin: auto;
          left: 50%;
          top: 50%;
        }

        h1 {
          font-family: 'BankGothic', 'Helvetica', 'Arial',
            sans-serif, system-ui, monospace;

          text-shadow:
             0.05em   0      0 rgba(255,   0,   0, 0.75),
            -0.025em -0.05em 0 rgba(  0, 255,   0, 0.75),
             0.025em  0.05em 0 rgba(  0,   0, 255, 0.75);

          font-size: clamp(128px, 15vw, 256px);
          animation: glitch 0.5s infinite;
          backface-visibility: hidden;
          text-transform: uppercase;

          text-align: center;
          position: relative;

          font-style: normal;
          font-weight: bold;

          display: block;
          color: #FFFFFF;

          height: 100%;
          width: 100%;

          padding: 0;
          margin: 0;
        }

        h1 span {
          animation: glitch infinite;
          text-align: center;
          position: absolute;

          display: block;
          height: 100%;
          width: 100%;
          z-index: 1;

          left: 0;
          top: 0;
        }

        h1 span:first-child {
          clip-path: polygon(0 0, 100% 0, 100% 33%, 0 66%);
          transform: translate(-0.0125em, -0.025em);
          animation-duration: 0.75s;
          color: #3178c6;
        }

        h1 strong {
          opacity: 0.75;
        }

        h1 span:last-child {
          clip-path: polygon(0 66%, 100% 33%, 100% 100%, 0 100%);
          transform: translate(0.025em, 0.0375em);
          animation-duration: 0.375s;
          color: #f1e05a;
        }

        @media (prefers-reduced-motion: reduce) {
          h1, h1 span {
            animation: none !important;
          }
        }
			</style>

			<section>
				<h1>
          <span aria-hidden="true">Hello!</span>
          <strong aria-hidden="false">Hello!</strong>
          <span aria-hidden="true">Hello!</span>
        </h1>
			</section>
		</main>
	</foreignObject>
</svg>