JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<svg id="theWhySvg"  data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1023">
  <defs>
    <style>
      @keyframes svg-line-animate {
        from { stroke-dashoffset: 2000; }
        to {  stroke-dashoffset: 0; } 
      }
      
      @keyframes svg-polygon-animate {
        from { transform: scale(0,0) }
        to {  transform: scale(1,1) } 
      }
      
      line {
       	stroke-dasharray: 2000;
      	stroke-dashoffset: 2000;
      	animation: svg-line-animate 5s linear forwards;
      }
      
      polygon {
      	transform: scale(0);
        transform-origin: center center;
      	animation: svg-polygon-animate 5s linear forwards;
        animation-delay: 3s;
      }
  
      .cls-1, .cls-2, .cls-3, .cls-4, .cls-6 {
        fill: none;
      }

      .cls-2, .cls-3, .cls-4 {
        stroke: #38324e;
        stroke-miterlimit: 10;
      }

      .cls-2 {
        stroke-width: 3px;
      }

      .cls-3 {
        stroke-width: 2px;
      }

      .cls-5 {
        clip-path: url(#clip-path);
      }

      .cls-6 {
        stroke: #3e3953;
        stroke-linejoin: round;
        stroke-width: 36px;
      }

      .cls-7 {
        fill: #3e3953;
      }

      .cls-8 {
        fill: #0e0727;
      }

      .cls-9 {
        fill: #38324e;
      }
    </style>
    <clipPath id="clip-path">
      <rect class="cls-1" width="1920" height="1023"/>
    </clipPath>
  </defs>
  <g>
    <polygon class="cls-2" points="964 424 999 403 1068 443 1032 464 964 424"/>
    <path class="cls-2" d="M1053,432l101-59q-93-25-66-100-23-13,52-50"/>
    <polyline class="cls-2" points="1140 223 829 43 637 154 846 273 879 254 932 283"/>
  </g>
  <ellipse class="cls-2" cx="1191.5" cy="299" rx="84.5" ry="52"/>
  <g>
    <line class="cls-2" x1="1313" y1="322" x2="1366" y2="291"/>
    <line class="cls-2" x1="1321" y1="327" x2="1374" y2="296"/>
    <line class="cls-2" x1="1329" y1="332" x2="1382" y2="301"/>
    <line...