header.svg

<svg fill="none" width="800" height="200" xmlns="http://www.w3.org/2000/svg">
	<foreignObject width="800px" height="200">
		<div xmlns="http://www.w3.org/1999/xhtml">
			<style>			
				@keyframes gradientBackground {
					0% {
						background-position: 0% 50%;
					}
					50% {
						background-position: 100% 50%;
					}
					100% {
						background-position: 0% 50%;
					}
				}
			
				.container {
					font-family:
						system-ui,
						-apple-system,
						'Segoe UI',
						Roboto,
						Helvetica,
						Arial,
						sans-serif,
						'Apple Color Emoji',
						'Segoe UI Emoji';
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin: 0;
					width: 100%;
					height: 200px;
					background: linear-gradient(-45deg, #fc5c7d, #6a82fb, #05dfd7);
					background-size: 600% 400%;
					animation: gradientBackground 10s ease infinite;
					border-radius: 10px;
					color: white;
					text-align: center;
				}
        
        .wrapper {
          height: 200px;
          /*This part is important for centering*/
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .typing-demo {
          width: 37ch;
          animation: typing 4s steps(37), blink .3s step-end infinite alternate;
          white-space: nowrap;
          overflow: hidden;
          border-right: 3px solid;
          font-family: monospace;
          font-size: 2em;
        }
				.typing-demo b {
					text-decoration: underline;
				}
        @keyframes typing {
          from {
            width: 0
          }
        }
            
        @keyframes blink {
          50% {
            border-color: transparent
          }
        }
			</style>
			<div class="container">
        <div class="wrapper">
            <div class="typing-demo">
             Hello there 🖖, I'm Léo.
            </div>          
        </div>
			</div>
		</div>
	</foreignObject>
</svg>