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

export default function ProductOrganization(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="1337" height="408" viewBox="0 0 1337 408" 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`}>
        Product organization
      </title>
      <desc id={`${uid}-sdw-desc`}>
        Product organization. 11 components. Connections: Chief Product Officer to Design; Chief Product Officer to Engineering; Chief Product Officer to Product management; Design to User research; Design to Brand and UI; Engineering to Platform; Engineering to Web app; Engineering to Mobile apps; Product management to Growth; Product management to Payments.
      </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="30.39" height="30.39" patternUnits="userSpaceOnUse">
          <path d="M0 0.76H30.39M0.76 0V30.39" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1.52" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="672.75" cy="239" r="428.37">
          <stop offset="0" stopColor="#60a5fa" stopOpacity="0.12" />
          <stop offset="1" stopColor="#60a5fa" stopOpacity="0" />
        </radialGradient>
        <symbol id={`${uid}-s1`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" />
        </symbol>
        <symbol id={`${uid}-s2`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 8h16M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm4-2v4" />
        </symbol>
        <symbol id={`${uid}-s3`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m7 8l-4 4l4 4m10-8l4 4l-4 4M14 4l-4 16" />
        </symbol>
        <symbol id={`${uid}-s4`} viewBox="0 0 24 24" overflow="visible">
          <g fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
            <path d="M10 13a2 2 0 1 0 4 0a2 2 0 1 0-4 0m3.45-1.45L15.5 9.5" />
            <path d="M6.4 20a9 9 0 1 1 11.2 0z" />
          </g>
        </symbol>
        <symbol id={`${uid}-s5`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6" />
        </symbol>
        <symbol id={`${uid}-s6`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm0 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm4-7v.01M7 16v.01" />
        </symbol>
        <symbol id={`${uid}-s7`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm5-1h2m-1 13v.01" />
        </symbol>
        <symbol id={`${uid}-s8`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 19h16M4 15l4-6l4 2l4-5l4 4" />
        </symbol>
        <symbol id={`${uid}-s9`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm0 2h18M7 15h.01M11 15h2" />
        </symbol>
      </defs>
      <rect width="1337" height="408" fill={`url(#${uid}-bg)`} />
      <rect width="1337" height="408" fill={`url(#${uid}-grid)`} />
      <rect width="1337" height="408" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          PRODUCT ORGANIZATION
        </tspan>
      </text>
      <text fontSize="11.5" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65.25">
          Three levels, from the chief product officer to the teams, as an org chart
        </tspan>
      </text>
      <g id={`${uid}-e-e1`}>
        <path d="M676 154 L676 172 Q676 180 668 180 L215 180 Q207 180 207 188 L207 210" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M676 154 L676 172 Q676 180 668 180 L215 180 Q207 180 207 188 L207 210" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.82" 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.2904;0.5227;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2904;0.3322;0.9;0.9418;1" dur="4.304s" repeatCount="indefinite" />
        </path>
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M676 154 L676 210" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M676 154 L676 210" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.82" 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.2904;0.3833;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2904;0.3322;0.9;0.9418;1" dur="4.304s" repeatCount="indefinite" />
        </path>
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M676 154 L676 172 Q676 180 684 180 L1137 180 Q1145 180 1145 188 L1145 210" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M676 154 L676 172 Q676 180 684 180 L1137 180 Q1145 180 1145 188 L1145 210" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.82" 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.2904;0.5227;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2904;0.3322;0.9;0.9418;1" dur="4.304s" repeatCount="indefinite" />
        </path>
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M207 268 L207 286 Q207 294 199 294 L119.5 294 Q111.5 294 111.5 302 L111.5 324" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M207 268 L207 286 Q207 294 199 294 L119.5 294 Q111.5 294 111.5 302 L111.5 324" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.82" 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.5785;0.6714;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5785;0.6203;0.9;0.9418;1" dur="4.304s" repeatCount="indefinite" />
        </path>
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M207 268 L207 286 Q207 294 215 294 L294.5 294 Q302.5 294 302.5 302 L302.5 324" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M207 268 L207 286 Q207 294 215 294 L294.5 294 Q302.5 294 302.5 302 L302.5 324" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.82" 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.5785;0.6714;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5785;0.6203;0.9;0.9418;1" dur="4.304s" repeatCount="indefinite" />
        </path>
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M680.25 268 L680.25 286 Q680.25 294 672.25 294 L509 294 Q501 294 501 302 L501 324" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M680.25 268 L680.25 286 Q680.25 294 672.25 294 L509 294 Q501 294 501 302 L501 324" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.82" 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.5785;0.6909;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5785;0.6203;0.9;0.9418;1" dur="4.304s" repeatCount="indefinite" />
        </path>
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M680.25 268 L680.25 324" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M680.25 268 L680.25 324" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.82" 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.5785;0.6714;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5785;0.6203;0.9;0.9418;1" dur="4.304s" repeatCount="indefinite" />
        </path>
      </g>
      <g id={`${uid}-e-e8`}>
        <path d="M680.25 268 L680.25 286 Q680.25 294 688.25 294 L851.5 294 Q859.5 294 859.5 302 L859.5 324" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M680.25 268 L680.25 286 Q680.25 294 688.25 294 L851.5 294 Q859.5 294 859.5 302 L859.5 324" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.82" 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.5785;0.6909;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5785;0.6203;0.9;0.9418;1" dur="4.304s" repeatCount="indefinite" />
        </path>
      </g>
      <g id={`${uid}-e-e9`}>
        <path d="M1145 268 L1145 286 Q1145 294 1137 294 L1064 294 Q1056 294 1056 302 L1056 324" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M1145 268 L1145 286 Q1145 294 1137 294 L1064 294 Q1056 294 1056 302 L1056 324" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.82" 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.5785;0.6714;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5785;0.6203;0.9;0.9418;1" dur="4.304s" repeatCount="indefinite" />
        </path>
      </g>
      <g id={`${uid}-e-e10`}>
        <path d="M1145 268 L1145 286 Q1145 294 1153 294 L1226 294 Q1234 294 1234 302 L1234 324" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M1145 268 L1145 286 Q1145 294 1153 294 L1226 294 Q1234 294 1234 302 L1234 324" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.82" 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.5785;0.6714;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5785;0.6203;0.9;0.9418;1" dur="4.304s" repeatCount="indefinite" />
        </path>
      </g>
      <g id={`${uid}-n-cpo`}>
        <rect x="570" y="96" width="212" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="570" y="96" width="212" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <rect x="586" y="109" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="586" y="109" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s1`} x="592.4" y="115.4" width="19.2" height="19.2" />
        <text fontSize="10" fontWeight="700" letterSpacing="0.8" fill="#9d9fa0">
          <tspan x="630" y="120.05">
            CHIEF PRODUCT OFFICER
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="630" y="137.75">
            Strategy and roadmap
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-design`}>
        <rect x="132" y="210" width="150" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="132" y="210" width="150" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <rect x="148" y="223" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="148" y="223" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s2`} x="154.4" y="229.4" width="19.2" height="19.2" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="192" y="234.41">
            DESIGN
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="192" y="251.75">
            9 people
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-engineering`}>
        <rect x="603.25" y="210" width="154" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="603.25" y="210" width="154" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <rect x="619.25" y="223" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="619.25" y="223" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s3`} x="625.65" y="229.4" width="19.2" height="19.2" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="663.25" y="234.41">
            ENGINEERING
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="663.25" y="251.75">
            24 people
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-pm`}>
        <rect x="1038" y="210" width="214" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="1038" y="210" width="214" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <rect x="1054" y="223" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="1054" y="223" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s4`} x="1060.4" y="229.4" width="19.2" height="19.2" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="1098" y="234.41">
            PRODUCT MANAGEMENT
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="1098" y="251.75">
            7 people
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-research`}>
        <rect x="28" y="324" width="167" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="28" y="324" width="167" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <rect x="44" y="336" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="44" y="336" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="50.4" y="342.4" width="19.2" height="19.2" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="88" y="355.91">
            USER RESEARCH
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-brand`}>
        <rect x="223" y="324" width="159" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="223" y="324" width="159" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <rect x="239" y="336" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="239" y="336" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s2`} x="245.4" y="342.4" width="19.2" height="19.2" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="283" y="355.91">
            BRAND AND UI
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-platform`}>
        <rect x="426" y="324" width="150" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="426" y="324" width="150" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <rect x="442" y="336" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="442" y="336" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="448.4" y="342.4" width="19.2" height="19.2" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="486" y="355.91">
            PLATFORM
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-web`}>
        <rect x="604" y="324" width="150" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="604" y="324" width="150" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <rect x="620" y="336" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="620" y="336" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s2`} x="626.4" y="342.4" width="19.2" height="19.2" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="664" y="355.91">
            WEB APP
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-mobile`}>
        <rect x="782" y="324" width="155" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="782" y="324" width="155" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <rect x="798" y="336" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="798" y="336" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="804.4" y="342.4" width="19.2" height="19.2" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="842" y="355.91">
            MOBILE APPS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-growth`}>
        <rect x="981" y="324" width="150" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="981" y="324" width="150" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <rect x="997" y="336" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="997" y="336" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="1003.4" y="342.4" width="19.2" height="19.2" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="1041" y="355.91">
            GROWTH
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-payments`}>
        <rect x="1159" y="324" width="150" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="1159" y="324" width="150" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <rect x="1175" y="336" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="1175" y="336" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.2044;0.8982;0.94;1" dur="4.304s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="1181.4" y="342.4" width="19.2" height="19.2" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="1219" y="355.91">
            PAYMENTS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <path d="M676 154 L676 172 Q676 180 668 180 L215 180 Q207 180 207 188 L207 210" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.65" pathLength="1" strokeDasharray="0.08 2" strokeDashoffset="0.08" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.08;0.08;-0.92;-1;-1" keyTimes="0;0.2904;0.5227;0.5402;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2904;0.2927;0.5402;0.5425;1" dur="4.304s" repeatCount="indefinite" />
        </path>
        <circle r="3.8" fill="#60a5fa" opacity="0">
          <animateMotion path="M676 154 L676 172 Q676 180 668 180 L215 180 Q207 180 207 188 L207 210" dur="4.304s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.2904;0.5227;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.2556;0.2904;0.5785;0.6133;1" dur="4.304s" repeatCount="indefinite" />
        </circle>
        <path d="M676 154 L676 210" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.65" 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.2904;0.3833;0.4298;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2904;0.2927;0.4298;0.4321;1" dur="4.304s" repeatCount="indefinite" />
        </path>
        <circle r="3.8" fill="#60a5fa" opacity="0">
          <animateMotion path="M676 154 L676 210" dur="4.304s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.2904;0.3833;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.2556;0.2904;0.4391;0.4739;1" dur="4.304s" repeatCount="indefinite" />
        </circle>
        <path d="M676 154 L676 172 Q676 180 684 180 L1137 180 Q1145 180 1145 188 L1145 210" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.65" pathLength="1" strokeDasharray="0.08 2" strokeDashoffset="0.08" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.08;0.08;-0.92;-1;-1" keyTimes="0;0.2904;0.5227;0.5402;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2904;0.2927;0.5402;0.5425;1" dur="4.304s" repeatCount="indefinite" />
        </path>
        <circle r="3.8" fill="#60a5fa" opacity="0">
          <animateMotion path="M676 154 L676 172 Q676 180 684 180 L1137 180 Q1145 180 1145 188 L1145 210" dur="4.304s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.2904;0.5227;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.2556;0.2904;0.5785;0.6133;1" dur="4.304s" repeatCount="indefinite" />
        </circle>
        <path d="M207 268 L207 286 Q207 294 199 294 L119.5 294 Q111.5 294 111.5 302 L111.5 324" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.65" pathLength="1" strokeDasharray="0.26 2" strokeDashoffset="0.26" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.26;0.26;-0.74;-1;-1" keyTimes="0;0.5785;0.6714;0.6957;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5785;0.5808;0.6957;0.698;1" dur="4.304s" repeatCount="indefinite" />
        </path>
        <circle r="3.8" fill="#60a5fa" opacity="0">
          <animateMotion path="M207 268 L207 286 Q207 294 199 294 L119.5 294 Q111.5 294 111.5 302 L111.5 324" dur="4.304s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5785;0.6714;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.5436;0.5785;0.6714;0.7063;1" dur="4.304s" repeatCount="indefinite" />
        </circle>
        <path d="M207 268 L207 286 Q207 294 215 294 L294.5 294 Q302.5 294 302.5 302 L302.5 324" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.65" pathLength="1" strokeDasharray="0.26 2" strokeDashoffset="0.26" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.26;0.26;-0.74;-1;-1" keyTimes="0;0.5785;0.6714;0.6957;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5785;0.5808;0.6957;0.698;1" dur="4.304s" repeatCount="indefinite" />
        </path>
        <circle r="3.8" fill="#60a5fa" opacity="0">
          <animateMotion path="M207 268 L207 286 Q207 294 215 294 L294.5 294 Q302.5 294 302.5 302 L302.5 324" dur="4.304s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5785;0.6714;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.5436;0.5785;0.6714;0.7063;1" dur="4.304s" repeatCount="indefinite" />
        </circle>
        <path d="M680.25 268 L680.25 286 Q680.25 294 672.25 294 L509 294 Q501 294 501 302 L501 324" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.65" pathLength="1" strokeDasharray="0.17 2" strokeDashoffset="0.17" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.17;0.17;-0.83;-1;-1" keyTimes="0;0.5785;0.6909;0.7098;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5785;0.5808;0.7098;0.7121;1" dur="4.304s" repeatCount="indefinite" />
        </path>
        <circle r="3.8" fill="#60a5fa" opacity="0">
          <animateMotion path="M680.25 268 L680.25 286 Q680.25 294 672.25 294 L509 294 Q501 294 501 302 L501 324" dur="4.304s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5785;0.6909;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.5436;0.5785;0.6909;0.7258;1" dur="4.304s" repeatCount="indefinite" />
        </circle>
        <path d="M680.25 268 L680.25 324" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.65" 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.5785;0.6714;0.7179;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5785;0.5808;0.7179;0.7202;1" dur="4.304s" repeatCount="indefinite" />
        </path>
        <circle r="3.8" fill="#60a5fa" opacity="0">
          <animateMotion path="M680.25 268 L680.25 324" dur="4.304s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5785;0.6714;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.5436;0.5785;0.6714;0.7063;1" dur="4.304s" repeatCount="indefinite" />
        </circle>
        <path d="M680.25 268 L680.25 286 Q680.25 294 688.25 294 L851.5 294 Q859.5 294 859.5 302 L859.5 324" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.65" pathLength="1" strokeDasharray="0.17 2" strokeDashoffset="0.17" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.17;0.17;-0.83;-1;-1" keyTimes="0;0.5785;0.6909;0.7098;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5785;0.5808;0.7098;0.7121;1" dur="4.304s" repeatCount="indefinite" />
        </path>
        <circle r="3.8" fill="#60a5fa" opacity="0">
          <animateMotion path="M680.25 268 L680.25 286 Q680.25 294 688.25 294 L851.5 294 Q859.5 294 859.5 302 L859.5 324" dur="4.304s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5785;0.6909;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.5436;0.5785;0.6909;0.7258;1" dur="4.304s" repeatCount="indefinite" />
        </circle>
        <path d="M1145 268 L1145 286 Q1145 294 1137 294 L1064 294 Q1056 294 1056 302 L1056 324" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.65" pathLength="1" strokeDasharray="0.27 2" strokeDashoffset="0.27" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.27;0.27;-0.73;-1;-1" keyTimes="0;0.5785;0.6714;0.6967;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5785;0.5808;0.6967;0.6991;1" dur="4.304s" repeatCount="indefinite" />
        </path>
        <circle r="3.8" fill="#60a5fa" opacity="0">
          <animateMotion path="M1145 268 L1145 286 Q1145 294 1137 294 L1064 294 Q1056 294 1056 302 L1056 324" dur="4.304s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5785;0.6714;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.5436;0.5785;0.6714;0.7063;1" dur="4.304s" repeatCount="indefinite" />
        </circle>
        <path d="M1145 268 L1145 286 Q1145 294 1153 294 L1226 294 Q1234 294 1234 302 L1234 324" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.65" pathLength="1" strokeDasharray="0.27 2" strokeDashoffset="0.27" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.27;0.27;-0.73;-1;-1" keyTimes="0;0.5785;0.6714;0.6967;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="4.304s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5785;0.5808;0.6967;0.6991;1" dur="4.304s" repeatCount="indefinite" />
        </path>
        <circle r="3.8" fill="#60a5fa" opacity="0">
          <animateMotion path="M1145 268 L1145 286 Q1145 294 1153 294 L1226 294 Q1234 294 1234 302 L1234 324" dur="4.304s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5785;0.6714;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.5436;0.5785;0.6714;0.7063;1" dur="4.304s" repeatCount="indefinite" />
        </circle>
      </g>
    </svg>
  );
}
