JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="logo" class="logo" xmlns="http://www.w3.org/2000/svg" width="70mm" height="206.202" viewBox="0 0 7000 5455.77" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd">
    <defs>
        <style>
            .logo-bg-1 {
                fill: #2b2a29
            }
        </style>
        <linearGradient id="logo-gradient" gradientUnits="userSpaceOnUse" x1="2316.66" y1="4174.4" x2="6653.43" y2="2047.57">
            <stop offset="0" stop-color="#504333"></stop>
            <stop offset=".541" stop-color="#ecdda1"></stop>
            <stop offset="1" stop-color="#866340"></stop>
        </linearGradient>
    </defs>
    <path class="logo-bg-2" d="M6614.44 1920.8l-77.97-253.51c-13.64-44.3-60.02-65.74-105.3-55.77l-165.11 36.38c-103.76 29.38-215.95-159.75-140.47-236.72l111.03-127.48c30.43-34.95 33.83-85.99 1.5-119.16l-185.18-189.91-185.15-189.91c-32.37-33.17-83.45-31.05-119.15-1.48L5618.37 891c-78.27 72.99-265.29-42.52-235.15-145.15l37.98-164.74c10.41-45.16-10.59-91.79-54.75-105.85l-252.74-80.41-252.76-80.43c-44.15-14.06-88.26 11.88-105.84 54.75l-64.21 156.39c-36.05 105.13-255.39 82.53-269.28-27.72l-31.01-166.18c-8.49-45.58-46.38-79.92-92.47-75.16l-263.83 27.24-263.83 27.25c-46.1 4.75-76.15 46.12-75.16 92.47l3.61 169.02c8.76 108.51-199.45 179.84-259.07 88.75l-100.8-135.75c-27.61-37.21-76.72-51.45-116.05-26.95l-225.14 140.25-225.12 140.24c-39.31 24.51-48.18 74.87-26.96 116.09l77.4 150.29c56.06 94.62-101.5 248.56-194.79 190.31l-148.45-80.89c-40.69-22.17-91.25-14.52-116.66 24.23l-145.47 221.81-145.46 221.78c-17.83 27.2-16.68 59.67-1.78 86.47h530.91c343.67-562.39 963.3-937.76 1670.62-937.76 1080.57 0 1956.54 875.97 1956.54 1956.54 0 1080.56-875.97 1956.52-1956.54 1956.52-519.48 0-1013.07-204.01-1380.97-570.62h-523.06l-51.42 60.61c-29.96 35.32-32.73 86.38.06 119.14l187.59 187.53 187.6 187.45c32.78 32.78 83.83 30.01 119.15 0l128.85-109.43c78.32-74.99 265.47 40.69 233.58...

CSS

#logo path {
    fill: #fff;
    stroke: #101010;
    stroke-width: 30px;
    stroke-dasharray: 10000;
    animation-duration: 2.5s;
    animation-timing-function: linear;
    animation-fill-mode: both;
}
.logo-bg-2 {
    animation-name: logo-bg-2;
}
@keyframes logo-bg-2{
  0%{
    fill:#fff;
    stroke-dashoffset:10000
  }
  40%{
    fill:#fff
  }
  80%{
    stroke-dashoffset:0
  }
  100%{
    stroke-width:0;
    fill:url(#logo-gradient)
  }
}