testLogo anim

by Petr Haluza

HTML

<div id="container">
<div id="megaLogo">
<!--?xml version="1.0" encoding="UTF-8" standalone="no"?--><svg width="100%" height="100%" viewBox="0 0 303 101" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="Artboard1"><rect x="0" y="0" width="302.182" height="100.777" style="fill: none;" class="svg-elem-1"></rect><path d="M34.08,21.463c-12.326,0 -22.395,10.066 -22.395,22.39c0,12.477 10.069,22.542 22.395,22.542c12.471,0 22.542,-10.065 22.542,-22.542c0,-12.324 -10.07,-22.39 -22.542,-22.39m0,7.658c8.264,0 14.879,6.771 14.879,14.882c0,8.271 -6.615,14.879 -14.879,14.879c-8.114,0 -14.729,-6.607 -14.729,-14.879c0,-8.111 6.616,-14.882 14.729,-14.882" style="fill: rgb(255, 255, 255); fill-rule: nonzero;" class="svg-elem-2"></path><path d="M34.08,21.463c-12.326,0 -22.395,10.066 -22.395,22.39c0,12.477 10.069,22.542 22.395,22.542c12.471,0 22.542,-10.065 22.542,-22.542c0,-12.324 -10.07,-22.39 -22.542,-22.39m0,7.658c8.264,0 14.879,6.771 14.879,14.882c0,8.271 -6.615,14.879 -14.879,14.879c-8.114,0 -14.729,-6.607 -14.729,-14.879c0,-8.111 6.616,-14.882 14.729,-14.882" style="fill: rgb(255, 255, 255); fill-rule: nonzero; stroke: rgb(223, 8, 8); stroke-width: 0.18px;" class="svg-elem-3"></path><path d="M10.787,21.157l-7.218,7.52l0,37.116l7.218,0l0,-44.636Z" style="fill: rgb(255, 255, 255); fill-rule: nonzero; stroke: rgb(223, 8, 8); stroke-width: 0.18px;" class="svg-elem-4"></path><path d="M88.48,56.63c-2.25,1.348 -5.107,2.253 -7.963,2.253c-8.113,0 -15.776,-6.608 -15.776,-14.88c0,-8.266 6.608,-14.724 14.722,-14.724c8.27,0 15.181,7.663 15.181,15.929l-0.601,4.358l7.512,-9.021c-1.648,-10.667 -10.815,-18.934 -22.092,-18.934c-12.319,0 -21.939,8.868 -22.242,22.392c-0.148,13.381 10.522,22.695 22.993,22.695l8.266,-10.068Z" style="fill: rgb(255, 255, 255); fill-rule: nonzero; stroke: rgb(223, 8, 8);...

CSS

#container {animation: bgfade 3s both; width:100%; height:100%;display: flex; justify-content: center; align-items: center;}
#megaLogo {width:100%; max-width:800px; padding:1em;}
@media all and (min-width: 600px) {#megaLogo {width:50%;}}

@-webkit-keyframes bgfade {
  0% {background-color: white }
  60% {background-color: white }
  100% {background-color: #ea0000 }
}
@keyframes bgfade {
  0% {background-color: white }
  60% {background-color: white }
  100% {background-color: #ea0000 }
}

/*************************************************** **************************************************/

@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 807.91796875px;
    stroke-dasharray: 807.91796875px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 807.91796875px;
    stroke-dasharray: 807.91796875px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
                       animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
          animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
               animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 236.42868041992188px;
    stroke-dasharray: 236.42868041992188px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 236.42868041992188px;
    stroke-dasharray: 236.42868041992188px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0,...