// Generated by orrery. Edit the diagram spec and re-render instead of editing this file.
import { type SVGProps, useId } from "react";

export default function OrderToCash(props: SVGProps<SVGSVGElement>) {
  const uid = useId().replace(/[^A-Za-z0-9_-]/g, "");
  return (
    <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="856" height="1527" viewBox="0 0 856 1527" role="img" aria-labelledby={`${uid}-sdw-title ${uid}-sdw-desc`} fontFamily="'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace" {...props}>
      <title id={`${uid}-sdw-title`}>
        Order to cash
      </title>
      <desc id={`${uid}-sdw-desc`}>
        Order to cash. 16 components in 5 groups. Connections: Goods needed to Place order; Place order to Pay invoice; Pay invoice to Receive goods; Receive goods to Order fulfilled; Order received to Stock and credit OK?; Stock and credit OK? to (Yes); Stock and credit OK? to Reject order (No); Reject order to Order rejected; to Pick and pack; Pick and pack to Ship goods; Ship goods to ; to Send invoice; Send invoice to Record payment; Record payment to ; to Order closed; Place order to Order received (Purchase order); Send invoice to Pay invoice (Invoice); Pay invoice to Record payment (Payment); Ship goods to Receive goods (Goods).
      </desc>
      <defs>
        <linearGradient id={`${uid}-bg`} x1="0" y1="0" x2="0.34" y2="0.94">
          <stop offset="0" stopColor="#0e1a24" />
          <stop offset="0.6" stopColor="#0b1012" />
        </linearGradient>
        <pattern id={`${uid}-grid`} width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M0 0.5H20M0.5 0V20" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="425.25" cy="827.5" r="559.74">
          <stop offset="0" stopColor="#60a5fa" stopOpacity="0.12" />
          <stop offset="1" stopColor="#60a5fa" stopOpacity="0" />
        </radialGradient>
        <mask id={`${uid}-m-e16`} maskUnits="userSpaceOnUse" x="0" y="0" width="856" height="1527">
          <path d="M162.5 331 L219 331 Q227 331 227 339 L227 429 Q227 437 235 437 L352 437" fill="none" stroke="#ffffff" strokeWidth="7.2" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1">
            <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.1605;0.2391;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          </path>
        </mask>
        <mask id={`${uid}-m-e17`} maskUnits="userSpaceOnUse" x="0" y="0" width="856" height="1527">
          <path d="M683 833 L644 833 Q636 833 636 841 L636 1061 Q636 1069 628 1069 L163.5 1069" fill="none" stroke="#ffffff" strokeWidth="7.2" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1">
            <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.4736;0.5586;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          </path>
        </mask>
        <mask id={`${uid}-m-e18`} maskUnits="userSpaceOnUse" x="0" y="0" width="856" height="1527">
          <path d="M163 1089 L219 1089 Q227 1089 227 1097 L227 1209 Q227 1217 235 1217 L671.5 1217" fill="none" stroke="#ffffff" strokeWidth="7.2" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1">
            <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.579;0.6639;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          </path>
        </mask>
        <mask id={`${uid}-m-e19`} maskUnits="userSpaceOnUse" x="0" y="0" width="856" height="1527">
          <path d="M516 961 L223 961 Q215 961 215 969 L215 1209 Q215 1217 207 1217 L173.5 1217" fill="none" stroke="#ffffff" strokeWidth="7.2" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1">
            <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.4946;0.5795;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          </path>
        </mask>
      </defs>
      <rect width="856" height="1527" fill={`url(#${uid}-bg)`} />
      <rect width="856" height="1527" fill={`url(#${uid}-grid)`} />
      <rect width="856" height="1527" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          ORDER TO CASH
        </tspan>
      </text>
      <text fontSize="11.25" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65.16">
          A customer order through sales, the warehouse and finance in BPMN 2.0, with message flows between the two participants
        </tspan>
      </text>
      <g id={`${uid}-g-customer`}>
        <rect x="28" y="96" width="169" height="1403" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="28" y="96" width="169" height="1403" fill="none" stroke="#60a5fa" strokeOpacity="0.45" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0297;0.045;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-supplier`}>
        <rect x="257" y="96" width="571" height="1403" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="257" y="96" width="571" height="1403" fill="none" stroke="#60a5fa" strokeOpacity="0.45" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0297;0.045;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-sales`}>
        <rect x="257" y="126" width="227" height="1373" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="257" y="126" width="227" height="1373" fill="none" stroke="#60a5fa" strokeOpacity="0.45" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0297;0.045;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-warehouse`}>
        <rect x="484" y="126" width="164" height="1373" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="484" y="126" width="164" height="1373" fill="none" stroke="#60a5fa" strokeOpacity="0.45" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0297;0.045;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-finance`}>
        <rect x="648" y="126" width="180" height="1373" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="648" y="126" width="180" height="1373" fill="none" stroke="#60a5fa" strokeOpacity="0.45" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0297;0.045;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M112.5 243 L112.5 290.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M108.5 285 L112.5 291 L116.5 285" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M112.5 243 L112.5 290.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.1062;0.1401;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1062;0.1215;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M108.5 285 L112.5 291 L116.5 285" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1401;0.1554;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M112.5 371 L112.5 1048.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M108.5 1043 L112.5 1049 L116.5 1043" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M112.5 371 L112.5 1048.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.1605;0.2455;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1605;0.1758;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M108.5 1043 L112.5 1049 L116.5 1043" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2455;0.2607;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M112.5 1129 L112.5 1176.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M108.5 1171 L112.5 1177 L116.5 1171" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M112.5 1129 L112.5 1176.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.579;0.6129;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.579;0.5942;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M108.5 1171 L112.5 1177 L116.5 1171" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6129;0.6282;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M112.5 1257 L112.5 1304.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M108.5 1299 L112.5 1305 L116.5 1299" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M112.5 1257 L112.5 1304.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.6333;0.6673;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6333;0.6486;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M108.5 1299 L112.5 1305 L116.5 1299" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6673;0.6826;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M370.5 478 L370.5 525.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M366.5 520 L370.5 526 L374.5 520" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M370.5 478 L370.5 525.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.2595;0.2934;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2595;0.2748;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M366.5 520 L370.5 526 L374.5 520" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2934;0.3087;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M370.5 616 L370.5 622.25 Q370.5 628.5 376.75 628.5 L427 628.5 Q435 628.5 435 636.5 L435 679.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M431 674 L435 680 L439 674" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M370.5 616 L370.5 622.25 Q370.5 628.5 376.75 628.5 L427 628.5 Q435 628.5 435 636.5 L435 679.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.3138;0.3479;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3138;0.3291;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M431 674 L435 680 L439 674" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3479;0.3632;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M370.5 616 L370.5 622.25 Q370.5 628.5 364.25 628.5 L341.5 628.5 Q333.5 628.5 333.5 636.5 L333.5 664.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M329.5 659 L333.5 665 L337.5 659" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e8`}>
        <path d="M333.5 745 L333.5 749.5 Q333.5 754 338 754 L362.5 754 Q370.5 754 370.5 762 L370.5 803" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M366.5 797.5 L370.5 803.5 L374.5 797.5" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e9`}>
        <path d="M435 730 L435 746 Q435 754 443 754 L558 754 Q566 754 566 762 L566 792.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M562 787 L566 793 L570 787" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M435 730 L435 746 Q435 754 443 754 L558 754 Q566 754 566 762 L566 792.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.3683;0.4198;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3683;0.3836;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M562 787 L566 793 L570 787" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4198;0.4351;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e10`}>
        <path d="M566 873 L566 920.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M562 915 L566 921 L570 915" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M566 873 L566 920.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.4402;0.4742;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4402;0.4555;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M562 915 L566 921 L570 915" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4742;0.4895;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e11`}>
        <path d="M566 1001 L566 1285 Q566 1293 558 1293 L378.5 1293 Q370.5 1293 370.5 1301 L370.5 1309" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M366.5 1303.5 L370.5 1309.5 L374.5 1303.5" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M566 1001 L566 1285 Q566 1293 558 1293 L378.5 1293 Q370.5 1293 370.5 1301 L370.5 1309" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.4946;0.5795;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4946;0.5098;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M366.5 1303.5 L370.5 1309.5 L374.5 1303.5" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5795;0.5948;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e12`}>
        <path d="M435 730 L435 746 Q435 754 443 754 L730 754 Q738 754 738 762 L738 792.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M734 787 L738 793 L742 787" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M435 730 L435 746 Q435 754 443 754 L730 754 Q738 754 738 762 L738 792.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.3683;0.4533;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3683;0.3836;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M734 787 L738 793 L742 787" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4533;0.4685;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e13`}>
        <path d="M738 873 L738 1176.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M734 1171 L738 1177 L742 1171" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M738 873 L738 1176.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.4736;0.5543;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4736;0.4889;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M734 1171 L738 1177 L742 1171" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5543;0.5696;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e14`}>
        <path d="M738 1257 L738 1285 Q738 1293 730 1293 L378.5 1293 Q370.5 1293 370.5 1301 L370.5 1309" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M366.5 1303.5 L370.5 1309.5 L374.5 1303.5" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M738 1257 L738 1285 Q738 1293 730 1293 L378.5 1293 Q370.5 1293 370.5 1301 L370.5 1309" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.6843;0.7692;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6843;0.6996;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M366.5 1303.5 L370.5 1309.5 L374.5 1303.5" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7692;0.7845;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e15`}>
        <path d="M370.5 1359.5 L370.5 1411.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M366.5 1406 L370.5 1412 L374.5 1406" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M370.5 1359.5 L370.5 1411.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.7896;0.8236;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7896;0.8049;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M366.5 1406 L370.5 1412 L374.5 1406" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.8236;0.8388;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e16`}>
        <path d="M162.5 331 L219 331 Q227 331 227 339 L227 429 Q227 437 235 437 L352 437" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4 3" />
        <path d="M346.5 441 L352.5 437 L346.5 433" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx="166.5" cy="331" r="3.5" fill="#0b1012" stroke="#6d7071" strokeWidth="1" strokeLinejoin="round" />
        <path d="M343.5 443 L352.5 437 L343.5 431 Z" fill="#0b1012" stroke="#6d7071" strokeWidth="1" strokeLinejoin="round" />
        <g mask={`url(#${uid}-m-e16)`} opacity="0">
          <path d="M162.5 331 L219 331 Q227 331 227 339 L227 429 Q227 437 235 437 L352 437" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4 3" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1605;0.1758;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <g opacity="0">
          <path d="M346.5 441 L352.5 437 L346.5 433" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2391;0.2544;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <circle cx="166.5" cy="331" r="3.5" fill="#0b1012" stroke="#6d7071" strokeWidth="1" strokeLinejoin="round" />
        <path d="M343.5 443 L352.5 437 L343.5 431 Z" fill="#0b1012" stroke="#6d7071" strokeWidth="1" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e17`}>
        <path d="M683 833 L644 833 Q636 833 636 841 L636 1061 Q636 1069 628 1069 L163.5 1069" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4 3" />
        <path d="M169 1065 L163 1069 L169 1073" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx="679" cy="833" r="3.5" fill="#0b1012" stroke="#6d7071" strokeWidth="1" strokeLinejoin="round" />
        <path d="M172 1063 L163 1069 L172 1075 Z" fill="#0b1012" stroke="#6d7071" strokeWidth="1" strokeLinejoin="round" />
        <g mask={`url(#${uid}-m-e17)`} opacity="0">
          <path d="M683 833 L644 833 Q636 833 636 841 L636 1061 Q636 1069 628 1069 L163.5 1069" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4 3" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4736;0.4889;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <g opacity="0">
          <path d="M169 1065 L163 1069 L169 1073" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5586;0.5739;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <circle cx="679" cy="833" r="3.5" fill="#0b1012" stroke="#6d7071" strokeWidth="1" strokeLinejoin="round" />
        <path d="M172 1063 L163 1069 L172 1075 Z" fill="#0b1012" stroke="#6d7071" strokeWidth="1" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e18`}>
        <path d="M163 1089 L219 1089 Q227 1089 227 1097 L227 1209 Q227 1217 235 1217 L671.5 1217" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4 3" />
        <path d="M666 1221 L672 1217 L666 1213" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx="167" cy="1089" r="3.5" fill="#0b1012" stroke="#6d7071" strokeWidth="1" strokeLinejoin="round" />
        <path d="M663 1223 L672 1217 L663 1211 Z" fill="#0b1012" stroke="#6d7071" strokeWidth="1" strokeLinejoin="round" />
        <g mask={`url(#${uid}-m-e18)`} opacity="0">
          <path d="M163 1089 L219 1089 Q227 1089 227 1097 L227 1209 Q227 1217 235 1217 L671.5 1217" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4 3" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.579;0.5942;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <g opacity="0">
          <path d="M666 1221 L672 1217 L666 1213" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6639;0.6792;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <circle cx="167" cy="1089" r="3.5" fill="#0b1012" stroke="#6d7071" strokeWidth="1" strokeLinejoin="round" />
        <path d="M663 1223 L672 1217 L663 1211 Z" fill="#0b1012" stroke="#6d7071" strokeWidth="1" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e19`}>
        <path d="M516 961 L223 961 Q215 961 215 969 L215 1209 Q215 1217 207 1217 L173.5 1217" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4 3" />
        <path d="M179 1213 L173 1217 L179 1221" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx="512" cy="961" r="3.5" fill="#0b1012" stroke="#6d7071" strokeWidth="1" strokeLinejoin="round" />
        <path d="M182 1211 L173 1217 L182 1223 Z" fill="#0b1012" stroke="#6d7071" strokeWidth="1" strokeLinejoin="round" />
        <g mask={`url(#${uid}-m-e19)`} opacity="0">
          <path d="M516 961 L223 961 Q215 961 215 969 L215 1209 Q215 1217 207 1217 L173.5 1217" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4 3" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4946;0.5098;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <g opacity="0">
          <path d="M179 1213 L173 1217 L179 1221" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5795;0.5948;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <circle cx="512" cy="961" r="3.5" fill="#0b1012" stroke="#6d7071" strokeWidth="1" strokeLinejoin="round" />
        <path d="M182 1211 L173 1217 L182 1223 Z" fill="#0b1012" stroke="#6d7071" strokeWidth="1" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-el-e6`}>
        <rect x="441" y="636.5" width="33" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="457.79" y="650.37">
            YES
          </tspan>
        </text>
        <g opacity="0">
          <rect x="441" y="636.5" width="33" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#60a5fa" textAnchor="middle">
            <tspan x="457.79" y="650.37">
              YES
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3138;0.3291;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e7`}>
        <rect x="339.5" y="636.5" width="28" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="353.79" y="650.37">
            NO
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e16`}>
        <rect x="233" y="339" width="96" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="281.29" y="352.87">
            PURCHASE ORDER
          </tspan>
        </text>
        <g opacity="0">
          <rect x="233" y="339" width="96" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#60a5fa" textAnchor="middle">
            <tspan x="281.29" y="352.87">
              PURCHASE ORDER
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1605;0.1758;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e17`}>
        <rect x="578" y="1034" width="52" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="604.29" y="1047.87">
            INVOICE
          </tspan>
        </text>
        <g opacity="0">
          <rect x="578" y="1034" width="52" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#60a5fa" textAnchor="middle">
            <tspan x="604.29" y="1047.87">
              INVOICE
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4736;0.4889;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e18`}>
        <rect x="419.5" y="1192" width="60" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="449.79" y="1205.87">
            PAYMENT
          </tspan>
        </text>
        <g opacity="0">
          <rect x="419.5" y="1192" width="60" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#60a5fa" textAnchor="middle">
            <tspan x="449.79" y="1205.87">
              PAYMENT
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.579;0.5942;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e19`}>
        <rect x="341.5" y="936" width="48" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="365.79" y="949.87">
            GOODS
          </tspan>
        </text>
        <g opacity="0">
          <rect x="341.5" y="936" width="48" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#60a5fa" textAnchor="middle">
            <tspan x="365.79" y="949.87">
              GOODS
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4946;0.5098;0.9;0.9153;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-gh-customer`}>
        <rect x="28" y="96" width="169" height="30" fill="#ffffff" fillOpacity="0.03" />
        <path d="M28 126H197" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="28" y="96" width="169" height="30" fill="#60a5fa" fillOpacity="0.06" />
          <path d="M28 126H197" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0297;0.045;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb" textAnchor="middle">
          <tspan x="113.05" y="114.91">
            CUSTOMER
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-supplier`}>
        <rect x="257" y="96" width="571" height="30" fill="#ffffff" fillOpacity="0.03" />
        <path d="M257 126H828" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="257" y="96" width="571" height="30" fill="#60a5fa" fillOpacity="0.06" />
          <path d="M257 126H828" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0297;0.045;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb" textAnchor="middle">
          <tspan x="543.04" y="114.91">
            SUPPLIER
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-sales`}>
        <rect x="257" y="126" width="227" height="30" fill="#ffffff" fillOpacity="0.03" />
        <path d="M257 156H484" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="257" y="126" width="227" height="30" fill="#60a5fa" fillOpacity="0.06" />
          <path d="M257 156H484" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0297;0.045;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0" textAnchor="middle">
          <tspan x="371.05" y="144.91">
            SALES
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-warehouse`}>
        <rect x="484" y="126" width="164" height="30" fill="#ffffff" fillOpacity="0.03" />
        <path d="M484 156H648" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="484" y="126" width="164" height="30" fill="#60a5fa" fillOpacity="0.06" />
          <path d="M484 156H648" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0297;0.045;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0" textAnchor="middle">
          <tspan x="566.55" y="144.91">
            WAREHOUSE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-finance`}>
        <rect x="648" y="126" width="180" height="30" fill="#ffffff" fillOpacity="0.03" />
        <path d="M648 156H828" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="648" y="126" width="180" height="30" fill="#60a5fa" fillOpacity="0.06" />
          <path d="M648 156H828" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0297;0.045;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0" textAnchor="middle">
          <tspan x="738.55" y="144.91">
            FINANCE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-need`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <circle cx="112.5" cy="202" r="18" />
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <circle cx="112.5" cy="202" r="18" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0595;0.0747;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="112.94" y="238.36">
            GOODS NEEDED
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-place`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="62.5" y="291" width="100" height="80" rx="10" />
          <g fill="none" stroke="#919394" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
            <g strokeWidth="1">
              <circle cx="76.5" cy="302.2" r="2.9" />
              <path d="M71 311.5 V309.5 C71 306.9 73.5 305.8 76.5 305.8 C79.5 305.8 82 306.9 82 309.5 V311.5 Z" />
            </g>
          </g>
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <rect x="62.5" y="291" width="100" height="80" rx="10" />
            <g fill="none" stroke="#60a5fa" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
              <g strokeWidth="1">
                <circle cx="76.5" cy="302.2" r="2.9" />
                <path d="M71 311.5 V309.5 C71 306.9 73.5 305.8 76.5 305.8 C79.5 305.8 82 306.9 82 309.5 V311.5 Z" />
              </g>
            </g>
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0595;0.0747;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="112.94" y="334.91">
            PLACE ORDER
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-pay`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="62" y="1049" width="101" height="80" rx="10" />
          <g fill="none" stroke="#919394" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
            <g strokeWidth="1">
              <circle cx="76" cy="1060.2" r="2.9" />
              <path d="M70.5 1069.5 V1067.5 C70.5 1064.9 73 1063.8 76 1063.8 C79 1063.8 81.5 1064.9 81.5 1067.5 V1069.5 Z" />
            </g>
          </g>
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <rect x="62" y="1049" width="101" height="80" rx="10" />
            <g fill="none" stroke="#60a5fa" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
              <g strokeWidth="1">
                <circle cx="76" cy="1060.2" r="2.9" />
                <path d="M70.5 1069.5 V1067.5 C70.5 1064.9 73 1063.8 76 1063.8 C79 1063.8 81.5 1064.9 81.5 1067.5 V1069.5 Z" />
              </g>
            </g>
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0595;0.0747;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="112.94" y="1092.91">
            PAY INVOICE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-receive`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="52" y="1177" width="121" height="80" rx="10" />
          <g fill="none" stroke="#919394" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
            <g strokeWidth="1">
              <rect x="59.5" y="1186.5" width="13" height="9" rx="0.5" />
              <path d="M59.5 1186.5 L66 1191.45 L72.5 1186.5" />
            </g>
          </g>
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <rect x="52" y="1177" width="121" height="80" rx="10" />
            <g fill="none" stroke="#60a5fa" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
              <g strokeWidth="1">
                <rect x="59.5" y="1186.5" width="13" height="9" rx="0.5" />
                <path d="M59.5 1186.5 L66 1191.45 L72.5 1186.5" />
              </g>
            </g>
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0595;0.0747;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="112.94" y="1220.91">
            RECEIVE GOODS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-done`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <circle cx="112.5" cy="1323" r="18" />
          <g fill="none" stroke="#919394" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="112.5" cy="1323" r="17.13" strokeWidth="3" />
          </g>
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <circle cx="112.5" cy="1323" r="18" />
            <g fill="none" stroke="#60a5fa" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="112.5" cy="1323" r="17.13" strokeWidth="3" />
            </g>
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0595;0.0747;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.76" fill="#9d9fa0" textAnchor="middle">
          <tspan x="112.89" y="1358.82">
            ORDER FULFILLED
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-received`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <circle cx="370.5" cy="437" r="18" />
          <g fill="none" stroke="#919394" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
            <rect x="361" y="430.5" width="19" height="13" rx="0.5" />
            <path d="M361 430.5 L370.5 437.65 L380 430.5" />
          </g>
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <circle cx="370.5" cy="437" r="18" />
            <g fill="none" stroke="#60a5fa" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
              <rect x="361" y="430.5" width="19" height="13" rx="0.5" />
              <path d="M361 430.5 L370.5 437.65 L380 430.5" />
            </g>
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0595;0.0747;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="370.94" y="473.35">
            ORDER RECEIVED
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-valid`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <path d="M370.5 526 L395.5 551 L370.5 576 L345.5 551 Z" />
          <g fill="none" stroke="#919394" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
            <path d="M363 543.5 L378 558.5 M378 543.5 L363 558.5" strokeWidth="3" />
          </g>
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <path d="M370.5 526 L395.5 551 L370.5 576 L345.5 551 Z" />
            <g fill="none" stroke="#60a5fa" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
              <path d="M363 543.5 L378 558.5 M378 543.5 L363 558.5" strokeWidth="3" />
            </g>
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0595;0.0747;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="370.92" y="594.18">
            STOCK AND CREDIT
          </tspan>
          <tspan x="370.92" y="611.08">
            OK?
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-reject`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="281" y="665" width="105" height="80" rx="10" />
          <g fill="none" stroke="#919394" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
            <g strokeWidth="1">
              <path d="M289.21 674 L300.79 674 L295 678.55 Z" fill="#919394" stroke="none" />
              <path d="M288 674.95 L295 680.45 L302 674.95 L302 684 L288 684 Z" fill="#919394" stroke="none" />
            </g>
          </g>
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <rect x="281" y="665" width="105" height="80" rx="10" />
            <g fill="none" stroke="#60a5fa" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
              <g strokeWidth="1">
                <path d="M289.21 674 L300.79 674 L295 678.55 Z" fill="#60a5fa" stroke="none" />
                <path d="M288 674.95 L295 680.45 L302 674.95 L302 684 L288 684 Z" fill="#60a5fa" stroke="none" />
              </g>
            </g>
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0595;0.0747;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="333.94" y="708.91">
            REJECT ORDER
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-rejected`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <circle cx="370.5" cy="821.5" r="18" />
          <g fill="none" stroke="#919394" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="370.5" cy="821.5" r="17.13" strokeWidth="3" />
          </g>
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <circle cx="370.5" cy="821.5" r="18" />
            <g fill="none" stroke="#60a5fa" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="370.5" cy="821.5" r="17.13" strokeWidth="3" />
            </g>
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0595;0.0747;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="370.93" y="857.77">
            ORDER REJECTED
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-split`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <path d="M435 680 L460 705 L435 730 L410 705 Z" />
          <g fill="none" stroke="#919394" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
            <path d="M435 694 V716 M424 705 H446" strokeWidth="3" />
          </g>
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <path d="M435 680 L460 705 L435 730 L410 705 Z" />
            <g fill="none" stroke="#60a5fa" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
              <path d="M435 694 V716 M424 705 H446" strokeWidth="3" />
            </g>
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0595;0.0747;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-n-join`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <path d="M370.5 1309.5 L395.5 1334.5 L370.5 1359.5 L345.5 1334.5 Z" />
          <g fill="none" stroke="#919394" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
            <path d="M370.5 1323.5 V1345.5 M359.5 1334.5 H381.5" strokeWidth="3" />
          </g>
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <path d="M370.5 1309.5 L395.5 1334.5 L370.5 1359.5 L345.5 1334.5 Z" />
            <g fill="none" stroke="#60a5fa" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
              <path d="M370.5 1323.5 V1345.5 M359.5 1334.5 H381.5" strokeWidth="3" />
            </g>
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0595;0.0747;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-n-closed`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <circle cx="370.5" cy="1430" r="18" />
          <g fill="none" stroke="#919394" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="370.5" cy="1430" r="17.13" strokeWidth="3" />
          </g>
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <circle cx="370.5" cy="1430" r="18" />
            <g fill="none" stroke="#60a5fa" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="370.5" cy="1430" r="17.13" strokeWidth="3" />
            </g>
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0595;0.0747;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="370.94" y="1466.36">
            ORDER CLOSED
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-pick`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="508" y="793" width="116" height="80" rx="10" />
          <g fill="none" stroke="#919394" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
            <g strokeWidth="1">
              <path d="M515.56 811.61 V806.57 C516.49 805.45 518.17 803.77 520.04 802.09 C520.69 801.53 521.72 802 521.25 802.93 L520.32 804.71 H528.07 A0.89 0.89 0 0 1 528.07 806.48 H522.84 H528.63 A0.89 0.89 0 0 1 528.63 808.25 H522.84 H527.88 A0.89 0.89 0 0 1 527.88 810.03 H522.84 H526.57 A0.89 0.89 0 0 1 526.57 811.8 H518.73 Z" />
            </g>
          </g>
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <rect x="508" y="793" width="116" height="80" rx="10" />
            <g fill="none" stroke="#60a5fa" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
              <g strokeWidth="1">
                <path d="M515.56 811.61 V806.57 C516.49 805.45 518.17 803.77 520.04 802.09 C520.69 801.53 521.72 802 521.25 802.93 L520.32 804.71 H528.07 A0.89 0.89 0 0 1 528.07 806.48 H522.84 H528.63 A0.89 0.89 0 0 1 528.63 808.25 H522.84 H527.88 A0.89 0.89 0 0 1 527.88 810.03 H522.84 H526.57 A0.89 0.89 0 0 1 526.57 811.8 H518.73 Z" />
              </g>
            </g>
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0595;0.0747;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="566.44" y="836.91">
            PICK AND PACK
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-ship`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="516" y="921" width="100" height="80" rx="10" />
          <g fill="none" stroke="#919394" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
            <g strokeWidth="1">
              <path d="M524.21 930 L535.79 930 L530 934.55 Z" fill="#919394" stroke="none" />
              <path d="M523 930.95 L530 936.45 L537 930.95 L537 940 L523 940 Z" fill="#919394" stroke="none" />
            </g>
          </g>
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <rect x="516" y="921" width="100" height="80" rx="10" />
            <g fill="none" stroke="#60a5fa" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
              <g strokeWidth="1">
                <path d="M524.21 930 L535.79 930 L530 934.55 Z" fill="#60a5fa" stroke="none" />
                <path d="M523 930.95 L530 936.45 L537 930.95 L537 940 L523 940 Z" fill="#60a5fa" stroke="none" />
              </g>
            </g>
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0595;0.0747;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="566.44" y="964.91">
            SHIP GOODS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-invoice`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="683" y="793" width="110" height="80" rx="10" />
          <g fill="none" stroke="#919394" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
            <g strokeWidth="1">
              <path d="M695.84 802.34 L696.07 800.47 L697.93 800.47 L698.16 802.34 L699.48 802.89 L700.96 801.72 L702.28 803.04 L701.11 804.52 L701.66 805.84 L703.53 806.07 L703.53 807.93 L701.66 808.16 L701.11 809.48 L702.28 810.96 L700.96 812.28 L699.48 811.11 L698.16 811.66 L697.93 813.53 L696.07 813.53 L695.84 811.66 L694.52 811.11 L693.04 812.28 L691.72 810.96 L692.89 809.48 L692.34 808.16 L690.47 807.93 L690.47 806.07 L692.34 805.84 L692.89 804.52 L691.72 803.04 L693.04 801.72 L694.52 802.89 Z" />
              <circle cx="697" cy="807" r="2" />
            </g>
          </g>
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <rect x="683" y="793" width="110" height="80" rx="10" />
            <g fill="none" stroke="#60a5fa" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
              <g strokeWidth="1">
                <path d="M695.84 802.34 L696.07 800.47 L697.93 800.47 L698.16 802.34 L699.48 802.89 L700.96 801.72 L702.28 803.04 L701.11 804.52 L701.66 805.84 L703.53 806.07 L703.53 807.93 L701.66 808.16 L701.11 809.48 L702.28 810.96 L700.96 812.28 L699.48 811.11 L698.16 811.66 L697.93 813.53 L696.07 813.53 L695.84 811.66 L694.52 811.11 L693.04 812.28 L691.72 810.96 L692.89 809.48 L692.34 808.16 L690.47 807.93 L690.47 806.07 L692.34 805.84 L692.89 804.52 L691.72 803.04 L693.04 801.72 L694.52 802.89 Z" />
                <circle cx="697" cy="807" r="2" />
              </g>
            </g>
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0595;0.0747;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="738.45" y="836.91">
            SEND INVOICE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-payment`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="672" y="1177" width="132" height="80" rx="10" />
          <g fill="none" stroke="#919394" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
            <g strokeWidth="1">
              <rect x="679.5" y="1186.5" width="13" height="9" rx="0.5" />
              <path d="M679.5 1186.5 L686 1191.45 L692.5 1186.5" />
            </g>
          </g>
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <rect x="672" y="1177" width="132" height="80" rx="10" />
            <g fill="none" stroke="#60a5fa" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
              <g strokeWidth="1">
                <rect x="679.5" y="1186.5" width="13" height="9" rx="0.5" />
                <path d="M679.5 1186.5 L686 1191.45 L692.5 1186.5" />
              </g>
            </g>
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0595;0.0747;0.9247;0.94;1" dur="11.774s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="738.45" y="1220.91">
            RECORD PAYMENT
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <path d="M112.5 243 L112.5 290.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.5 2" strokeDashoffset="0.5" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.5;0.5;-0.5;-1;-1" keyTimes="0;0.1062;0.1401;0.1571;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1062;0.107;0.1571;0.158;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M112.5 243 L112.5 290.5" dur="11.774s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.1062;0.1401;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0934;0.1062;0.1605;0.1733;1" dur="11.774s" repeatCount="indefinite" />
        </circle>
        <path d="M112.5 371 L112.5 1048.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.04 2" strokeDashoffset="0.04" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.04;0.04;-0.96;-1;-1" keyTimes="0;0.1605;0.2455;0.2487;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1605;0.1614;0.2487;0.2496;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M112.5 371 L112.5 1048.5" dur="11.774s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.1605;0.2455;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1478;0.1605;0.579;0.5917;1" dur="11.774s" repeatCount="indefinite" />
        </circle>
        <path d="M112.5 1129 L112.5 1176.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.5 2" strokeDashoffset="0.5" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.5;0.5;-0.5;-1;-1" keyTimes="0;0.579;0.6129;0.6299;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.579;0.5798;0.6299;0.6308;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M112.5 1129 L112.5 1176.5" dur="11.774s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.579;0.6129;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5662;0.579;0.6333;0.646;1" dur="11.774s" repeatCount="indefinite" />
        </circle>
        <path d="M112.5 1257 L112.5 1304.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.5 2" strokeDashoffset="0.5" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.5;0.5;-0.5;-1;-1" keyTimes="0;0.6333;0.6673;0.6843;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6333;0.6342;0.6843;0.6851;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M112.5 1257 L112.5 1304.5" dur="11.774s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6333;0.6673;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6206;0.6333;0.6673;0.68;1" dur="11.774s" repeatCount="indefinite" />
        </circle>
        <path d="M370.5 478 L370.5 525.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.5 2" strokeDashoffset="0.5" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.5;0.5;-0.5;-1;-1" keyTimes="0;0.2595;0.2934;0.3104;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2595;0.2603;0.3104;0.3113;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M370.5 478 L370.5 525.5" dur="11.774s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.2595;0.2934;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2467;0.2595;0.3138;0.3266;1" dur="11.774s" repeatCount="indefinite" />
        </circle>
        <path d="M370.5 616 L370.5 622.25 Q370.5 628.5 376.75 628.5 L427 628.5 Q435 628.5 435 636.5 L435 679.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.2 2" strokeDashoffset="0.2" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.2;0.2;-0.8;-1;-1" keyTimes="0;0.3138;0.3479;0.3549;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3138;0.3147;0.3549;0.3557;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M370.5 616 L370.5 622.25 Q370.5 628.5 376.75 628.5 L427 628.5 Q435 628.5 435 636.5 L435 679.5" dur="11.774s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3138;0.3479;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3011;0.3138;0.3683;0.3811;1" dur="11.774s" repeatCount="indefinite" />
        </circle>
        <path d="M435 730 L435 746 Q435 754 443 754 L558 754 Q566 754 566 762 L566 792.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.13 2" strokeDashoffset="0.13" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.13;0.13;-0.87;-1;-1" keyTimes="0;0.3683;0.4198;0.4267;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3683;0.3692;0.4267;0.4276;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M435 730 L435 746 Q435 754 443 754 L558 754 Q566 754 566 762 L566 792.5" dur="11.774s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3683;0.4198;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3556;0.3683;0.4402;0.4529;1" dur="11.774s" repeatCount="indefinite" />
        </circle>
        <path d="M566 873 L566 920.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.5 2" strokeDashoffset="0.5" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.5;0.5;-0.5;-1;-1" keyTimes="0;0.4402;0.4742;0.4912;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4402;0.441;0.4912;0.492;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M566 873 L566 920.5" dur="11.774s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4402;0.4742;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4275;0.4402;0.4946;0.5073;1" dur="11.774s" repeatCount="indefinite" />
        </circle>
        <path d="M566 1001 L566 1285 Q566 1293 558 1293 L378.5 1293 Q370.5 1293 370.5 1301 L370.5 1309" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.05 2" strokeDashoffset="0.05" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.05;0.05;-0.95;-1;-1" keyTimes="0;0.4946;0.5795;0.5839;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4946;0.4954;0.5839;0.5847;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M566 1001 L566 1285 Q566 1293 558 1293 L378.5 1293 Q370.5 1293 370.5 1301 L370.5 1309" dur="11.774s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4946;0.5795;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4818;0.4946;0.7896;0.8023;1" dur="11.774s" repeatCount="indefinite" />
        </circle>
        <path d="M435 730 L435 746 Q435 754 443 754 L730 754 Q738 754 738 762 L738 792.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.07 2" strokeDashoffset="0.07" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.07;0.07;-0.93;-1;-1" keyTimes="0;0.3683;0.4533;0.4593;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3683;0.3692;0.4593;0.4601;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M435 730 L435 746 Q435 754 443 754 L730 754 Q738 754 738 762 L738 792.5" dur="11.774s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3683;0.4533;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3556;0.3683;0.4736;0.4864;1" dur="11.774s" repeatCount="indefinite" />
        </circle>
        <path d="M738 873 L738 1176.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.09 2" strokeDashoffset="0.09" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.09;0.09;-0.91;-1;-1" keyTimes="0;0.4736;0.5543;0.5612;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4736;0.4745;0.5612;0.5621;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M738 873 L738 1176.5" dur="11.774s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4736;0.5543;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4609;0.4736;0.6843;0.697;1" dur="11.774s" repeatCount="indefinite" />
        </circle>
        <path d="M738 1257 L738 1285 Q738 1293 730 1293 L378.5 1293 Q370.5 1293 370.5 1301 L370.5 1309" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.06 2" strokeDashoffset="0.06" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.06;0.06;-0.94;-1;-1" keyTimes="0;0.6843;0.7692;0.7745;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6843;0.6851;0.7745;0.7753;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M738 1257 L738 1285 Q738 1293 730 1293 L378.5 1293 Q370.5 1293 370.5 1301 L370.5 1309" dur="11.774s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6843;0.7692;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6715;0.6843;0.7896;0.8023;1" dur="11.774s" repeatCount="indefinite" />
        </circle>
        <path d="M370.5 1359.5 L370.5 1411.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.5 2" strokeDashoffset="0.5" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.5;0.5;-0.5;-1;-1" keyTimes="0;0.7896;0.8236;0.8405;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7896;0.7904;0.8405;0.8414;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M370.5 1359.5 L370.5 1411.5" dur="11.774s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.7896;0.8236;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7768;0.7896;0.8236;0.8363;1" dur="11.774s" repeatCount="indefinite" />
        </circle>
        <path d="M162.5 331 L219 331 Q227 331 227 339 L227 429 Q227 437 235 437 L352 437" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.09 2" strokeDashoffset="0.09" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.09;0.09;-0.91;-1;-1" keyTimes="0;0.1605;0.2391;0.246;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1605;0.1614;0.246;0.2468;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M162.5 331 L219 331 Q227 331 227 339 L227 429 Q227 437 235 437 L352 437" dur="11.774s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.1605;0.2391;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1478;0.1605;0.2595;0.2722;1" dur="11.774s" repeatCount="indefinite" />
        </circle>
        <path d="M683 833 L644 833 Q636 833 636 841 L636 1061 Q636 1069 628 1069 L163.5 1069" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.03 2" strokeDashoffset="0.03" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.03;0.03;-0.97;-1;-1" keyTimes="0;0.4736;0.5586;0.5615;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4736;0.4745;0.5615;0.5623;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M683 833 L644 833 Q636 833 636 841 L636 1061 Q636 1069 628 1069 L163.5 1069" dur="11.774s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4736;0.5586;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4609;0.4736;0.579;0.5917;1" dur="11.774s" repeatCount="indefinite" />
        </circle>
        <path d="M163 1089 L219 1089 Q227 1089 227 1097 L227 1209 Q227 1217 235 1217 L671.5 1217" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.04 2" strokeDashoffset="0.04" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.04;0.04;-0.96;-1;-1" keyTimes="0;0.579;0.6639;0.6674;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.579;0.5798;0.6674;0.6682;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M163 1089 L219 1089 Q227 1089 227 1097 L227 1209 Q227 1217 235 1217 L671.5 1217" dur="11.774s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.579;0.6639;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5662;0.579;0.6843;0.697;1" dur="11.774s" repeatCount="indefinite" />
        </circle>
        <path d="M516 961 L223 961 Q215 961 215 969 L215 1209 Q215 1217 207 1217 L173.5 1217" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.04 2" strokeDashoffset="0.04" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.04;0.04;-0.96;-1;-1" keyTimes="0;0.4946;0.5795;0.5832;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="11.774s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4946;0.4954;0.5832;0.584;1" dur="11.774s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M516 961 L223 961 Q215 961 215 969 L215 1209 Q215 1217 207 1217 L173.5 1217" dur="11.774s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4946;0.5795;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4818;0.4946;0.6333;0.646;1" dur="11.774s" repeatCount="indefinite" />
        </circle>
      </g>
    </svg>
  );
}
