banner.svg

<svg fill="none" width="100%" height="200" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" 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 {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    height: 100px;
                    background: linear-gradient(-45deg, #fc5c7d, #6a82fb, #05dfd7);
                    background-size: 600% 400%;
                    animation: gradientBackground 10s ease infinite;
                    border-radius: 10px;
                    color: white;
                }

                .wrapper {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .typing-demo {
                    width: 21ch;
                    animation: typing 4s steps(21) infinite, 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 {
                    0% {
                        width: 0
                    }

                    50% {
                        width: 100%
                    }

                    80% {
                        width: 100%
                    }

                    90% {
                        width: 0
                    }

                    100% {
                        width: 0
                    }
                }

                @keyframes blink {
                    50% {
                        border-color: transparent
                    }
                }
            </style>
            <div class="container">
                <div class="wrapper">
                    <div class="typing-demo">
                        Saluton! I'm <b>ToMatt</b>.
                    </div>
                </div>
            </div>
        </div>
    </foreignObject>
</svg>