JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#nothing" id="logo"><svg xmlns:cc="http://creativecommons.org/ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" version="1.1" id="logo-ente-pro-ep">

  <style type="text/css">

    #logo-bg{

      fill:#ffffff;

    }

    #ente-e, #ente-n, #ente-t, #ente-e2, #ep-e{

      fill:#123456;

    }

    #pro-p, #pro-r, #pro-o, #ep-p{

      fill:#93de19;

    }

    #ep-p, #ep-e{

      opacity:0;

    }

  </style>

  <circle id="logo-bg" cx="250" cy="250" r="250"></circle>

  <path id="ente-e" d="m 130.62499,125.77187 7.6875,5.34375 q -3.375,14.15625 -12.1875,13.59375 l -41.624996,1.875 -0.1875,3.1875 7.874996,0.5625 9.65625,-0.9375 1.5,1.78125 1.59375,0.0937 11.25,-0.9375 3.1875,0.28125 -0.0937,1.59375 -37.031247,3.84375 -2.906249,20.625 1.593749,0.0937 43.312497,-3.46875 1.40625,1.6875 -0.0937,1.59375 -3.1875,-0.28125 v 1.59375 l 10.96875,2.4375 -0.0937,1.59375 q -3.46875,8.90625 -45.749997,14.4375 l -16.031249,0.5625 1.499999,1.59375 -7.6875,20.25 h -1.59375 l 0.937501,-14.34375 -1.593752,-0.0937 -3.093749,22.125 q 47.718747,-6.375 67.406247,-5.0625 l 7.78126,2.15625 -0.0938,3.1875 -3.1875,-0.1875 1.40625,1.6875 -0.28125,4.78125 q -4.59375,6.00001 -19.5,5.0625 l -0.0937,1.59375 12.75,0.84375 -0.28125,3.1875 -74.156246,10.875 -1.593752,-0.0937 q -7.687501,-1.6875 -7.687501,-4.96874 v -0.28126 l 0.281252,-4.78125 4.406249,-17.24999 -1.499999,-1.68751 3.187499,0.0937 -0.562499,7.96875 1.593749,0.18751 q 0.937501,-7.96876 3.750001,-7.68751 l -1.5,-1.78125 1.125,-15.84375 -3.187501,-0.28125 -2.156248,7.875 1.781249,-1.5 1.593749,0.0937 -0.656249,9.5625 -1.593749,-0.1875 0.281249,-4.6875 -1.593749,-0.0937 -0.187502,3.1875 -1.59375,-0.0937 0.1875,-3.1875 5.0625,-26.90625 -1.593749,-0.0937 3.65625,-7.6875 -1.499999,-1.6875 0.09375,-1.59375 3.468748,-26.90625 1.5,1.6875 1.593752,0.0937 0.187499,-3.1875 -1.03125,-8.0625 2.53125,-14.25 0.281249,-4.78125 1.59375,0.1875 1.500002,1.6875...

CSS

body{
  background:#393939;
}
/*!
 *  Keyframes
 */
@keyframes rotate-center {0% {transform: rotate(0);}100% {transform: rotate(-20deg);}}

@keyframes stroke-paint-ente {0%{stroke-dashoffset:1000;stroke-width:3px;fill:transparent}50%{fill:transparent}99%{stroke-dashoffset:50;stroke-width:2px}100%{stroke-dashoffset:0;stroke-width:0;fill:#123456}}

@keyframes stroke-paint-pro {0%{stroke-dashoffset:1000;stroke-width:3px;fill:transparent}50%{fill:transparent;stroke-width:1px}99%{stroke-dashoffset:50}100%{stroke-dashoffset:0;stroke-width:0;fill:#93de19}}

#logo{
  display:block;
  max-width:30vw;
  animation:rotate-center 200ms ease-out 1500ms forwards;
  transition:translate3d(0, 0, 0);
}
#logo svg{
  width:100%;
  height:auto;
}
#logo-bg{
  transform-origin: 50% 50%;
}
#ente-e, #ente-n, #ente-t, #ente-e2, #ep-e,{
  transition:opacity 250ms;
}
#ente-e, #ente-n, #ente-t, #ente-e2, #pro-p, #pro-r, #pro-o{
  stroke:#1A1A1A;
  stroke-width:2px;
  opacity:1;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
}
#ente-e, #ente-n, #ente-t, #ente-e2,
#pro-p, #pro-r, #pro-o{
  fill:transparent;
}
#ente-e, #ente-n, #ente-t, #ente-e2{
  animation:stroke-paint-ente 2000ms ease-in-out 4ms forwards;
}
#pro-p, #pro-r, #pro-o{
  animation:stroke-paint-pro 2000ms ease-in-out 4ms forwards
}