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

export default function MLOpsOnGoogleCloudWithAgentPlatform(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="962" height="2298" viewBox="0 0 962 2298" 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`}>
        MLOps on Google Cloud with Agent Platform
      </title>
      <desc id={`${uid}-sdw-desc`}>
        MLOps on Google Cloud with Agent Platform. 18 components in 5 groups. Connections: Data scientists to Source repository (push); Source repository to Cloud Build (build trigger); Cloud Build to Artifact Registry (push); Artifact Registry to Cloud Run functions (pipeline template); Cloud Scheduler to Pub/Sub (publish); Cloud Logging to Pub/Sub (publish); Pub/Sub to Cloud Run functions (subscribe); Cloud Run functions to Agent Platform Pipelines (run); BigQuery to Validate and transform (query); Feature Store to Validate and transform (fetch features); Validate and transform to Managed Training; Managed Training to Evaluate and validate; Evaluate and validate to Model Registry (register); Model Registry to Endpoint (deploy); Endpoint to Model Monitoring (request logs); Cloud Logging to Model Monitoring (drift alerts); Agent Platform Pipelines to Cloud Storage; Agent Platform Pipelines to Vertex ML Metadata.
      </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="21.86" height="21.86" patternUnits="userSpaceOnUse">
          <path d="M0 0.55H21.86M0.55 0V21.86" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1.09" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="474.5" cy="1381.5" r="878.99">
          <stop offset="0" stopColor="#60a5fa" stopOpacity="0.12" />
          <stop offset="1" stopColor="#60a5fa" stopOpacity="0" />
        </radialGradient>
        <mask id={`${uid}-m-e6`} maskUnits="userSpaceOnUse" x="0" y="0" width="962" height="2298">
          <path d="M672 694 L672 701.5 Q672 709 664.5 709 L567 709 Q559 709 559 717 L559 770 Q559 778 551 778 L502 778 Q494 778 494 786 L494 810.45" fill="none" stroke="#ffffff" strokeWidth="7.87" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1">
            <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.5225;0.5833;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          </path>
        </mask>
        <mask id={`${uid}-m-e7`} maskUnits="userSpaceOnUse" x="0" y="0" width="962" height="2298">
          <path d="M494 869 L494 945 Q494 953 486 953 L263 953 Q255 953 255 961 L255 985.45" fill="none" stroke="#ffffff" strokeWidth="7.87" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1">
            <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.6007;0.6728;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          </path>
        </mask>
        <mask id={`${uid}-m-e8`} maskUnits="userSpaceOnUse" x="0" y="0" width="962" height="2298">
          <path d="M221 1044 L221 1128 Q221 1136 229 1136 L487 1136 Q495 1136 495 1144 L495 1164.45" fill="none" stroke="#ffffff" strokeWidth="7.87" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1">
            <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.6901;0.7623;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          </path>
        </mask>
        <mask id={`${uid}-m-e16`} maskUnits="userSpaceOnUse" x="0" y="0" width="962" height="2298">
          <path d="M728 694.55 L728 2028 Q728 2036 720 2036 L699 2036 Q691 2036 691 2044 L691 2069" fill="none" stroke="#ffffff" strokeWidth="7.87" pathLength="1" strokeDasharray="1 1" strokeDashoffset="-1">
            <animate attributeName="stroke-dashoffset" values="-1;-1;0;0" keyTimes="0;0.433;0.5052;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          </path>
        </mask>
        <mask id={`${uid}-m-e17`} maskUnits="userSpaceOnUse" x="0" y="0" width="962" height="2298">
          <path d="M495 1507 L495 1518 Q495 1526 487 1526 L286 1526 Q278 1526 278 1534 L278 1558.45" fill="none" stroke="#ffffff" strokeWidth="7.87" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1">
            <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.7796;0.8351;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          </path>
        </mask>
        <symbol id={`${uid}-s1`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 7a4 4 0 1 0 8 0a4 4 0 1 0-8 0M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-17.87a4 4 0 0 1 0 7.75M21 21v-2a4 4 0 0 0-3-3.85" />
        </symbol>
        <symbol id={`${uid}-s2`} viewBox="0 0 256 250" overflow="visible">
          <g fill="#919394">
            <path fill="#919394" d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46c6.397 1.185 8.746-2.777 8.746-6.158c0-3.052-.12-13.135-.174-23.83c-35.61 7.742-43.124-15.103-43.124-15.103c-5.823-14.795-14.213-18.73-14.213-18.73c-11.613-7.944.876-7.78.876-7.78c12.853.902 19.621 13.19 19.621 13.19c11.417 19.568 29.945 13.911 37.249 10.64c1.149-8.272 4.466-13.92 8.127-17.116c-28.431-3.236-58.318-14.212-58.318-63.258c0-13.975 5-25.394 13.188-34.358c-1.329-3.224-5.71-16.242 1.24-33.874c0 0 10.749-3.44 35.21 13.121c10.21-2.836 21.16-4.258 32.038-4.307c10.878.049 21.837 1.47 32.066 4.307c24.431-16.56 35.165-13.12 35.165-13.12c6.967 17.63 2.584 30.65 1.255 33.873c8.207 8.964 13.173 20.383 13.173 34.358c0 49.163-29.944 59.988-58.447 63.157c4.591 3.972 8.682 11.762 8.682 23.704c0 17.126-.148 30.91-.148 35.126c0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002C256 57.307 198.691 0 128.001 0m-80.06 182.34c-.282.636-1.283.827-2.194.39c-.929-.417-1.45-1.284-1.15-1.922c.276-.655 1.279-.838 2.205-.399c.93.418 1.46 1.293 1.139 1.931m6.296 5.618c-.61.566-1.804.303-2.614-.591c-.837-.892-.994-2.086-.375-2.66c.63-.566 1.787-.301 2.626.591c.838.903 1 2.088.363 2.66m4.32 7.188c-.785.545-2.067.034-2.86-1.104c-.784-1.138-.784-2.503.017-3.05c.795-.547 2.058-.055 2.861 1.075c.782 1.157.782 2.522-.019 3.08m7.304 8.325c-.701.774-2.196.566-3.29-.49c-1.119-1.032-1.43-2.496-.726-3.27c.71-.776 2.213-.558 3.315.49c1.11 1.03 1.45 2.505.701 3.27m9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033c-1.448-.439-2.395-1.613-2.103-2.626c.301-1.01 1.747-1.484 3.207-1.028c1.446.436 2.396 1.602 2.095 2.622m10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95c-1.53.034-2.769-.82-2.786-1.86c0-1.065 1.202-1.932 2.733-1.958c1.522-.03 2.768.818 2.768 1.868m10.555-.405c.182 1.03-.875 2.088-2.387 2.37c-1.485.271-2.861-.365-3.05-1.386c-.184-1.056.893-2.114 2.376-2.387c1.514-.263 2.868.356 3.061 1.403" />
          </g>
        </symbol>
        <symbol id={`${uid}-s3`} viewBox="0 0 512 512" overflow="visible">
          <rect width="512" height="512" fill="none" />
          <path fill="#9aa0a6" d="M349 272h-15.5c-8.837 0-16-7.163-16-16s7.163-16 16-16H349c42.458 0 77-34.542 77-77s-34.542-77-77-77c-8.837 0-16-7.163-16-16s7.163-16 16-16c60.103 0 109 48.897 109 109s-48.897 109-109 109M163 458c-60.103 0-109-48.897-109-109s48.897-109 109-109h15.5c8.837 0 16 7.163 16 16s-7.163 16-16 16H163c-42.458 0-77 34.542-77 77s34.542 77 77 77c8.837 0 16 7.163 16 16s-7.163 16-16 16" />
          <path fill="#4285f4" d="M163 458v-32c42.458 0 77-34.542 77-77V163c0-60.103 48.897-109 109-109v32c-42.458 0-77 34.542-77 77v186c0 60.103-48.897 109-109 109" />
        </symbol>
        <filter id={`${uid}-f1`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feFlood floodColor="#919394" />
          <feComposite in2="SourceAlpha" operator="in" />
        </filter>
        <symbol id={`${uid}-s4`} viewBox="0 0 512 512" overflow="visible">
          <rect width="512" height="512" fill="none" />
          <path fill="#9aa0a6" d="M180.63 347.41c-4.09 0-8.19-1.56-11.31-4.68-6.25-6.25-6.25-16.38 0-22.63l138.65-138.68c6.25-6.25 16.38-6.25 22.63 0s6.25 16.38 0 22.63L191.95 342.73a15.97 15.97 0 0 1-11.32 4.69z" />
          <path fill="#4285f4" d="M134.65 458.35c-44.66 0-81-36.34-81-81s36.34-81 81-81 81 36.34 81 81-36.34 81-81 81m0-130c-27.02 0-49 21.98-49 49s21.98 49 49 49 49-21.98 49-49-21.98-49-49-49m246.16-94.13c-27.52 0-53.39-10.72-72.85-30.18s-30.18-45.33-30.18-72.85 10.72-53.39 30.18-72.85c6.25-6.25 16.38-6.25 22.63 0s6.25 16.38 0 22.63c-27.69 27.7-27.69 72.76 0 100.45 27.7 27.7 72.76 27.69 100.45 0 6.25-6.25 16.38-6.25 22.63 0s6.25 16.38 0 22.63c-19.46 19.46-45.33 30.18-72.85 30.18z" />
          <path fill="#9aa0a6" d="M106.92 234.73c-4.1 0-8.19-1.56-11.31-4.69-6.25-6.25-6.25-16.38 0-22.63l63.23-63.23-63.23-63.23c-6.25-6.25-6.25-16.38 0-22.63s16.38-6.25 22.63 0l74.54 74.54c3 3 4.69 7.07 4.69 11.31s-1.69 8.31-4.69 11.31l-74.54 74.54a15.96 15.96 0 0 1-11.31 4.69zm298.16 223.62c-4.1 0-8.19-1.56-11.31-4.69l-74.54-74.54c-3-3-4.69-7.07-4.69-11.31s1.69-8.31 4.69-11.31l74.54-74.54c6.25-6.25 16.38-6.25 22.63 0s6.25 16.38 0 22.63l-63.23 63.23 63.23 63.23c6.25 6.25 6.25 16.38 0 22.63a15.96 15.96 0 0 1-11.31 4.69z" />
          <path fill="#4285f4" d="m192.77 132.88-11.31-11.31-85.85 85.85c-6.25 6.25-6.25 16.38 0 22.63 3.12 3.12 7.22 4.69 11.31 4.69s8.19-1.56 11.31-4.69l74.54-74.54c6.25-6.25 6.25-16.38 0-22.63m126.46 246.24 11.31 11.31 85.85-85.85c6.25-6.25 6.25-16.38 0-22.63-3.12-3.12-7.22-4.69-11.31-4.69s-8.19 1.56-11.31 4.69l-74.54 74.54c-6.25 6.25-6.25 16.38 0 22.63" />
        </symbol>
        <symbol id={`${uid}-s5`} viewBox="0 0 512 512" overflow="visible">
          <rect width="512" height="512" fill="none" />
          <path fill="#4285f4" d="M426.5 458.5h-341c-17.673 0-32-14.327-32-32v-341c0-17.673 14.327-32 32-32h341c17.673 0 32 14.327 32 32v341c0 17.673-14.327 32-32 32m-341-32h341v-341h-341z" />
          <path fill="#9aa0a6" d="M166 365c-8.837 0-16-7.163-16-16V218c0-8.837 7.163-16 16-16s16 7.163 16 16v131c0 8.837-7.163 16-16 16m180 0c-8.837 0-16-7.163-16-16v-56c0-8.837 7.163-16 16-16s16 7.163 16 16v56c0 8.837-7.163 16-16 16" />
          <path fill="#4285f4" d="M256 365c-8.837 0-16-7.163-16-16V162c0-8.837 7.163-16 16-16s16 7.163 16 16v187c0 8.837-7.163 16-16 16" />
          <path fill="#9aa0a6" d="M426.5 458.5H85.493c-17.673 0-32-14.327-32-32H426.5v-341h32v341c0 17.673-14.327 32-32 32" />
        </symbol>
        <symbol id={`${uid}-s6`} viewBox="0 0 512 512" overflow="visible">
          <rect width="512" height="512" fill="none" />
          <path fill="#9aa0a6" d="M155.24 255.523c-11.135 0-21.995 1.79-32.254 5.226l-38.85-74.169c-4.096-7.817-13.754-10.834-21.568-6.741-7.817 4.095-10.835 13.752-6.741 21.568l38.865 74.199a103 103 0 0 0-11.037 9.569c-19.122 19.12-29.652 44.544-29.652 71.585s10.531 52.464 29.652 71.585c19.12 19.121 44.543 29.652 71.585 29.652s52.465-10.531 71.585-29.652c39.466-39.473 39.469-103.7 0-143.17-19.12-19.121-44.544-29.652-71.585-29.652m48.989 150.226c-13.086 13.086-30.484 20.292-48.989 20.292s-35.903-7.206-48.989-20.292-20.292-30.484-20.292-48.989 7.206-35.903 20.292-48.989c5-5 10.633-9.133 16.713-12.342l.119-.058.025-.015c9.796-5.141 20.752-7.877 32.132-7.877 18.506 0 35.903 7.207 48.989 20.292s20.292 30.483 20.292 48.989-7.207 35.903-20.292 48.989m251.943-95.156-38.865-74.198a103 103 0 0 0 11.038-9.57c19.122-19.12 29.652-44.544 29.652-71.585s-10.53-52.464-29.652-71.585c-19.12-19.12-44.545-29.652-71.585-29.652s-52.464 10.531-71.585 29.652c-39.472 39.472-39.472 103.698 0 143.17 19.12 19.121 44.544 29.652 71.585 29.652 11.136 0 21.995-1.79 32.255-5.226l38.85 74.169c2.854 5.45 8.413 8.567 14.167 8.567 2.499 0 5.034-.587 7.4-1.828 7.818-4.094 10.835-13.751 6.74-21.567ZM307.771 204.229c-13.084-13.086-20.292-30.483-20.292-48.989s7.207-35.903 20.292-48.989 30.484-20.292 48.989-20.292 35.903 7.206 48.989 20.292 20.292 30.484 20.292 48.989-7.206 35.903-20.292 48.989a69.5 69.5 0 0 1-16.825 12.399l-.006.003-.003.002c-9.802 5.149-20.766 7.888-32.154 7.888-18.506 0-35.903-7.207-48.989-20.292z" />
          <path fill="#4285f4" d="M356.76 54.003c-27.041 0-52.465 10.531-71.585 29.652-19.121 19.12-29.652 44.544-29.652 71.585 0 21.638 6.749 42.235 19.24 59.401l-83.135 83.135c5.337 3.522 6.499 4.277 12.601 9.995 27.879 26.118 27.012 70.965 0 97.978-13.086 13.086-30.484 20.292-48.989 20.292s-35.903-7.206-48.989-20.292l-22.596 22.596c19.12 19.121 44.544 29.652 71.585 29.652s52.465-10.531 71.585-29.652c19.121-19.12 29.652-44.544 29.652-71.585 0-21.638-6.749-42.235-19.24-59.401l83.134-83.134c-3.873-2.619-6.619-4.107-12.6-9.996-27.222-26.801-27.012-70.965 0-97.978 13.086-13.086 30.484-20.292 48.989-20.292s35.903 7.206 48.989 20.292l22.596-22.596c-19.12-19.121-44.544-29.652-71.585-29.652" />
        </symbol>
        <symbol id={`${uid}-s7`} viewBox="0 0 512 512" overflow="visible">
          <rect width="512" height="512" fill="none" data-name="standard_product_icon" />
          <path fill="#9aa0a6" d="M131.231 231.327c-8.624 0-15.615-6.991-15.615-15.615 0-77.664 63.184-140.848 140.848-140.848 50.121 0 96.865 26.977 121.989 70.403 4.319 7.465 1.769 17.017-5.696 21.336-7.463 4.318-17.018 1.769-21.336-5.696-19.561-33.809-55.947-54.812-94.958-54.812-60.443 0-109.617 49.175-109.617 109.617 0 8.624-6.991 15.615-15.615 15.615M367.043 396.54H99.846c-8.624 0-15.615-6.991-15.615-15.615s6.991-15.615 15.615-15.615h267.197c33.485 0 60.726-27.241 60.726-60.726 0-15.521-5.882-30.304-16.561-41.628-5.918-6.273-5.628-16.157.646-22.074 6.273-5.918 16.158-5.628 22.074.646C450.096 258.67 459 281.064 459 304.583c0 50.705-41.252 91.957-91.957 91.957" />
          <path fill="#4285f4" d="M287.229 177.923c-8.624 0-15.615-6.991-15.615-15.615s6.991-15.615 15.615-15.615h78.077V68.616c0-8.624 6.991-15.615 15.615-15.615s15.615 6.991 15.615 15.615v93.691c0 8.624-6.991 15.615-15.615 15.615zM162.306 459a15.56 15.56 0 0 1-11.042-4.574l-62.46-62.462c-6.099-6.098-6.098-15.985 0-22.083l62.462-62.462c6.098-6.098 15.985-6.098 22.083 0 6.099 6.098 6.099 15.985 0 22.083l-51.42 51.42 51.418 51.42c6.099 6.098 6.098 15.985 0 22.083a15.57 15.57 0 0 1-11.042 4.574h.001Zm271.622-217.473c-5.918-6.276-15.801-6.563-22.074-.644s-6.562 15.8-.644 22.073c10.678 11.321 16.559 26.104 16.559 41.627 0 33.485-27.24 60.726-60.723 60.726l-32.967-.002-.004 31.231 32.971.002c50.703 0 91.954-41.251 91.954-91.957 0-23.522-8.904-45.917-25.072-63.056m-286.075-40.688s-18.025-2.405-31.741 3.013c-.062.024-.114.049-.173.073a88.8 88.8 0 0 0-41.048 26.514A88.6 88.6 0 0 0 53 288.763v14.034c0 8.625 6.991 15.615 15.615 15.615s15.615-6.991 15.615-15.615v-14.034c0-28.386 21.158-52.826 49.218-56.851 8.044-1.154 13.767-8.247 13.376-16.205l.022.003s.248-10.096 1.007-14.873z" />
        </symbol>
        <symbol id={`${uid}-s8`} viewBox="0 0 512 512" overflow="visible">
          <rect width="512" height="512" fill="none" />
          <path fill="#34a853" d="M311.9 418.9c-8.8 0-16-7.2-16-16V257.1c0-8.8 7.2-16 16-16s16 7.2 16 16v145.8c0 8.8-7.2 16-16 16m-164.3 0c-8.8 0-16-7.2-16-16V202.4c0-8.8 7.2-16 16-16s16 7.2 16 16v200.5c0 8.8-7.2 16-16 16m82.2 18.5c-8.8 0-16-7.2-16-16V147.6c0-8.8 7.2-16 16-16s16 7.2 16 16v273.7c0 8.8-7.2 16-16 16Z" />
          <path fill="#fbbc04" d="M229.8 437.4c-114.5 0-207.6-93.1-207.6-207.6h32c0 96.8 78.8 175.6 175.6 175.6s175.6-78.8 175.6-175.6h32c0 114.5-93.1 207.6-207.6 207.6" />
          <path fill="#ea4335" d="M437.4 229.8h-32c0-96.8-78.8-175.6-175.6-175.6S54.1 132.9 54.1 229.8h-32c0-114.5 93.2-207.7 207.7-207.7s207.6 93.1 207.6 207.6Z" />
          <path fill="#4285f4" d="m487.4 464.8-100-100c32.3-37.6 49.9-85 49.9-135.1s-21.6-107.6-60.8-146.8l-22.6 22.6c33.2 33.2 51.4 77.3 51.4 124.2s-18.3 90.9-51.5 124.1c-5 5-7.5 7-11.8 10.8l122.8 122.8c3.1 3.1 7.2 4.7 11.3 4.7s8.2-1.6 11.3-4.7c6.2-6.2 6.2-16.4 0-22.6" />
        </symbol>
        <symbol id={`${uid}-s9`} viewBox="0 0 512 512" overflow="visible">
          <rect width="512" height="512" fill="none" />
          <path fill="#ea4335" d="M128 244.99c-8.84 0-16-7.16-16-16v-95.97c0-8.84 7.16-16 16-16s16 7.16 16 16v95.97c0 8.84-7.16 16-16 16" />
          <path fill="#fbbc04" d="M256 458c-2.98 0-5.97-.83-8.59-2.5l-186-122c-7.46-4.74-9.65-14.63-4.91-22.09 4.75-7.46 14.64-9.65 22.09-4.91L256 423.03 433.41 306.5c7.45-4.74 17.34-2.55 22.09 4.91 4.74 7.46 2.55 17.34-4.91 22.09l-186 122c-2.62 1.67-5.61 2.5-8.59 2.5" />
          <path fill="#34a853" d="M256 388.03c-8.84 0-16-7.16-16-16v-73.06c0-8.84 7.16-16 16-16s16 7.16 16 16v73.06c0 8.84-7.16 16-16 16" />
          <circle cx="128" cy="70" r="16" fill="#ea4335" />
          <circle cx="128" cy="292" r="16" fill="#ea4335" />
          <path fill="#4285f4" d="M384.23 308.01c-8.82 0-15.98-7.14-16-15.97l-.23-94.01c-.02-8.84 7.13-16.02 15.97-16.03h.04c8.82 0 15.98 7.14 16 15.97l.23 94.01c.02 8.84-7.13 16.02-15.97 16.03z" />
          <circle cx="384" cy="70" r="16" fill="#4285f4" />
          <circle cx="384" cy="134" r="16" fill="#4285f4" />
          <path fill="#fbbc04" d="M320 220.36c-8.84 0-16-7.16-16-16V101.34c0-8.84 7.16-16 16-16s16 7.16 16 16v103.02c0 8.84-7.16 16-16 16" />
          <circle cx="256" cy="171" r="16" fill="#34a853" />
          <circle cx="256" cy="235" r="16" fill="#34a853" />
          <circle cx="320" cy="265" r="16" fill="#fbbc04" />
          <circle cx="320" cy="329" r="16" fill="#fbbc04" />
          <path fill="#fbbc04" d="M192 217.36c-8.84 0-16-7.16-16-16V101.34c0-8.84 7.16-16 16-16s16 7.16 16 16v100.02c0 8.84-7.16 16-16 16" />
          <circle cx="192" cy="265" r="16" fill="#fbbc04" />
          <circle cx="192" cy="329" r="16" fill="#fbbc04" />
        </symbol>
        <symbol id={`${uid}-s10`} viewBox="0 0 512 512" overflow="visible">
          <rect width="512" height="512" fill="none" />
          <path fill="#34a853" d="M442 277.9H70c-8.8 0-16 7.2-16 16V442c0 8.8 7.2 16 16 16h107.2c1.5.5 3.1.7 4.8.7s3.3-.3 4.8-.7H442c8.8 0 16-7.2 16-16V293.9c0-8.8-7.2-16-16-16m-356 32h80V426H86zm340 116H198V309.8h228z" />
          <path fill="#fbbc04" d="M442 54H70c-8.8 0-16 7.2-16 16v148.8c0 8.8 7.2 16 16 16h372c8.8 0 16-7.2 16-16V70c0-8.8-7.2-16-16-16M86 86h80v116.8H86zm340 116.8H198V86h228z" />
          <path fill="#ea4335" d="M442 234.8h-16V86H54V70c0-8.8 7.2-16 16-16h372c8.8 0 16 7.2 16 16v148.8c0 8.8-7.2 16-16 16" />
          <path fill="#4285f4" d="M442 457.9h-16V309.8H54v-16c0-8.8 7.2-16 16-16h372c8.8 0 16 7.2 16 16v148.1c0 8.8-7.2 16-16 16" />
          <circle cx="349" cy="144.4" r="37" fill="#ea4335" />
          <circle cx="349" cy="367.9" r="37" fill="#4285f4" />
        </symbol>
      </defs>
      <rect width="962" height="2298" fill={`url(#${uid}-bg)`} />
      <rect width="962" height="2298" fill={`url(#${uid}-grid)`} />
      <rect width="962" height="2298" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          MLOPS ON GOOGLE CLOUD WITH AGENT PLATFORM
        </tspan>
      </text>
      <text fontSize="9.75" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="64.67">
          Cloud Build ships the pipeline; Gemini Enterprise Agent Platform (formerly Vertex AI) trains, registers and serves the model, and drift alerts retrain it
        </tspan>
      </text>
      <g id={`${uid}-g-source`}>
        <rect x="47" y="273" width="280" height="130" rx="2.19" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="47" y="273" width="280" height="130" rx="2.19" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0253;0.0382;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-gcloud`}>
        <rect x="28" y="532" width="797" height="1655" rx="2.19" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="28" y="532" width="797" height="1655" rx="2.19" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0253;0.0382;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-project`}>
        <rect x="48" y="584" width="757" height="1583" rx="2.19" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="48" y="584" width="757" height="1583" rx="2.19" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0253;0.0382;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-pipeline`}>
        <rect x="331" y="1165" width="348" height="342" rx="2.19" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="331" y="1165" width="348" height="342" rx="2.19" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0253;0.0382;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-serving`}>
        <rect x="521" y="1669" width="253" height="478" rx="2.19" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="521" y="1669" width="253" height="478" rx="2.19" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0253;0.0382;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M187 152 L187 324.45" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M182.63 318.44 L187 325 L191.37 318.44" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M187 383 L187 635.45" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M182.63 629.44 L187 636 L191.37 629.44" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M187 694 L187 810.45" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M182.63 804.44 L187 811 L191.37 804.44" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M187 869 L187 985.45" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M182.63 979.44 L187 986 L191.37 979.44" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M494 693 L494 810.45" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.37 3.28" />
        <path d="M489.63 804.44 L494 811 L498.37 804.44" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M672 694 L672 701.5 Q672 709 664.5 709 L567 709 Q559 709 559 717 L559 770 Q559 778 551 778 L502 778 Q494 778 494 786 L494 810.45" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.37 3.28" />
        <path d="M489.63 804.44 L494 811 L498.37 804.44" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <g mask={`url(#${uid}-m-e6)`} opacity="0">
          <path d="M672 694 L672 701.5 Q672 709 664.5 709 L567 709 Q559 709 559 717 L559 770 Q559 778 551 778 L502 778 Q494 778 494 786 L494 810.45" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.31" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.37 3.28" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5225;0.5355;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <g opacity="0">
          <path d="M489.63 804.44 L494 811 L498.37 804.44" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5833;0.5963;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M494 869 L494 945 Q494 953 486 953 L263 953 Q255 953 255 961 L255 985.45" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.37 3.28" />
        <path d="M250.63 979.44 L255 986 L259.37 979.44" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <g mask={`url(#${uid}-m-e7)`} opacity="0">
          <path d="M494 869 L494 945 Q494 953 486 953 L263 953 Q255 953 255 961 L255 985.45" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.31" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.37 3.28" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6007;0.6136;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <g opacity="0">
          <path d="M250.63 979.44 L255 986 L259.37 979.44" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6728;0.6858;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e8`}>
        <path d="M221 1044 L221 1128 Q221 1136 229 1136 L487 1136 Q495 1136 495 1144 L495 1164.45" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.37 3.28" />
        <path d="M490.63 1158.44 L495 1165 L499.37 1158.44" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <g mask={`url(#${uid}-m-e8)`} opacity="0">
          <path d="M221 1044 L221 1128 Q221 1136 229 1136 L487 1136 Q495 1136 495 1144 L495 1164.45" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.31" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.37 3.28" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6901;0.7031;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <g opacity="0">
          <path d="M490.63 1158.44 L495 1165 L499.37 1158.44" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7623;0.7753;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e9`}>
        <path d="M429 1044 L429 1120 Q429 1128 437 1128 L497 1128 Q505 1128 505 1136 L505 1216.45" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M500.63 1210.44 L505 1217 L509.37 1210.44" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M429 1044 L429 1120 Q429 1128 437 1128 L497 1128 Q505 1128 505 1136 L505 1216.45" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.31" 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.0902;0.1415;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0902;0.1032;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M500.63 1210.44 L505 1217 L509.37 1210.44" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1415;0.1545;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e10`}>
        <path d="M616 1043 L616 1051 Q616 1059 608 1059 L513 1059 Q505 1059 505 1067 L505 1216.45" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M500.63 1210.44 L505 1217 L509.37 1210.44" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e11`}>
        <path d="M505 1275 L505 1322.45" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M500.63 1316.44 L505 1323 L509.37 1316.44" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M505 1275 L505 1322.45" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.31" 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.1589;0.1877;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1589;0.1718;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M500.63 1316.44 L505 1323 L509.37 1316.44" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1877;0.2007;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e12`}>
        <path d="M505 1381 L505 1428.45" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M500.63 1422.44 L505 1429 L509.37 1422.44" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M505 1381 L505 1428.45" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.31" 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.205;0.2339;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.205;0.218;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M500.63 1422.44 L505 1429 L509.37 1422.44" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2339;0.2469;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e13`}>
        <path d="M505 1487 L505 1518 Q505 1526 513 1526 L620 1526 Q628 1526 628 1534 L628 1720.45" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M623.63 1714.44 L628 1721 L632.37 1714.44" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M505 1487 L505 1518 Q505 1526 513 1526 L620 1526 Q628 1526 628 1534 L628 1720.45" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.31" 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.2512;0.3234;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2512;0.2642;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M623.63 1714.44 L628 1721 L632.37 1714.44" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3234;0.3363;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e14`}>
        <path d="M628 1777 L628 1893.45" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M623.63 1887.44 L628 1894 L632.37 1887.44" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M628 1777 L628 1893.45" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.31" 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.3407;0.3695;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3407;0.3537;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M623.63 1887.44 L628 1894 L632.37 1887.44" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3695;0.3825;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e15`}>
        <path d="M628 1952 L628 2068.45" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M623.63 2062.44 L628 2069 L632.37 2062.44" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M628 1952 L628 2068.45" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.31" 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.3869;0.4157;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3869;0.3998;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M623.63 2062.44 L628 2069 L632.37 2062.44" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4157;0.4287;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e16`}>
        <path d="M728 694.55 L728 2028 Q728 2036 720 2036 L699 2036 Q691 2036 691 2044 L691 2069" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.37 3.28" />
        <path d="M732.37 700.56 L728 694 L723.63 700.56" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <g mask={`url(#${uid}-m-e16)`} opacity="0">
          <path d="M728 694.55 L728 2028 Q728 2036 720 2036 L699 2036 Q691 2036 691 2044 L691 2069" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.31" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.37 3.28" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.433;0.446;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <g opacity="0">
          <path d="M732.37 700.56 L728 694 L723.63 700.56" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5052;0.5182;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e17`}>
        <path d="M495 1507 L495 1518 Q495 1526 487 1526 L286 1526 Q278 1526 278 1534 L278 1558.45" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.09 2.73" />
        <path d="M273.63 1552.44 L278 1559 L282.37 1552.44" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
        <g mask={`url(#${uid}-m-e17)`} opacity="0">
          <path d="M495 1507 L495 1518 Q495 1526 487 1526 L286 1526 Q278 1526 278 1534 L278 1558.45" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.31" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.09 2.73" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7796;0.7926;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <g opacity="0">
          <path d="M273.63 1552.44 L278 1559 L282.37 1552.44" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.8351;0.8481;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e18`}>
        <path d="M495 1507 L495 1558.45" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.09 2.73" />
        <path d="M490.63 1552.44 L495 1559 L499.37 1552.44" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-el-e1`}>
        <rect x="192" y="200" width="39" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.09" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="211.76" y="213.61">
            PUSH
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e2`}>
        <rect x="192" y="455" width="78" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.09" />
        <text fontSize="8" fontWeight="700" letterSpacing="0.48" fill="#979899" textAnchor="middle">
          <tspan x="231.24" y="468.34">
            BUILD TRIGGER
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e3`}>
        <rect x="192" y="742" width="39" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.09" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="211.76" y="755.61">
            PUSH
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e4`}>
        <rect x="192" y="917" width="106" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.09" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="245.26" y="930.61">
            PIPELINE TEMPLATE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e5`}>
        <rect x="499" y="742" width="52" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.09" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="525.26" y="755.61">
            PUBLISH
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e6`}>
        <rect x="564" y="742" width="52" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.09" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="590.26" y="755.61">
            PUBLISH
          </tspan>
        </text>
        <g opacity="0">
          <rect x="564" y="742" width="52" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.09" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="590.26" y="755.61">
              PUBLISH
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5225;0.5355;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e7`}>
        <rect x="499" y="917" width="66" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.09" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="532.26" y="930.61">
            SUBSCRIBE
          </tspan>
        </text>
        <g opacity="0">
          <rect x="499" y="917" width="66" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.09" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="532.26" y="930.61">
              SUBSCRIBE
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6007;0.6136;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e8`}>
        <rect x="226" y="1092" width="30" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.09" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="241.26" y="1105.61">
            RUN
          </tspan>
        </text>
        <g opacity="0">
          <rect x="226" y="1092" width="30" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.09" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="241.26" y="1105.61">
              RUN
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6901;0.7031;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e9`}>
        <rect x="434" y="1092" width="44" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.09" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="456.26" y="1105.61">
            QUERY
          </tspan>
        </text>
        <g opacity="0">
          <rect x="434" y="1092" width="44" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.09" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="456.26" y="1105.61">
              QUERY
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0902;0.1032;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e10`}>
        <rect x="510" y="1092" width="89" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.09" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="554.76" y="1105.61">
            FETCH FEATURES
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e13`}>
        <rect x="633" y="1577.5" width="54" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.09" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="660.26" y="1591.11">
            REGISTER
          </tspan>
        </text>
        <g opacity="0">
          <rect x="633" y="1577.5" width="54" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.09" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="660.26" y="1591.11">
              REGISTER
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2512;0.2642;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e14`}>
        <rect x="633" y="1825" width="49" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.09" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="657.76" y="1838.61">
            DEPLOY
          </tspan>
        </text>
        <g opacity="0">
          <rect x="633" y="1825" width="49" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.09" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="657.76" y="1838.61">
              DEPLOY
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3407;0.3537;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e15`}>
        <rect x="633" y="2000" width="80" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.09" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="673.26" y="2013.61">
            REQUEST LOGS
          </tspan>
        </text>
        <g opacity="0">
          <rect x="633" y="2000" width="80" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.09" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="673.26" y="2013.61">
              REQUEST LOGS
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3869;0.3998;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e16`}>
        <rect x="733" y="1004.5" width="68" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.09" />
        <text fontSize="7.5" fontWeight="700" letterSpacing="0.45" fill="#979899" textAnchor="middle">
          <tspan x="767.23" y="1017.66">
            DRIFT ALERTS
          </tspan>
        </text>
        <g opacity="0">
          <rect x="733" y="1004.5" width="68" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.09" />
          <text fontSize="7.5" fontWeight="700" letterSpacing="0.45" fill="#60a5fa" textAnchor="middle">
            <tspan x="767.23" y="1017.66">
              DRIFT ALERTS
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.433;0.446;0.9;0.913;1" dur="13.86s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-gh-source`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="59" y="295.35">
            GITHUB
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-gcloud`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="40" y="554.36">
            GOOGLE CLOUD
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-project`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="60" y="606.36">
            PROJECT ML-PROD
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-pipeline`}>
        <rect x="339" y="1174" width="191.7" height="18.9" rx="3" fill="#0b1012" />
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="343" y="1187.36">
            AGENT PLATFORM PIPELINES
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-serving`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="533" y="1691.36">
            SERVING
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-scientists`}>
        <rect x="101" y="96" width="171" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="101" y="96" width="171" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <rect x="117" y="108" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="117" y="108" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s1`} x="123.4" y="114.4" width="19.2" height="19.2" />
        <text fontSize="9.75" fontWeight="700" letterSpacing="0.78" fill="#9d9fa0">
          <tspan x="161" y="127.46">
            DATA SCIENTISTS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-repo`}>
        <rect x="67" y="325" width="240" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="67" y="325" width="240" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <rect x="83" y="338" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="83" y="338" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s2`} x="89.4" y="344.4" width="19.2" height="19.2" />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0">
          <tspan x="127" y="349.23">
            SOURCE REPOSITORY
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="127" y="366.75">
            Pipeline and component code
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-build`}>
        <rect x="101" y="636" width="172" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="101" y="636" width="172" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <rect x="117" y="649" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="117" y="649" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s3`} x="123.72" y="655.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0">
          <tspan x="161" y="660.23">
            CLOUD BUILD
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="161" y="677.75">
            Test and compile
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-registry`}>
        <rect x="68" y="811" width="238" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="68" y="811" width="238" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <rect x="84" y="824" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="84" y="824" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s3`} x="90.72" y="830.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0">
          <tspan x="128" y="835.23">
            ARTIFACT REGISTRY
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="128" y="852.75">
            Images and pipeline template
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-scheduler`}>
        <rect x="402" y="637" width="183" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="402" y="637" width="183" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <rect x="418" y="649" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="418" y="649" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s4`} x="424.72" y="655.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0">
          <tspan x="462" y="668.73">
            CLOUD SCHEDULER
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-logging`}>
        <rect x="615" y="636" width="170" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="615" y="636" width="170" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <rect x="631" y="649" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="631" y="649" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="637.72" y="655.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0">
          <tspan x="675" y="660.23">
            CLOUD LOGGING
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="675" y="677.75">
            Alert log filter
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-topic`}>
        <rect x="419" y="811" width="150" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="419" y="811" width="150" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <rect x="435" y="824" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="435" y="824" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="441.72" y="830.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0">
          <tspan x="479" y="835.23">
            PUB/SUB
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="479" y="852.75">
            Trigger topic
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-launcher`}>
        <rect x="118" y="986" width="206" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="118" y="986" width="206" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <rect x="134" y="999" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="134" y="999" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="140.72" y="1005.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0">
          <tspan x="178" y="1010.23">
            CLOUD RUN FUNCTIONS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="178" y="1027.75">
            Submits PipelineJob
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-bigquery`}>
        <rect x="354" y="986" width="150" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="354" y="986" width="150" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <rect x="370" y="999" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="370" y="999" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="376.72" y="1005.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0">
          <tspan x="414" y="1010.23">
            BIGQUERY
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="414" y="1027.75">
            Training data
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-features`}>
        <rect x="534" y="987" width="164" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="534" y="987" width="164" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <rect x="550" y="999" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="550" y="999" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="556.72" y="1005.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0">
          <tspan x="594" y="1018.73">
            FEATURE STORE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-prep`}>
        <rect x="394" y="1217" width="222" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="394" y="1217" width="222" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <rect x="410" y="1230" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="410" y="1230" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="416.72" y="1236.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10" fontWeight="700" letterSpacing="0.8" fill="#9d9fa0">
          <tspan x="454" y="1241.05">
            VALIDATE AND TRANSFORM
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="454" y="1258.75">
            Dataflow
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-train`}>
        <rect x="408" y="1323" width="193" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="408" y="1323" width="193" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <rect x="424" y="1336" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="424" y="1336" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="430.72" y="1342.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0">
          <tspan x="468" y="1347.23">
            MANAGED TRAINING
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="468" y="1364.75">
            Train and tune
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-evaluate`}>
        <rect x="399" y="1429" width="212" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="399" y="1429" width="212" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <rect x="415" y="1442" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="415" y="1442" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="421.72" y="1448.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10" fontWeight="700" letterSpacing="0.8" fill="#9d9fa0">
          <tspan x="459" y="1453.05">
            EVALUATE AND VALIDATE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="459" y="1470.75">
            Dataflow
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-artifacts`}>
        <rect x="193" y="1559" width="169" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="193" y="1559" width="169" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <rect x="209" y="1572" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="209" y="1572" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s10`} x="215.72" y="1578.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0">
          <tspan x="253" y="1583.23">
            CLOUD STORAGE
          </tspan>
        </text>
        <text fontSize="9" fontWeight="400" fill="#979a9b">
          <tspan x="253" y="1600.42">
            Pipeline artifacts
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-metadata`}>
        <rect x="392" y="1559" width="206" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="392" y="1559" width="206" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <rect x="408" y="1572" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="408" y="1572" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="414.72" y="1578.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0">
          <tspan x="452" y="1583.23">
            VERTEX ML METADATA
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="452" y="1600.75">
            Lineage
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-models`}>
        <rect x="541" y="1721" width="173" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="541" y="1721" width="173" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <rect x="557" y="1733" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="557" y="1733" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="563.72" y="1739.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0">
          <tspan x="601" y="1752.73">
            MODEL REGISTRY
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-endpoint`}>
        <rect x="544" y="1894" width="168" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="544" y="1894" width="168" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <rect x="560" y="1907" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="560" y="1907" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="566.72" y="1913.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0">
          <tspan x="604" y="1918.23">
            ENDPOINT
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="604" y="1935.75">
            Online inference
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-monitor`}>
        <rect x="565" y="2069" width="189" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="565" y="2069" width="189" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <rect x="581" y="2082" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.09" />
        <g opacity="0">
          <rect x="581" y="2082" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.09" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0505;0.0635;0.927;0.94;1" dur="13.86s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="587.72" y="2088.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0">
          <tspan x="625" y="2093.23">
            MODEL MONITORING
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="625" y="2110.75">
            Skew and drift
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <circle r="2.19" fill="#60a5fa" opacity="0">
          <animateMotion path="M187 869 L187 985.45" dur="13.86s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4254;0.4542;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.4146;0.4254;0.4542;0.4651;1" dur="13.86s" repeatCount="indefinite" />
        </circle>
        <circle r="2.19" fill="#60a5fa" opacity="0">
          <animateMotion path="M494 693 L494 810.45" dur="13.86s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6488;0.6777;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.638;0.6488;0.6777;0.6885;1" dur="13.86s" repeatCount="indefinite" />
        </circle>
        <path d="M672 694 L672 701.5 Q672 709 664.5 709 L567 709 Q559 709 559 717 L559 770 Q559 778 551 778 L502 778 Q494 778 494 786 L494 810.45" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.62" pathLength="1" strokeDasharray="0.1 2" strokeDashoffset="0.1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.1;0.1;-0.9;-1;-1" keyTimes="0;0.5225;0.5833;0.5892;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5225;0.5232;0.5892;0.5899;1" dur="13.86s" repeatCount="indefinite" />
        </path>
        <circle r="2.73" fill="#60a5fa" opacity="0">
          <animateMotion path="M672 694 L672 701.5 Q672 709 664.5 709 L567 709 Q559 709 559 717 L559 770 Q559 778 551 778 L502 778 Q494 778 494 786 L494 810.45" dur="13.86s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5225;0.5833;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.5117;0.5225;0.6007;0.6115;1" dur="13.86s" repeatCount="indefinite" />
        </circle>
        <path d="M494 869 L494 945 Q494 953 486 953 L263 953 Q255 953 255 961 L255 985.45" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.62" 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.6007;0.6728;0.6786;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6007;0.6014;0.6786;0.6793;1" dur="13.86s" repeatCount="indefinite" />
        </path>
        <circle r="2.73" fill="#60a5fa" opacity="0">
          <animateMotion path="M494 869 L494 945 Q494 953 486 953 L263 953 Q255 953 255 961 L255 985.45" dur="13.86s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6007;0.6728;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.5898;0.6007;0.6901;0.7009;1" dur="13.86s" repeatCount="indefinite" />
        </circle>
        <path d="M221 1044 L221 1128 Q221 1136 229 1136 L487 1136 Q495 1136 495 1144 L495 1164.45" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.62" 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.6901;0.7623;0.7675;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6901;0.6908;0.7675;0.7682;1" dur="13.86s" repeatCount="indefinite" />
        </path>
        <circle r="2.73" fill="#60a5fa" opacity="0">
          <animateMotion path="M221 1044 L221 1128 Q221 1136 229 1136 L487 1136 Q495 1136 495 1144 L495 1164.45" dur="13.86s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6901;0.7623;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.6793;0.6901;0.7796;0.7904;1" dur="13.86s" repeatCount="indefinite" />
        </circle>
        <path d="M429 1044 L429 1120 Q429 1128 437 1128 L497 1128 Q505 1128 505 1136 L505 1216.45" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.62" pathLength="1" strokeDasharray="0.11 2" strokeDashoffset="0.11" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.11;0.11;-0.89;-1;-1" keyTimes="0;0.0902;0.1415;0.1474;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0902;0.0909;0.1474;0.1481;1" dur="13.86s" repeatCount="indefinite" />
        </path>
        <circle r="2.73" fill="#60a5fa" opacity="0">
          <animateMotion path="M429 1044 L429 1120 Q429 1128 437 1128 L497 1128 Q505 1128 505 1136 L505 1216.45" dur="13.86s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.0902;0.1415;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.0794;0.0902;0.1589;0.1697;1" dur="13.86s" repeatCount="indefinite" />
        </circle>
        <path d="M505 1275 L505 1322.45" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.62" 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.1589;0.1877;0.2021;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1589;0.1596;0.2021;0.2029;1" dur="13.86s" repeatCount="indefinite" />
        </path>
        <circle r="2.73" fill="#60a5fa" opacity="0">
          <animateMotion path="M505 1275 L505 1322.45" dur="13.86s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.1589;0.1877;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.148;0.1589;0.205;0.2159;1" dur="13.86s" repeatCount="indefinite" />
        </circle>
        <path d="M505 1381 L505 1428.45" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.62" 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.205;0.2339;0.2483;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.205;0.2058;0.2483;0.249;1" dur="13.86s" repeatCount="indefinite" />
        </path>
        <circle r="2.73" fill="#60a5fa" opacity="0">
          <animateMotion path="M505 1381 L505 1428.45" dur="13.86s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.205;0.2339;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.1942;0.205;0.2512;0.262;1" dur="13.86s" repeatCount="indefinite" />
        </circle>
        <path d="M505 1487 L505 1518 Q505 1526 513 1526 L620 1526 Q628 1526 628 1534 L628 1720.45" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.62" 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.2512;0.3234;0.3291;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2512;0.2519;0.3291;0.3298;1" dur="13.86s" repeatCount="indefinite" />
        </path>
        <circle r="2.73" fill="#60a5fa" opacity="0">
          <animateMotion path="M505 1487 L505 1518 Q505 1526 513 1526 L620 1526 Q628 1526 628 1534 L628 1720.45" dur="13.86s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.2512;0.3234;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.2404;0.2512;0.3407;0.3515;1" dur="13.86s" repeatCount="indefinite" />
        </circle>
        <path d="M628 1777 L628 1893.45" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.62" pathLength="1" strokeDasharray="0.24 2" strokeDashoffset="0.24" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.24;0.24;-0.76;-1;-1" keyTimes="0;0.3407;0.3695;0.3766;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3407;0.3414;0.3766;0.3773;1" dur="13.86s" repeatCount="indefinite" />
        </path>
        <circle r="2.73" fill="#60a5fa" opacity="0">
          <animateMotion path="M628 1777 L628 1893.45" dur="13.86s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3407;0.3695;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.3299;0.3407;0.3869;0.3977;1" dur="13.86s" repeatCount="indefinite" />
        </circle>
        <path d="M628 1952 L628 2068.45" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.62" pathLength="1" strokeDasharray="0.24 2" strokeDashoffset="0.24" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.24;0.24;-0.76;-1;-1" keyTimes="0;0.3869;0.4157;0.4228;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3869;0.3876;0.4228;0.4235;1" dur="13.86s" repeatCount="indefinite" />
        </path>
        <circle r="2.73" fill="#60a5fa" opacity="0">
          <animateMotion path="M628 1952 L628 2068.45" dur="13.86s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3869;0.4157;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.376;0.3869;0.433;0.4439;1" dur="13.86s" repeatCount="indefinite" />
        </circle>
        <path d="M728 694.55 L728 2028 Q728 2036 720 2036 L699 2036 Q691 2036 691 2044 L691 2069" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.62" pathLength="1" strokeDasharray="0.02 2" strokeDashoffset="-1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="-1;-1;0;0.02;0.02" keyTimes="0;0.433;0.5052;0.5066;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.433;0.4337;0.5066;0.5074;1" dur="13.86s" repeatCount="indefinite" />
        </path>
        <circle r="2.73" fill="#60a5fa" opacity="0">
          <animateMotion path="M728 694.55 L728 2028 Q728 2036 720 2036 L699 2036 Q691 2036 691 2044 L691 2069" dur="13.86s" repeatCount="indefinite" calcMode="spline" keyPoints="1;1;0;0" keyTimes="0;0.433;0.5052;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.4222;0.433;0.5225;0.5333;1" dur="13.86s" repeatCount="indefinite" />
        </circle>
        <path d="M495 1507 L495 1518 Q495 1526 487 1526 L286 1526 Q278 1526 278 1534 L278 1558.45" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.62" pathLength="1" strokeDasharray="0.11 2" strokeDashoffset="0.11" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.11;0.11;-0.89;-1;-1" keyTimes="0;0.7796;0.8351;0.8409;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="13.86s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7796;0.7803;0.8409;0.8417;1" dur="13.86s" repeatCount="indefinite" />
        </path>
        <circle r="2.73" fill="#60a5fa" opacity="0">
          <animateMotion path="M495 1507 L495 1518 Q495 1526 487 1526 L286 1526 Q278 1526 278 1534 L278 1558.45" dur="13.86s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.7796;0.8351;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.7688;0.7796;0.8351;0.8459;1" dur="13.86s" repeatCount="indefinite" />
        </circle>
      </g>
      <g id={`${uid}-legend`}>
        <rect x="707" y="2199" width="227" height="71" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.09" />
        <path d="M717 2216.5 H745" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" />
        <text fontSize="8" fontWeight="700" letterSpacing="0.48" fill="#9d9fa0">
          <tspan x="753" y="2219.34">
            DELIVERY, TRAINING AND INFERENCE
          </tspan>
        </text>
        <path d="M717 2234.5 H745" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeDasharray="4.37 3.28" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="753" y="2237.87">
            PIPELINE TRIGGERS
          </tspan>
        </text>
        <path d="M717 2252.5 H745" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.09" strokeLinecap="round" strokeDasharray="1.09 2.73" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="753" y="2255.87">
            ARTIFACTS AND LINEAGE
          </tspan>
        </text>
      </g>
    </svg>
  );
}
