JSFiddle - React, Tailwind, and code Playground

by Fernando Leal

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
    
    <!-- Aqui você informa seu texto -->
    <!-- Também é possivel setar o tamanho da font do texto, com o atributo "font-size" -->
    <!-- Text utiliza o #pattern (que é o background animado) declarado nos defs como fill -->
    <text x="50%" text-anchor="middle" y="50%" fill="url(#pattern)"  font-size="32pt">StackOverflow em Português</text>
    
    <defs>  
        <!-- A declaração do gradient -->
        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0">
            <!-- As cores do gradient -->
            <!-- No caso você poderia declarar quantas cores você desejar, especificando os percentuais de offset -->
            <stop offset="0%" style="stop-color:#33235b;"/>
            <stop offset="25%" style="stop-color:#D62229;"/>
            <stop offset="50%" style="stop-color:#E97639;"/>
            <stop offset="75%" style="stop-color:#792042;"/>
            <stop offset="100%" style="stop-color:#33235b;"/>
        </linearGradient>
        
        <!-- Utilize dois gradientes em conjunto para uma animação perfeita  -->
        <!-- A declaração das animações -->
        <pattern id="pattern" x="0" y="0" width="100%" height="100%" patternUnits="userSpaceOnUse">
            <!-- Primeiro frame de animação, animando de 0% até 100% no eixo x-->
            <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)">
                <animate attributeType="XML"
                attributeName="x"
                from="0" to="100%"
                dur="7s"
                repeatCount="indefinite"/>
            </rect>
            <!-- Segundo frame de animação, animando de -100% até 0% no eixo x, preenchendo a animação do frame anterior -->
            <rect x="-100%" y="0" width="100%" height="100%" fill="url(#gradient)">
                <animate attributeType="XML"
                attributeName="x"
          ...