JSFiddle - React, Tailwind, and code Playground

by zono

HTML

<div id="magContainer">
            <svg id="theMag" xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="500"
   height="511"
   id="svg2">
  <metadata
     id="metadata8">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs6" />
  <g
     id="g2987">
    <path
       d="M 0,255.5 0,0 250,0 500,0 500,255.5 500,511 250,511 0,511 0,255.5 z"
       id="path3003"
       style="fill:#fbfbfb" />
    <path
       d="m 225,509.23684 c -4.94878,-0.37209 -19.48843,-3.11767 -26,-4.90968 -16.18083,-4.45302 -26.21245,-7.62143 -36,-11.37033 -3.025,-1.15866 -6.73165,-2.48985 -8.23699,-2.95821 -6.00577,-1.86855 -34.20394,-16.99909 -46.20551,-24.79288 -6.86615,-4.45887 -8.674251,-5.89913 -21.355724,-17.01118 -3.330119,-2.91799 -7.841472,-6.59972 -10.02523,-8.18163 -2.183759,-1.58191 -5.222283,-4.51741 -6.752277,-6.52333 -1.529993,-2.00593 -4.16386,-5.13568 -5.853038,-6.95501 C 59.55503,421.1319 50.531014,409.74363 43.5,399.94279 39.204644,393.95531 32.626184,382.65267 28.60652,374.35388 c -1.903742,-3.93037 -3.911183,-7.42414 -4.460979,-7.76393 -0.549797,-0.33979 -1.513812,-2.29904 -2.142258,-4.35388 C 21.374838,360.18123 20.4792,357.6 20.012975,356.5 c -0.466225,-1.1 -2.186188,-5.15 -3.82214,-9 -3.09708,-7.28857 -8.9645271,-26.07561 -10.3063477,-33 C 5.4581672,312.3 4.599776,308.475 3.9769512,306 2.0889651,298.49746 1.2050922,275.23387 1.5073523,241 1.767526,211.53282 1.9962538,207.7068 3.9584239,200 7.5404472,185.93091 15.33312,162.21246 17.593206,158.5 c 0.669662,-1.1 2.454617,-5.15 3.966567,-9 4.864693,-12.38736 20.73661,-39.08112 26.813083,-45.09486...

CSS

#magContainer {
                margin: 0px auto;
                text-align: center;
            }

            #theMag {
                animation: magAnimation 5s infinite;
                -webkit-animation: magAnimation 5s infinite;
            }
            @keyframes magAnimation
            {
            0%   {
                scale(0.2);
            }
            25%  {
                transform: rotate(90deg) scale(0.4);
            }
            50%  {
                transform: rotate(180deg) scale(0.6);
            }
            75%  {
                transform: rotate(270deg)  scale(0.8);
            }
            100% {
                transform: rotate(360deg)  scale(1);
            }
            }
            @-webkit-keyframes magAnimation
            {
            0%   {
                -webkit-scale(0.2);
            }
            25%  {
                -webkit-transform: rotate(90deg) scale(0.4);
            }
            50%  {
                -webkit-transform: rotate(180deg) scale(0.6);
            }
            75%  {
                -webkit-transform: rotate(270deg)  scale(0.8);
            }
            100% {
                -webkit-transform: rotate(360deg)  scale(1);
            }
            }