Untitled

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style-logo.css" />
    </head>
    <body>
        <div class="container">
                <svg>
                    <defs>
                        <linearGradient id="logo-gradient" x1="0%" y1="50%" x2="100%" y2="50%" >
                            <stop offset="0%" stop-color="#ff0000">
                                <animate attributeName="stop-color" values="#ff0000; #ffbaba; ff0000" dur="2s" repeatCount="indefinite"></animate>
                            </stop>

                            <stop offset="100%" stop-color="#ff0000">
                                <animate attributeName="stop-color" values="#ffbaba; #ff0000; ffbaba" dur="2s" repeatCount="indefinite"></animate>
                            </stop>
                        </linearGradient>
                        </defs>
                        <g
                        inkscape:label="Layer 1"
                        inkscape:groupmode="layer"
                        id="layer1"
                        transform="translate(0,0)">
                       <ellipse
                          style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.82638693;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                          id="path3806"
                          cx="77.870033"
                          cy="67.606384"
                          rx="50.098793"
                          ry="57.289078" />
                       <path
                       id="glasses"
                          style="opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.16916132;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                          d="m 29.528823,40.540189 c 33.035764,4.256146 65.162154,4.256146 96.858617,0 9.19171,7.532604 14.05936,27.19135 0,45.190761 -31.696463,-14.72295 -63.822853,-14.72295 -96.858617,0 -13.693536,-17.999411 -8.8259,-36.566004 0,-45.190761 z"
                          />
                          <defs>
                                <linearGradient id="binary-gradient" x1="0%" y1="50%" x2="100%" y2="50%" >
                                    <stop offset="0%" stop-color="#ffffff">
                                        <animate attributeName="stop-color" values="none; #ffffff; none" dur="2s" repeatCount="indefinite"></animate>
                                    </stop>

                                    <stop offset="100%" stop-color="#000000">
                                        <animate attributeName="stop-color" values="#ffffff; none; ffffff" dur="2s" repeatCount="indefinite"></animate>
                                    </stop>
                                </linearGradient>
                                </defs>
                          <text
       xml:space="preserve"
       style="font-size:12px;line-height:1.25;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332"
       x="34"
       y="60"
       id="text4646"><tspan
         id="binary"
         x="32"
         y="64"
         style="stroke-width:0.46458332">10011010010101</tspan></text>
                     </g>
                </svg>
        </div>

    </body>
</html>


svg {
    width: 150px;
    height: 150px;
}
.container {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

ellipse {
    opacity: 10;
    stroke-dasharray: 355 !important;
    animation: stroke-circle .35s linear;
}
#binary {
    font-family: Arial, Helvetica, sans-serif;
    fill: url('#binary-gradient');
}
#glasses {
    fill: url('#logo-gradient') !important;
    animation: hide, fill;
    animation-duration: 0.35s, .25s;
    animation-delay: 0s, 0.35s;
}
@keyframes hide {
    from {
        fill-opacity: 0;
    }
    to {
        fill-opacity: 0;
    }
}
@keyframes stroke-circle {
    from {
        stroke-dashoffset: 355;
    }
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes fill {
    from { fill-opacity: 0;}
    to { fill-opacity: 1;}
}