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

export default function GKEApplicationPlatformOnGoogleCloud(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="884" height="1699" viewBox="0 0 884 1699" 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`}>
        GKE application platform on Google Cloud
      </title>
      <desc id={`${uid}-sdw-desc`}>
        GKE application platform on Google Cloud. 12 components in 8 groups. Connections: Developers to App repository; App repository to Cloud Build (trigger); Cloud Build to Artifact Registry (push image); Cloud Build to Cloud Deploy (create release); Cloud Deploy to GKE cluster shop (roll out); GKE cluster shop to Artifact Registry (pull image); Pods to Memorystore; Pods to Cloud SQL; Pods to Secret Manager; GKE cluster shop to Observability.
      </desc>
      <defs>
        <linearGradient id={`${uid}-bg`} x1="0" y1="0" x2="0.34" y2="0.94">
          <stop offset="0" stopColor="#0e1a24" />
          <stop offset="0.6" stopColor="#0b1012" />
        </linearGradient>
        <pattern id={`${uid}-grid`} width="20.09" height="20.09" patternUnits="userSpaceOnUse">
          <path d="M0 0.5H20.09M0.5 0V20.09" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="329" cy="711" r="679.93">
          <stop offset="0" stopColor="#60a5fa" stopOpacity="0.12" />
          <stop offset="1" stopColor="#60a5fa" stopOpacity="0" />
        </radialGradient>
        <symbol id={`${uid}-s1`} viewBox="0 0 512 512" overflow="visible">
          <rect width="512" height="512" fill="none" />
          <path fill="#34a853" d="M256 459c-2.7 0-5.4-.7-7.8-2L82 363.5c-5-2.8-8.2-8.2-8.2-14v-187c0-5.8 3.1-11.1 8.2-13.9L248.2 55c4.9-2.7 10.8-2.7 15.7 0l166.2 93.5c5 2.8 8.2 8.2 8.2 13.9v187c0 5.8-3.1 11.1-8.2 14l-166.2 93.5c-2.4 1.4-5.1 2-7.8 2ZM105.8 340.1 256 424.6l150.2-84.5V171.8L256 87.3l-150.2 84.5zm316.4 9.4" />
          <path fill="#ea4335" d="M89.8 178.5c-5.6 0-11-2.9-14-8.2-4.3-7.7-1.6-17.5 6.1-21.8L248.2 55c7.7-4.3 17.5-1.6 21.8 6.1s1.6 17.5-6.1 21.8L97.7 176.4c-2.5 1.4-5.2 2.1-7.8 2.1Z" />
          <path fill="#ea4335" d="M422.2 178.5c-2.7 0-5.4-.7-7.8-2.1L248.2 82.9c-7.7-4.3-10.4-14.1-6.1-21.8s14.1-10.4 21.8-6.1l166.2 93.5c7.7 4.3 10.4 14.1 6.1 21.8-2.9 5.2-8.4 8.2-14 8.2" />
          <path fill="#ea4335" d="M256 178.5c-8.8 0-16-7.2-16-16V69c0-8.8 7.2-16 16-16s16 7.2 16 16v93.5c0 8.8-7.2 16-16 16" />
          <path fill="#fbbc04" d="M81.7 363.3c-4.9-2.9-7.9-8.1-7.9-13.8v-187c0-6 3.3-11.2 8.2-13.9 2.3-1.3 23.8-13.4 23.8-13.4v187l59.3-33.3c7.7-4.3 17.5-1.6 21.8 6.1s1.6 17.5-6.1 21.8L89.9 368s-5.6-3.1-8.1-4.5Z" />
          <path fill="#4285f4" d="m422.2 367.9-90.9-51.2c-7.7-4.3-10.4-14.1-6.1-21.8s14.1-10.4 21.8-6.1l59.3 33.3v-187s21.5 12.1 23.9 13.4c.8.5 1.6 1 2.3 1.6 3.6 2.9 5.8 7.4 5.8 12.4v187c0 5.7-3 10.9-7.9 13.8-2.5 1.5-8.1 4.5-8.1 4.5Z" />
          <path fill="#ea4335" d="M339.1 225.2c-2.7 0-5.4-.7-7.8-2.1L256 180.8l-75.3 42.3c-7.7 4.3-17.5 1.6-21.8-6.1s-1.6-17.5 6.1-21.8l83.1-46.8c4.9-2.7 10.8-2.7 15.7 0l83.1 46.8c7.7 4.3 10.4 14.1 6.1 21.8-2.9 5.2-8.4 8.2-14 8.2Z" />
          <path fill="#4285f4" d="M256 365.5c-5.6 0-11-2.9-14-8.2-4.3-7.7-1.6-17.5 6.1-21.8l75-42.2v-84.1c0-8.8 7.2-16 16-16s16 7.2 16 16v93.5c0 5.8-3.1 11.1-8.2 14l-83.1 46.8c-2.5 1.4-5.2 2.1-7.8 2.1Z" />
          <path fill="#fbbc04" d="M256 365.5c-2.7 0-5.4-.7-7.8-2l-83.1-46.8c-5-2.8-8.2-8.2-8.2-14v-93.5c0-8.8 7.2-16 16-16s16 7.2 16 16v84.1l51.1 28.8V256c0-8.8 7.2-16 16-16s16 7.2 16 16v102.9s-3 1.6-7.9 4.5c-2.5 1.5-5.3 2.2-8.1 2.2Z" />
          <path fill="#4285f4" d="M256 272c-5.6 0-11-2.9-14-8.2-4.3-7.7-1.6-17.5 6.1-21.8l91-51.2 7.9 4.4c2.1 1.1 4.2 2.8 6.1 6.1 4.3 7.7 1.6 17.5-6.1 21.8l-83.1 46.8c-2.5 1.4-5.2 2.1-7.8 2.1Z" />
          <path fill="#ea4335" d="m256 237.6-75.3-42.3c-7.7-4.3-17.5-1.6-21.8 6.1-1.4 2.5-2.1 5.2-2.1 7.8v9.4l91.3 51.3c2.5 1.4 5.2 2.1 7.8 2.1v-34.4Z" />
        </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>
        <filter id={`${uid}-f2`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feFlood floodColor="#60a5fa" />
          <feComposite in2="SourceAlpha" operator="in" />
        </filter>
        <symbol id={`${uid}-s2`} viewBox="0 0 18.035 17.5" overflow="visible">
          <g transform="translate(-.993 -1.174)">
            <path fill="#326ce5" d="M9.95 1.637a1.137 1.127 0 0 0-.434.11l-5.94 2.838a1.137 1.127 0 0 0-.615.764l-1.465 6.376a1.137 1.127 0 0 0 .154.862 1.137 1.127 0 0 0 .065.09l4.11 5.113a1.137 1.127 0 0 0 .89.423l6.592-.001a1.137 1.127 0 0 0 .888-.423l4.11-5.113a1.137 1.127 0 0 0 .219-.953l-1.468-6.374a1.137 1.127 0 0 0-.614-.764l-5.94-2.839a1.137 1.127 0 0 0-.551-.11" />
            <path fill="#fff" d="M-6.852 3.818a1.181 1.172 0 0 0-.452.115l-6.18 2.951a1.181 1.172 0 0 0-.638.795l-1.524 6.63a1.181 1.172 0 0 0 .16.9 1.181 1.172 0 0 0 .067.093l4.276 5.317a1.181 1.172 0 0 0 .924.44h6.858a1.181 1.172 0 0 0 .923-.44L1.837 15.3a1.181 1.172 0 0 0 .228-.99L.54 7.677a1.181 1.172 0 0 0-.64-.795l-6.178-2.95a1.181 1.172 0 0 0-.573-.115m.003.455a1.12 1.11 0 0 1 .542.108l5.853 2.795a1.12 1.11 0 0 1 .606.753l1.446 6.281a1.12 1.11 0 0 1-.216.94l-4.05 5.037a1.12 1.11 0 0 1-.875.417l-6.496.001a1.12 1.11 0 0 1-.875-.417l-4.05-5.037a1.12 1.11 0 0 1-.064-.088 1.12 1.11 0 0 1-.152-.851l1.444-6.281a1.12 1.11 0 0 1 .605-.753l5.853-2.797a1.12 1.11 0 0 1 .429-.108" color="#000" fontFamily="Sans" fontWeight="400" overflow="visible" style={{ "lineHeight": "normal", "textIndent": "0", "textAlign": "start", "textDecorationLine": "none", "textTransform": "none", "marker": "none" }} transform="translate(16.902 -2.699)scale(1.01489)" />
            <rect width="7.674" height="6.69" x="6.173" y="6.579" fill="none" stroke="#fff" strokeDasharray=".80000001,.4" strokeDashoffset="3.44" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth=".4" />
          </g>
        </symbol>
        <filter id={`${uid}-f3`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.8929 3.0038 0.3032 0 -2.604" result="a" />
          <feFlood floodColor="#919394" />
          <feComposite in2="a" operator="in" />
        </filter>
        <filter id={`${uid}-f4`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.8929 3.0038 0.3032 0 -2.604" result="a" />
          <feFlood floodColor="#60a5fa" />
          <feComposite in2="a" operator="in" />
        </filter>
        <symbol id={`${uid}-s3`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.88" 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}-s4`} 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}-s5`} 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>
        <symbol id={`${uid}-s6`} viewBox="0 0 18.035 17.5" overflow="visible">
          <path fill="#326ce5" d="M8.958.463a1.137 1.127 0 0 0-.434.11l-5.94 2.838a1.137 1.127 0 0 0-.615.764L.504 10.551a1.137 1.127 0 0 0 .154.862 1.137 1.127 0 0 0 .065.09l4.11 5.113a1.137 1.127 0 0 0 .89.423l6.592-.001a1.137 1.127 0 0 0 .888-.423l4.11-5.113a1.137 1.127 0 0 0 .219-.953l-1.468-6.374a1.137 1.127 0 0 0-.614-.764L9.51.572a1.137 1.127 0 0 0-.551-.11" />
          <path fill="#fff" d="M-6.852 3.818a1.181 1.172 0 0 0-.452.115l-6.18 2.951a1.181 1.172 0 0 0-.638.795l-1.524 6.63a1.181 1.172 0 0 0 .16.9 1.181 1.172 0 0 0 .067.093l4.276 5.317a1.181 1.172 0 0 0 .924.44h6.858a1.181 1.172 0 0 0 .923-.44L1.837 15.3a1.181 1.172 0 0 0 .228-.99L.54 7.677a1.181 1.172 0 0 0-.64-.795l-6.178-2.95a1.181 1.172 0 0 0-.573-.115m.003.455a1.12 1.11 0 0 1 .542.108l5.853 2.795a1.12 1.11 0 0 1 .606.753l1.446 6.281a1.12 1.11 0 0 1-.216.94l-4.05 5.037a1.12 1.11 0 0 1-.875.417l-6.496.001a1.12 1.11 0 0 1-.875-.417l-4.05-5.037a1.12 1.11 0 0 1-.064-.088 1.12 1.11 0 0 1-.152-.851l1.444-6.281a1.12 1.11 0 0 1 .605-.753l5.853-2.797a1.12 1.11 0 0 1 .429-.108" color="#000" fontFamily="Sans" fontWeight="400" overflow="visible" style={{ "lineHeight": "normal", "textIndent": "0", "textAlign": "start", "textDecorationLine": "none", "textTransform": "none", "marker": "none" }} transform="translate(15.91 -3.873)scale(1.01489)" />
          <path fill="#fff" fillRule="evenodd" d="m5.397 6.213 3.62-1.05 3.621 1.05-3.62 1.05Zm0 .402v3.853l3.373 1.869.017-4.713zm7.241 0v3.853l-3.373 1.869-.017-4.713z" />
        </symbol>
        <symbol id={`${uid}-s7`} viewBox="0 0 512 512" overflow="visible">
          <rect width="512" height="512" fill="none" />
          <path fill="#4285f4" d="M256 490c-44.2 0-85.9-11.3-117.6-31.8-33.8-21.9-52.4-51.7-52.4-84V256h32v118.2c0 21 13.4 41.3 37.8 57.1C182.3 448.5 217.9 458 256 458s73.7-9.5 100.2-26.7c24.4-15.8 37.8-36.1 37.8-57.1h32c0 32.3-18.6 62.1-52.4 84C342 478.7 300.2 490 256 490" />
          <path fill="#9aa0a6" d="M256 381c-44.2 0-85.9-11.3-117.6-31.8-33.8-21.9-52.4-51.7-52.4-84V137.9h32v127.3c0 21 13.4 41.3 37.8 57.1C182.3 339.5 217.9 349 256 349s73.7-9.5 100.2-26.7c24.4-15.8 37.8-36.1 37.8-57.1h32c0 32.3-18.6 62.1-52.4 84C342 369.7 300.2 381 256 381" />
          <path fill="#9aa0a6" d="M256 490v-32c38.1 0 73.7-9.5 100.2-26.7 24.4-15.8 37.8-36.1 37.8-57.2V256h32v118.1c0 32.3-18.6 62.1-52.4 84.1C342 478.7 300.2 490 256 490" />
          <path fill="#4285f4" d="M256 381v-32c38.1 0 73.7-9.5 100.2-26.7 24.4-15.8 37.8-36.1 37.8-57.2V137.9h32v127.2c0 32.3-18.6 62.1-52.4 84.1C342 369.7 300.2 381 256 381" />
          <path fill="#4285f4" d="M256 253.6c-44.2 0-85.9-11.3-117.6-31.8-33.8-21.9-52.4-51.7-52.4-84s18.6-62.1 52.4-84C170 33.3 211.8 22 256 22s86 11.3 117.6 31.8c33.8 21.9 52.4 51.7 52.4 84s-18.6 62.1-52.4 84c-31.6 20.5-73.4 31.8-117.6 31.8M256 54c-38.1 0-73.7 9.5-100.2 26.7-24.4 15.8-37.8 36.1-37.8 57.1s13.4 41.3 37.8 57.1c26.5 17.2 62.1 26.7 100.2 26.7s73.7-9.5 100.2-26.7c24.4-15.8 37.8-36.1 37.8-57.1s-13.4-41.3-37.8-57.1C329.7 63.5 294.1 54 256 54" />
          <path fill="#9aa0a6" d="M256 253.8v-32c38.1 0 73.7-9.5 100.2-26.7 24.4-15.8 37.8-36.2 37.8-57.2s-13.4-41.4-37.8-57.2C329.7 63.5 294.1 54 256 54V22c44.2 0 86 11.3 117.6 31.8 33.8 21.9 52.4 51.8 52.4 84.1S407.4 200 373.6 222c-31.6 20.5-73.4 31.8-117.6 31.8" />
        </symbol>
        <symbol id={`${uid}-s8`} viewBox="0 0 512 512" overflow="visible">
          <rect width="512" height="512" fill="none" />
          <path fill="#fbbc04" d="M447.5 123.7 261.5 55c-3.6-1.3-7.5-1.3-11.1 0l-40.7 15-145.2 53.5c-6.3 2.3-10.5 8.3-10.5 15s4.2 12.7 10.5 15l145.1 53.4 40.8 15c1.8.6 3.7 1 5.5 1s3.7-.3 5.5-1l185.9-68.2c6.3-2.3 10.5-8.3 10.5-15s-4.2-12.7-10.5-15ZM256 189.9l-139.6-51.4L256 87.1l139.7 51.6-139.6 51.2Z" />
          <path fill="#34a853" d="M447.5 388.8 261.6 457c-1.8.6-3.6 1-5.5 1s-3.7-.3-5.5-1l-40.8-15-145.1-53.4c-8.3-3-12.5-12.2-9.5-20.5s12.2-12.5 20.5-9.5L256.1 425l180.4-66.2c8.3-3 17.5 1.2 20.5 9.5s-1.2 17.5-9.5 20.5" />
          <path fill="#34a853" d="m447.5 310.4-185.9 68.2c-1.8.6-3.6 1-5.5 1s-3.7-.3-5.5-1l-40.8-15-145.1-53.4c-8.3-3-12.5-12.2-9.5-20.5s12.2-12.5 20.5-9.5l180.4 66.4 180.4-66.2c8.3-3 17.5 1.2 20.5 9.5s-1.2 17.5-9.5 20.5" />
          <path fill="#34a853" d="m447.5 232.1-185.9 68.2c-1.8.7-3.6 1-5.5 1s-3.7-.3-5.5-1l-40.8-15-145.1-53.4c-8.3-3.1-12.5-12.2-9.5-20.5s12.2-12.5 20.5-9.5l180.4 66.4 180.4-66.2c8.3-3 17.5 1.2 20.5 9.5s-1.2 17.5-9.5 20.5" />
          <path fill="#ea4335" d="M458 138.7c0 6.7-4.2 12.7-10.5 15l-186 68.2c-1.8.7-3.6 1-5.5 1s-3.7-.3-5.5-1l-40.8-15 46.4-17 139.6-51.2L256 87.1 209.8 70l40.7-15c3.6-1.3 7.5-1.3 11.1 0l186 68.7c6.3 2.3 10.5 8.3 10.5 15Z" />
          <path fill="#4285f4" d="M447.5 388.8 261.6 457c-1.8.6-3.6 1-5.5 1s-3.7-.3-5.5-1l-40.8-15 46.4-17 180.4-66.2c8.3-3 17.5 1.2 20.5 9.5s-1.2 17.5-9.5 20.5Zm0-78.4-185.9 68.2c-1.8.6-3.6 1-5.5 1s-3.7-.3-5.5-1l-40.8-15 46.4-17 180.4-66.2c8.3-3 17.5 1.2 20.5 9.5s-1.2 17.5-9.5 20.5Zm0-78.3-185.9 68.2c-1.8.7-3.6 1-5.5 1s-3.7-.3-5.5-1l-40.8-15 46.4-17 180.4-66.2c8.3-3 17.5 1.2 20.5 9.5s-1.2 17.5-9.5 20.5Z" />
          <path fill="#fbbc04" d="m302.4 206.9-186-68.5-51.8-15c-6.3 2.3-10.5 8.3-10.5 15s4.2 12.7 10.5 15l145.1 53.4 40.8 15c1.8.6 3.7 1 5.5 1s3.7-.3 5.5-1l40.9-15Z" />
        </symbol>
        <symbol id={`${uid}-s9`} viewBox="0 0 512 512" overflow="visible">
          <rect width="512" height="512" fill="none" />
          <path fill="#4285f4" d="M256.004 287.542c-43.08 0-78.128-35.065-78.128-78.167s35.048-78.167 78.128-78.167 78.129 35.065 78.129 78.167-35.049 78.167-78.129 78.167m0-124.334c-25.435 0-46.128 20.71-46.128 46.167s20.693 46.167 46.128 46.167 46.129-20.71 46.129-46.167-20.693-46.167-46.129-46.167" />
          <path fill="#9aa0a6" d="M153.505 376.416q-1.128 0-2.276-.162c-8.748-1.245-14.83-9.347-13.584-18.096 4.021-28.244 18.11-54.191 39.672-73.062a119.43 119.43 0 0 1 78.682-29.555c8.837 0 16 7.163 16 16s-7.163 16-16 16a87.44 87.44 0 0 0-57.607 21.636c-15.801 13.828-26.123 32.825-29.066 53.492-1.137 7.982-7.983 13.746-15.819 13.746z" />
          <path fill="#4285f4" d="M358.493 376.427c-7.838 0-14.685-5.764-15.82-13.748-2.94-20.669-13.262-39.668-29.063-53.499A87.44 87.44 0 0 0 256 287.542c-8.837 0-16-7.163-16-16s7.163-16 16-16a119.43 119.43 0 0 1 78.687 29.559c21.562 18.873 35.65 44.823 39.669 73.07 1.244 8.749-4.839 16.85-13.587 18.095q-1.148.161-2.274.161z" />
          <path fill="#9aa0a6" d="M256.004 287.542c-43.08 0-78.128-35.065-78.128-78.167s35.048-78.167 78.128-78.167v32c-25.435 0-46.128 20.71-46.128 46.167s20.693 46.167 46.128 46.167z" />
          <path fill="#9aa0a6" d="M437.95 151.09c-.01-.13-.03-.26-.04-.39-.02-.18-.04-.37-.07-.55-.05-.37-.12-.74-.19-1.1-.08-.36-.17-.72-.27-1.07q-.225-.795-.54-1.56c-.06-.15-.12-.3-.18-.44-.23-.55-.5-1.08-.8-1.59-.08-.14-.16-.28-.25-.42-.19-.31-.4-.61-.61-.91-.21-.29-.42-.57-.65-.85l-.02-.02q-.345-.42-.72-.81l-.02-.02a9 9 0 0 0-.6-.6c-.27-.26-.55-.5-.83-.73-.13-.11-.26-.21-.39-.31-.14-.11-.28-.22-.42-.31-.13-.1-.25-.19-.38-.28-.33-.22-.67-.43-1.02-.62-.21-.13-.41-.24-.63-.35-.13-.07-.25-.13-.38-.19L291.81 69.5l-.07-.03-28.59-14.28a15.98 15.98 0 0 0-14.3 0l-166 82.88A16.02 16.02 0 0 0 74 152.39v103.13c0 44.24 21.16 86.5 56.59 113.04l98.72 73.94v.01l17.1 12.8a15.8 15.8 0 0 0 4.6 2.39c.61.21 1.23.37 1.85.49.78.16 1.57.25 2.35.29.28.01.55.02.8.02.3 0 .59-.01.89-.03.21-.01.41-.02.62-.04.42-.04.85-.1 1.27-.18.25-.04.5-.09.74-.15.07-.01.15-.03.22-.04.01 0 .02-.01.02-.01.24-.06.48-.12.71-.19.26-.07.52-.15.78-.25.3-.11.61-.22.91-.35h.01c.28-.11.55-.24.82-.37.59-.28 1.17-.61 1.73-.99.18-.11.37-.23.54-.36.11-.07.21-.15.32-.23l115.82-86.75c35.43-26.54 56.59-68.8 56.59-113.04V152.39c0-.44-.02-.87-.05-1.3M406 255.52c0 34.21-16.37 66.9-43.78 87.43L256 422.51l-106.22-79.56C122.37 322.42 106 289.73 106 255.52v-93.24l150-74.9 150 74.9z" />
          <path fill="#4285f4" d="M268.81 452.09c-.94 1.25-2.03 2.33-3.22 3.22-.11.08-.21.16-.32.23-.17.13-.36.25-.54.36-.56.38-1.14.71-1.73.99-.27.13-.54.26-.82.37h-.01c-.3.13-.61.24-.91.35-.26.09-.52.17-.78.25-.23.07-.47.13-.71.19 0 0-.01.01-.02.01-.07.01-.15.03-.22.04-.24.06-.49.11-.74.15-.42.08-.85.14-1.27.18-.21.02-.41.03-.62.04-.3.02-.59.03-.89.03-.25 0-.52-.01-.8-.02-.78-.04-1.57-.13-2.35-.29-.62-.12-1.24-.28-1.85-.49a15.8 15.8 0 0 1-4.6-2.39l-17.1-12.8v-.01l-98.72-73.94C95.16 342.02 74 299.76 74 255.52V152.39c0-6.06 3.43-11.61 8.85-14.32l166-82.88a15.98 15.98 0 0 1 14.3 0l28.59 14.28.07.03L256 87.38l-150 74.9v93.24c0 34.21 16.37 66.9 43.78 87.43L256 422.51l9.59 7.18c7.07 5.3 8.51 15.33 3.22 22.4" />
          <path fill="#9aa0a6" d="M438 152.39v103.13c0 44.24-21.16 86.5-56.59 113.04l-115.82 86.75c-.11.08-.21.16-.32.23-.17.13-.36.25-.54.36-.56.38-1.14.71-1.73.99-.27.13-.54.26-.82.37h-.01c-.3.13-.61.24-.91.35-.26.1-.52.18-.78.25-.23.07-.47.13-.71.19 0 0-.01.01-.02.01-.32.07-.64.14-.96.19-.42.08-.85.14-1.27.18-.21.02-.41.03-.62.04-.3.02-.59.03-.89.03-.25 0-.52-.01-.8-.02-.78-.04-1.57-.13-2.35-.29-.62-.12-1.24-.28-1.85-.49a15.8 15.8 0 0 1-4.6-2.39l-17.1-12.8v-.01L256 422.51l106.22-79.56c27.41-20.53 43.78-53.22 43.78-87.43V152.39c0-8.84 7.16-16 16-16a15.96 15.96 0 0 1 7.32 1.77c.22.11.42.22.63.35.35.19.69.4 1.02.62.13.09.25.18.38.28.14.09.28.2.42.31.13.1.26.2.39.31.28.23.56.47.83.73q.315.285.6.6l.02.02q.375.39.72.81l.02.02c.23.28.44.56.65.85.21.3.42.6.61.91.09.14.17.28.25.42.3.51.57 1.04.8 1.59.06.14.12.29.18.44q.315.765.54 1.56c.1.35.19.71.27 1.07.07.36.14.73.19 1.1.03.18.05.37.07.55.01.13.03.26.04.39.03.43.05.86.05 1.3" />
        </symbol>
        <symbol id={`${uid}-s10`} 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>
      </defs>
      <rect width="884" height="1699" fill={`url(#${uid}-bg)`} />
      <rect width="884" height="1699" fill={`url(#${uid}-grid)`} />
      <rect width="884" height="1699" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          GKE APPLICATION PLATFORM ON GOOGLE CLOUD
        </tspan>
      </text>
      <text fontSize="10.5" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="64.92">
          Cloud Build turns each push into an image in Artifact Registry and a Cloud Deploy release that rolls out to a regional GKE cluster
        </tspan>
      </text>
      <g id={`${uid}-g-source`}>
        <rect x="68" y="96" width="212" height="130" rx="2.01" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="68" y="96" width="212" height="130" rx="2.01" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0496;0.075;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-gcloud`}>
        <rect x="43" y="355" width="813" height="1251" rx="2.01" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="43" y="355" width="813" height="1251" rx="2.01" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0496;0.075;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-project`}>
        <rect x="63" y="407" width="773" height="1179" rx="2.01" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="63" y="407" width="773" height="1179" rx="2.01" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0496;0.075;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-region`}>
        <rect x="83" y="638" width="733" height="699" rx="2.01" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="83" y="638" width="733" height="699" rx="2.01" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0496;0.075;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-observability`}>
        <rect x="388" y="1438" width="427" height="128" rx="2.01" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="388" y="1438" width="427" height="128" rx="2.01" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0496;0.075;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-cluster`}>
        <rect x="218" y="865" width="384" height="236" rx="2.01" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="218" y="865" width="384" height="236" rx="2.01" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0496;0.075;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-ns-web`}>
        <rect x="238" y="917" width="161" height="160" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" strokeDasharray="3.01 3.01" />
        <g opacity="0">
          <rect x="238" y="917" width="161" height="160" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" strokeDasharray="3.01 3.01" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0496;0.075;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-ns-api`}>
        <rect x="429" y="917" width="153" height="160" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" strokeDasharray="3.01 3.01" />
        <g opacity="0">
          <rect x="429" y="917" width="153" height="160" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" strokeDasharray="3.01 3.01" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0496;0.075;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M310 163 L292 163 Q285 163 285 170 L285 170 Q285 177 278 177 L260.5 177" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M266.03 172.98 L260 177 L266.03 181.02" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M310 163 L292 163 Q285 163 285 170 L285 170 Q285 177 278 177 L260.5 177" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.21" 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.177;0.2336;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.063s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.2025;0.9;0.9255;1" dur="7.063s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M266.03 172.98 L260 177 L266.03 181.02" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2336;0.2591;0.9;0.9255;1" dur="7.063s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M174 206 L174 458.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M169.98 452.97 L174 459 L178.02 452.97" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M174 206 L174 458.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.21" 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.2676;0.379;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.063s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2676;0.2931;0.9;0.9255;1" dur="7.063s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M169.98 452.97 L174 459 L178.02 452.97" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.379;0.4045;0.9;0.9255;1" dur="7.063s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M149 517 L149 524.5 Q149 532 141.5 532 L96 532 Q88 532 88 540 L88 1218 Q88 1226 96 1226 L227 1226 Q235 1226 235 1234 L235 1258.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M230.98 1252.97 L235 1259 L239.02 1252.97" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M199 517 L199 593 Q199 601 207 601 L230 601 Q238 601 238 609 L238 689.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M233.98 683.97 L238 690 L242.02 683.97" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M199 517 L199 593 Q199 601 207 601 L230 601 Q238 601 238 609 L238 689.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.21" 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.413;0.5064;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.063s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.413;0.4385;0.9;0.9255;1" dur="7.063s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M233.98 683.97 L238 690 L242.02 683.97" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5064;0.5319;0.9;0.9255;1" dur="7.063s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M238 748 L238 864.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M233.98 858.97 L238 865 L242.02 858.97" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M238 748 L238 864.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.21" 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.5404;0.597;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.063s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5404;0.5659;0.9;0.9255;1" dur="7.063s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M233.98 858.97 L238 865 L242.02 858.97" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.597;0.6225;0.9;0.9255;1" dur="7.063s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M484 1101 L484 1120 Q484 1128 476 1128 L304 1128 Q296 1128 296 1136 L296 1258.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M291.98 1252.97 L296 1259 L300.02 1252.97" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M484 1101 L484 1120 Q484 1128 476 1128 L304 1128 Q296 1128 296 1136 L296 1258.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.21" 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.631;0.7726;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.063s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.631;0.6565;0.9;0.9255;1" dur="7.063s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M291.98 1252.97 L296 1259 L300.02 1252.97" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7726;0.7981;0.9;0.9255;1" dur="7.063s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M319 1057 L319 1112 Q319 1120 311 1120 L193 1120 Q185 1120 185 1128 L185 1152.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M180.98 1146.97 L185 1153 L189.02 1146.97" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e8`}>
        <path d="M493.5 1057 L493.5 1152.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M489.48 1146.97 L493.5 1153 L497.52 1146.97" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e9`}>
        <path d="M518 1057 L518 1112 Q518 1120 526 1120 L699 1120 Q707 1120 707 1128 L707 1152.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M702.98 1146.97 L707 1153 L711.02 1146.97" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e10`}>
        <path d="M508 1101 L508 1120 Q508 1128 516 1128 L594 1128 Q602 1128 602 1136 L602 1437.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1 2.51" />
        <path d="M597.98 1431.97 L602 1438 L606.02 1431.97" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-el-e2`}>
        <rect x="179" y="278" width="49" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="203.76" y="291.61">
            TRIGGER
          </tspan>
        </text>
        <g opacity="0">
          <rect x="179" y="278" width="49" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="203.76" y="291.61">
              TRIGGER
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2676;0.2931;0.9;0.9255;1" dur="7.063s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e3`}>
        <rect x="93" y="565" width="76" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="131.26" y="578.61">
            PUSH IMAGE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e4`}>
        <rect x="204" y="565" width="90" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="249.26" y="578.61">
            CREATE RELEASE
          </tspan>
        </text>
        <g opacity="0">
          <rect x="204" y="565" width="90" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="249.26" y="578.61">
              CREATE RELEASE
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.413;0.4385;0.9;0.9255;1" dur="7.063s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e5`}>
        <rect x="243" y="796" width="50" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8" fontWeight="700" letterSpacing="0.48" fill="#979899" textAnchor="middle">
          <tspan x="268.24" y="809.34">
            ROLL OUT
          </tspan>
        </text>
        <g opacity="0">
          <rect x="243" y="796" width="50" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="8" fontWeight="700" letterSpacing="0.48" fill="#60a5fa" textAnchor="middle">
            <tspan x="268.24" y="809.34">
              ROLL OUT
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5404;0.5659;0.9;0.9255;1" dur="7.063s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e6`}>
        <rect x="301" y="1171.5" width="68" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="335.26" y="1185.11">
            PULL IMAGE
          </tspan>
        </text>
        <g opacity="0">
          <rect x="301" y="1171.5" width="68" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="335.26" y="1185.11">
              PULL IMAGE
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.631;0.6565;0.9;0.9255;1" dur="7.063s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-gh-source`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="80" y="118.36">
            GITHUB
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-gcloud`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="55" y="377.35">
            GOOGLE CLOUD
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-project`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="180" y="429.35">
            PROJECT SHOP-PROD
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-region`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="95" y="660.36">
            US-CENTRAL1
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-observability`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="400" y="1460.36">
            OBSERVABILITY
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-cluster`}>
        <use href={`#${uid}-s1`} x="231.3" y="875.3" width="17.4" height="17.4" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <use href={`#${uid}-s1`} x="231.3" y="875.3" width="17.4" height="17.4" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0496;0.075;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="258" y="887.36">
            GKE CLUSTER SHOP
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-ns-web`}>
        <use href={`#${uid}-s2`} x="247.1" y="923.1" width="25.8" height="25.8" filter={`url(#${uid}-f3)`} />
        <g opacity="0">
          <use href={`#${uid}-s2`} x="247.1" y="923.1" width="25.8" height="25.8" filter={`url(#${uid}-f4)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0496;0.075;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="278" y="939.36">
            NAMESPACE WEB
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-ns-api`}>
        <use href={`#${uid}-s2`} x="438.1" y="923.1" width="25.8" height="25.8" filter={`url(#${uid}-f3)`} />
        <g opacity="0">
          <use href={`#${uid}-s2`} x="438.1" y="923.1" width="25.8" height="25.8" filter={`url(#${uid}-f4)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0496;0.075;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="469" y="939.36">
            NAMESPACE API
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-devs`}>
        <rect x="310" y="135" width="150" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="310" y="135" width="150" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <rect x="326" y="147" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="326" y="147" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s3`} x="332.4" y="153.4" width="19.2" height="19.2" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0">
          <tspan x="370" y="166.82">
            DEVELOPERS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-repo`}>
        <rect x="88" y="148" width="172" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="88" y="148" width="172" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <rect x="104" y="161" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="104" y="161" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s4`} x="110.4" y="167.4" width="19.2" height="19.2" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0">
          <tspan x="148" y="172.32">
            APP REPOSITORY
          </tspan>
        </text>
        <text fontSize="9.75" fontWeight="400" fill="#979a9b">
          <tspan x="148" y="189.67">
            main branch
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-build`}>
        <rect x="98" y="459" width="152" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="98" y="459" width="152" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <rect x="114" y="472" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="114" y="472" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="120.72" y="478.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0">
          <tspan x="158" y="483.32">
            CLOUD BUILD
          </tspan>
        </text>
        <text fontSize="9.75" fontWeight="400" fill="#979a9b">
          <tspan x="158" y="500.67">
            Build and test
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-registry`}>
        <rect x="175" y="1259" width="181" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="175" y="1259" width="181" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <rect x="191" y="1272" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="191" y="1272" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="197.72" y="1278.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.76" fill="#9d9fa0">
          <tspan x="235" y="1282.87">
            ARTIFACT REGISTRY
          </tspan>
        </text>
        <text fontSize="9.75" fontWeight="400" fill="#979a9b">
          <tspan x="235" y="1300.67">
            Container images
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-deploy`}>
        <rect x="153" y="690" width="169" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="153" y="690" width="169" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <rect x="169" y="703" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="169" y="703" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="175.72" y="709.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0">
          <tspan x="213" y="714.32">
            CLOUD DEPLOY
          </tspan>
        </text>
        <text fontSize="9.5" fontWeight="400" fill="#979a9b">
          <tspan x="213" y="731.59">
            Delivery pipeline
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-web`}>
        <rect x="294.5" y="969" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="294.5" y="969" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="297.86" y="972.36" width="41.28" height="41.28" filter={`url(#${uid}-f3)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="318.93" y="1035.27">
            PODS
          </tspan>
        </text>
        <text fontSize="9.75" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="318.5" y="1052.62">
            frontend x3
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-api`}>
        <rect x="481.5" y="969" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="481.5" y="969" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="484.86" y="972.36" width="41.28" height="41.28" filter={`url(#${uid}-f3)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="505.93" y="1035.27">
            PODS
          </tspan>
        </text>
        <text fontSize="9.75" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="505.5" y="1052.62">
            orders-api x3
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-redis`}>
        <rect x="103" y="1153" width="163" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="103" y="1153" width="163" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <rect x="119" y="1166" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="119" y="1166" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="125.72" y="1172.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0">
          <tspan x="163" y="1177.32">
            MEMORYSTORE
          </tspan>
        </text>
        <text fontSize="9.75" fontWeight="400" fill="#979a9b">
          <tspan x="163" y="1194.67">
            Redis cache
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-sql`}>
        <rect x="399" y="1153" width="189" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="399" y="1153" width="189" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <rect x="415" y="1166" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="415" y="1166" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="421.72" y="1172.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0">
          <tspan x="459" y="1177.32">
            CLOUD SQL
          </tspan>
        </text>
        <text fontSize="9.75" fontWeight="400" fill="#979a9b">
          <tspan x="459" y="1194.67">
            PostgreSQL with HA
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-secrets`}>
        <rect x="617" y="1153" width="179" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="617" y="1153" width="179" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <rect x="633" y="1166" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="633" y="1166" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="639.72" y="1172.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0">
          <tspan x="677" y="1177.32">
            SECRET MANAGER
          </tspan>
        </text>
        <text fontSize="9.75" fontWeight="400" fill="#979a9b">
          <tspan x="677" y="1194.67">
            Regional secrets
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-logging`}>
        <rect x="408" y="1490" width="170" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="408" y="1490" width="170" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <rect x="424" y="1502" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="424" y="1502" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s10`} x="430.72" y="1508.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0">
          <tspan x="468" y="1521.82">
            CLOUD LOGGING
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-monitoring`}>
        <rect x="608" y="1490" width="187" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="608" y="1490" width="187" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <rect x="624" y="1502" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="624" y="1502" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0991;0.1246;0.9145;0.94;1" dur="7.063s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s10`} x="630.72" y="1508.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0">
          <tspan x="668" y="1521.82">
            CLOUD MONITORING
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <path d="M310 163 L292 163 Q285 163 285 170 L285 170 Q285 177 278 177 L260.5 177" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.41" pathLength="1" strokeDasharray="0.41 2" strokeDashoffset="0.41" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.41;0.41;-0.59;-1;-1" keyTimes="0;0.177;0.2336;0.2569;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.063s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.1784;0.2569;0.2583;1" dur="7.063s" repeatCount="indefinite" />
        </path>
        <circle r="2.51" fill="#60a5fa" opacity="0">
          <animateMotion path="M310 163 L292 163 Q285 163 285 170 L285 170 Q285 177 278 177 L260.5 177" dur="7.063s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.177;0.2336;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.1557;0.177;0.2676;0.2888;1" dur="7.063s" repeatCount="indefinite" />
        </circle>
        <path d="M174 206 L174 458.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.41" 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.2676;0.379;0.3906;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.063s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2676;0.269;0.3906;0.392;1" dur="7.063s" repeatCount="indefinite" />
        </path>
        <circle r="2.51" fill="#60a5fa" opacity="0">
          <animateMotion path="M174 206 L174 458.5" dur="7.063s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.2676;0.379;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.2464;0.2676;0.413;0.4343;1" dur="7.063s" repeatCount="indefinite" />
        </circle>
        <circle r="2.01" fill="#60a5fa" opacity="0">
          <animateMotion path="M149 517 L149 524.5 Q149 532 141.5 532 L96 532 Q88 532 88 540 L88 1218 Q88 1226 96 1226 L227 1226 Q235 1226 235 1234 L235 1258.5" dur="7.063s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.445;0.5866;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.4238;0.445;0.5866;0.6078;1" dur="7.063s" repeatCount="indefinite" />
        </circle>
        <path d="M199 517 L199 593 Q199 601 207 601 L230 601 Q238 601 238 609 L238 689.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.41" pathLength="1" strokeDasharray="0.12 2" strokeDashoffset="0.12" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.12;0.12;-0.88;-1;-1" keyTimes="0;0.413;0.5064;0.5179;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.063s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.413;0.4144;0.5179;0.5193;1" dur="7.063s" repeatCount="indefinite" />
        </path>
        <circle r="2.51" fill="#60a5fa" opacity="0">
          <animateMotion path="M199 517 L199 593 Q199 601 207 601 L230 601 Q238 601 238 609 L238 689.5" dur="7.063s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.413;0.5064;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.3918;0.413;0.5404;0.5616;1" dur="7.063s" repeatCount="indefinite" />
        </circle>
        <path d="M238 748 L238 864.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.41" pathLength="1" strokeDasharray="0.22 2" strokeDashoffset="0.22" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.22;0.22;-0.78;-1;-1" keyTimes="0;0.5404;0.597;0.6097;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.063s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5404;0.5418;0.6097;0.6111;1" dur="7.063s" repeatCount="indefinite" />
        </path>
        <circle r="2.51" fill="#60a5fa" opacity="0">
          <animateMotion path="M238 748 L238 864.5" dur="7.063s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5404;0.597;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.5191;0.5404;0.631;0.6522;1" dur="7.063s" repeatCount="indefinite" />
        </circle>
        <path d="M484 1101 L484 1120 Q484 1128 476 1128 L304 1128 Q296 1128 296 1136 L296 1258.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.41" 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.631;0.7726;0.7833;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.063s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.631;0.6324;0.7833;0.7847;1" dur="7.063s" repeatCount="indefinite" />
        </path>
        <circle r="2.51" fill="#60a5fa" opacity="0">
          <animateMotion path="M484 1101 L484 1120 Q484 1128 476 1128 L304 1128 Q296 1128 296 1136 L296 1258.5" dur="7.063s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.631;0.7726;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.6097;0.631;0.7726;0.7938;1" dur="7.063s" repeatCount="indefinite" />
        </circle>
        <circle r="2.01" fill="#60a5fa" opacity="0">
          <animateMotion path="M508 1101 L508 1120 Q508 1128 516 1128 L594 1128 Q602 1128 602 1136 L602 1437.5" dur="7.063s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6237;0.7653;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.6024;0.6237;0.7653;0.7865;1" dur="7.063s" repeatCount="indefinite" />
        </circle>
      </g>
      <g id={`${uid}-legend`}>
        <rect x="594" y="1618" width="262" height="53" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <path d="M604 1635.5 H632" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" />
        <text fontSize="8.25" fontWeight="700" letterSpacing="0.5" fill="#9d9fa0">
          <tspan x="640" y="1638.43">
            DELIVERY, IMAGE PULLS AND DATA ACCESS
          </tspan>
        </text>
        <path d="M604 1653.5 H632" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeDasharray="1 2.51" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="640" y="1656.87">
            TELEMETRY
          </tspan>
        </text>
      </g>
    </svg>
  );
}
