JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="100%" height="100%" viewBox="0 0 1131 1247" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect class="box" />
        <circle class="innerCircle" cx="50%" cy="50%" r="50%" fill="#FFFFFF" />
        <path id="jazztel" d="M596.912 674.306V665.289H578.926L598.296 631.994H565.437V641.011H581.693L562.669 674.306H596.912Z" />
        <path id="jazztel" d="M670.931 653.497C670.931 646.561 668.856 641.012 664.705 636.503C660.554 632.341 655.02 629.913 648.448 629.913C641.877 629.913 636.688 631.994 632.538 636.503C628.387 640.665 626.312 646.214 626.312 652.803C626.312 659.393 628.387 664.595 632.884 668.757C637.034 672.919 642.568 675 649.14 675C657.442 675 664.013 671.879 668.164 665.636L659.171 661.474C656.404 664.249 652.945 665.636 648.794 665.636C645.681 665.636 642.914 664.942 640.839 663.208C638.764 661.474 637.38 659.046 636.688 655.925H670.931V653.497ZM637.034 646.908C638.072 644.133 639.455 642.399 640.839 641.358C642.914 639.624 645.681 638.931 648.794 638.931C651.561 638.931 653.637 639.624 655.712 641.012C657.787 642.399 659.171 644.48 659.863 646.908H637.034Z" />
        <path id="jazztel" d="M687.534 615H676.811V673.96H687.534V615Z" />
        <path id="jazztel" d="M528.081 631.994V641.011H544.683L525.314 674.306H559.902V665.289H541.57L560.94 631.994H528.081Z" />
        <path id="jazztel" d="M519.433 648.295C519.087 646.908 518.741 645.52 518.05 644.133C516.666 641.359 515.283 638.931 513.207 636.85C511.132 634.769 508.711 633.035 505.944 631.994C504.56 631.301 503.177 630.954 501.793 630.607C500.409 630.26 499.026 630.26 497.296 630.26C494.183 630.26 491.416 630.954 488.995 631.994C487.612 632.688 486.574 633.382 485.536 634.075C484.499 634.769 483.461 635.81 482.423 636.85C481.386 637.89 480.694 638.931 480.002 640.318C478.619 641.705 477.927 642.746 477.581 644.133C476.889 645.52 476.543 646.908 476.197 648.295C475.852 649.682 475.852 651.416 475.852 652.804C475.852 655.925 476.543 658.7 477.581 661.127C478.273 662.515 478.965...

CSS

@keyframes fill {
            0% {
                fill: white;
            }
            50% {
                fill: black;
            }
            100% {
                fill: white;
            }
        }

        #jazztel {
            fill: white;
            animation-name: fill;
            animation-duration: 5s;
        }

        @keyframes colorChange {
            0% {
                fill: #da1884;
            }
            50% {
                fill: #ffffff;
            }
            100% {
                fill: #ffcd00;
            }
        }

        .box {
            fill: #ffcd00;
            width: 100%;
            height: 100%;
            animation: colorChange 5s;
        }

        @keyframes buttonTransition {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1);
                visibility: none;
                opacity: 0;
                display: none;
            }
            100% {
                transform: scale(0);
            }
        }

        .innerCircle {
            animation-duration: 3s;
            animation-name: buttonTransition;
            transform-origin: center center;
        }