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

export default function WebApplicationOnGoogleCloud(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="911" height="1313" viewBox="0 0 911 1313" 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`}>
        Web application on Google Cloud
      </title>
      <desc id={`${uid}-sdw-desc`}>
        Web application on Google Cloud. 8 components in 4 groups. Connections: Users to Cloud Load Balancing (HTTPS); Cloud Armor to Cloud Load Balancing; Cloud CDN to Cloud Load Balancing; Cloud Load Balancing to Cloud Run (serverless NEG); Cloud Run to Cloud SQL; Cloud Run to Secret Manager; Cloud Run to Memorystore (Direct VPC egress).
      </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.7" height="20.7" patternUnits="userSpaceOnUse">
          <path d="M0 0.52H20.7M0.52 0V20.7" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1.04" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="548" cy="608.75" r="535.4">
          <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="#9aa0a6" d="m331.66 331.66-22.627-22.627c29.242-29.243 29.242-76.823 0-106.066l22.627-22.627c41.72 41.719 41.72 109.602 0 151.32m-151.32 0c-41.72-41.719-41.72-109.602 0-151.32l22.627 22.627c-29.242 29.243-29.242 76.823 0 106.066z" />
          <path fill="#4285f4" d="M309.033 202.967c-29.242-29.242-76.824-29.242-106.066 0L180.34 180.34C200.55 160.13 227.42 149 256 149s55.45 11.13 75.66 31.34zM256 363c-28.58 0-55.45-11.13-75.66-31.34l22.627-22.627c29.242 29.242 76.824 29.242 106.066 0l22.627 22.627C311.45 351.87 284.58 363 256 363" />
          <path fill="#4285f4" d="M170.229 147.603a62.2 62.2 0 0 0 8.521-31.478c0-34.531-28.094-62.625-62.625-62.625S53.5 81.594 53.5 116.125s28.094 62.625 62.625 62.625a62.2 62.2 0 0 0 31.478-8.52l45.281 45.281a75.4 75.4 0 0 1 22.627-22.627l-45.281-45.281zm-54.104-.853c-16.887 0-30.625-13.738-30.625-30.625S99.238 85.5 116.125 85.5s30.625 13.738 30.625 30.625-13.738 30.625-30.625 30.625" />
          <path fill="#9aa0a6" d="M215.51 319.117a75.4 75.4 0 0 1-22.627-22.627l-45.281 45.281a62.2 62.2 0 0 0-31.478-8.52c-34.531 0-62.625 28.094-62.625 62.625s28.094 62.625 62.625 62.625 62.625-28.094 62.625-62.625a62.2 62.2 0 0 0-8.521-31.478l45.281-45.281ZM116.125 426.5c-16.887 0-30.625-13.738-30.625-30.625s13.738-30.625 30.625-30.625 30.625 13.738 30.625 30.625-13.738 30.625-30.625 30.625" />
          <path fill="#4285f4" d="M395.875 333.25a62.2 62.2 0 0 0-31.478 8.52l-45.281-45.281a75.4 75.4 0 0 1-22.627 22.627l45.281 45.281a62.2 62.2 0 0 0-8.521 31.478c0 34.531 28.094 62.625 62.625 62.625s62.625-28.094 62.625-62.625-28.094-62.625-62.625-62.625zm0 93.25c-16.887 0-30.625-13.738-30.625-30.625s13.738-30.625 30.625-30.625 30.625 13.738 30.625 30.625-13.738 30.625-30.625 30.625" />
          <path fill="#9aa0a6" d="M395.875 53.5c-34.531 0-62.625 28.094-62.625 62.625a62.24 62.24 0 0 0 8.764 31.902l-45.118 45.118a75.4 75.4 0 0 1 22.481 22.773l45.444-45.444a62.2 62.2 0 0 0 31.054 8.276c34.531 0 62.625-28.094 62.625-62.625S430.406 53.5 395.875 53.5m0 93.25c-16.887 0-30.625-13.738-30.625-30.625S378.988 85.5 395.875 85.5 426.5 99.238 426.5 116.125s-13.738 30.625-30.625 30.625" />
        </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 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.94" 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}-s3`} viewBox="0 0 512 512" overflow="visible">
          <rect width="512" height="512" fill="none" />
          <path fill="#fbbc04" d="M144.4 272c-6.4 0-12.4-3.8-14.9-10.1l-74.1-186c-3.3-8.2.7-17.5 8.9-20.8s17.5.7 20.8 8.9l74.2 186c3.3 8.2-.7 17.5-8.9 20.8-1.9.8-3.9 1.1-5.9 1.1h-.1Z" />
          <path fill="#ea4335" d="M256 272c-6.4 0-12.4-3.8-14.9-10.1L167 75.9c-2.6-6.6-.6-14.1 5-18.5s13.4-4.5 19.2-.4l260.1 186c7.2 5.1 8.9 15.1 3.7 22.3s-15.1 8.9-22.3 3.7L216.9 114.7l54 135.3c3.3 8.2-.7 17.5-8.9 20.8-1.9.8-4 1.1-5.9 1.1h-.1Z" />
          <path fill="#34a853" d="m127.2 256-72 180c-3.3 8.2.7 17.5 8.9 20.8 3.1 1.2 4 1.1 5.9 1.1 6.3 0 12.4-3.8 14.9-10.1l74.4-186c.8-2 1.1-4 1.1-5.9h-33.2Z" />
          <path fill="#4285f4" d="M414.5 256 216.8 397.2l54.1-135.3c.8-2 1.1-4 1.1-5.9h-33.2l-72 180c-2.6 6.6-.6 14.1 5 18.5 2.9 2.3 6.4 3.4 9.9 3.4s6.5-1 9.3-3l260.4-186c4.4-3.1 6.7-8 6.7-13h-43.6Z" />
        </symbol>
        <symbol id={`${uid}-s4`} 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}-s5`} 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}-s6`} 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>
      </defs>
      <rect width="911" height="1313" fill={`url(#${uid}-bg)`} />
      <rect width="911" height="1313" fill={`url(#${uid}-grid)`} />
      <rect width="911" height="1313" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          WEB APPLICATION ON GOOGLE CLOUD
        </tspan>
      </text>
      <text fontSize="11" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65.08">
          A global load balancer in front of Cloud Run, with Cloud CDN and Cloud Armor on its backend, backed by Cloud SQL and Memorystore
        </tspan>
      </text>
      <g id={`${uid}-g-gcloud`}>
        <rect x="28" y="313" width="855" height="907" rx="2.07" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="28" y="313" width="855" height="907" rx="2.07" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0654;0.099;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-project`}>
        <rect x="48" y="365" width="815" height="835" rx="2.07" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="48" y="365" width="815" height="835" rx="2.07" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0654;0.099;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-region`}>
        <rect x="68" y="766" width="775" height="414" rx="2.07" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="68" y="766" width="775" height="414" rx="2.07" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0654;0.099;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-vpc`}>
        <rect x="88" y="1030" width="258" height="130" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" strokeDasharray="3.11 3.11" />
        <g opacity="0">
          <rect x="88" y="1030" width="258" height="130" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.04" strokeDasharray="3.11 3.11" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0654;0.099;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M615 154 L615 502 Q615 510 607 510 L549 510 Q541 510 541 518 L541 553.48" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.04" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M536.86 547.79 L541 554 L545.14 547.79" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.04" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M615 154 L615 502 Q615 510 607 510 L549 510 Q541 510 541 518 L541 553.48" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.24" 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.2335;0.4203;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.353s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2335;0.2671;0.9;0.9336;1" dur="5.353s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M536.86 547.79 L541 554 L545.14 547.79" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.04" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4203;0.4539;0.9;0.9336;1" dur="5.353s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M216 482.5 L216 502 Q216 510 224 510 L412 510 Q420 510 420 518 L420 554" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.04" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.04 2.59" />
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M481 490 L481 554" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.04" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.04 2.59" />
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M481 612 L481 817.48" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.04" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M476.86 811.79 L481 818 L485.14 811.79" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.04" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M481 612 L481 817.48" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.24" 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.4651;0.5813;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.353s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4651;0.4988;0.9;0.9336;1" dur="5.353s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M476.86 811.79 L481 818 L485.14 811.79" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.04" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5813;0.6149;0.9;0.9336;1" dur="5.353s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M481 876 L481 1062.98" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.04" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M476.86 1057.29 L481 1063.5 L485.14 1057.29" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.04" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M481 876 L481 1062.98" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.24" 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.6261;0.7319;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.353s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6261;0.6598;0.9;0.9336;1" dur="5.353s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M476.86 1057.29 L481 1063.5 L485.14 1057.29" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.04" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7319;0.7655;0.9;0.9336;1" dur="5.353s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M519 876 L519 973 Q519 981 527 981 L711 981 Q719 981 719 989 L719 1062.98" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.04" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M714.86 1057.29 L719 1063.5 L723.14 1057.29" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.04" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M444 876 L444 888 Q444 896 436 896 L225 896 Q217 896 217 904 L217 1081.48" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.04" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M212.86 1075.79 L217 1082 L221.14 1075.79" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.04" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-el-e1`}>
        <rect x="620" y="218" width="51" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.04" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="645.78" y="231.78">
            HTTPS
          </tspan>
        </text>
        <g opacity="0">
          <rect x="620" y="218" width="51" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.04" />
          <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#60a5fa" textAnchor="middle">
            <tspan x="645.78" y="231.78">
              HTTPS
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2335;0.2671;0.9;0.9336;1" dur="5.353s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e4`}>
        <rect x="486" y="676" width="96" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.04" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="534.28" y="689.78">
            SERVERLESS NEG
          </tspan>
        </text>
        <g opacity="0">
          <rect x="486" y="676" width="96" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.04" />
          <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#60a5fa" textAnchor="middle">
            <tspan x="534.28" y="689.78">
              SERVERLESS NEG
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4651;0.4988;0.9;0.9336;1" dur="5.353s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e7`}>
        <rect x="222" y="940" width="112" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.04" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="278.28" y="953.78">
            DIRECT VPC EGRESS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-gcloud`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="40" y="335.35">
            GOOGLE CLOUD
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-project`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="60" y="387.35">
            PROJECT WEB-PROD
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-region`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="80" y="788.36">
            US-CENTRAL1
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-vpc`}>
        <use href={`#${uid}-s1`} x="101.3" y="1040.3" width="17.4" height="17.4" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <use href={`#${uid}-s1`} x="101.3" y="1040.3" width="17.4" height="17.4" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0654;0.099;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="128" y="1052.36">
            VPC NETWORK
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-users`}>
        <rect x="503" y="96" width="223" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="503" y="96" width="223" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1308;0.1644;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
        <rect x="519" y="109" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="519" y="109" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1308;0.1644;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s2`} x="525.4" y="115.4" width="19.2" height="19.2" />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0">
          <tspan x="563" y="120.58">
            USERS
          </tspan>
        </text>
        <text fontSize="9.5" fontWeight="400" fill="#979a9b">
          <tspan x="563" y="137.58">
            Browsers and mobile apps
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-lb`}>
        <rect x="360" y="554" width="241" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="360" y="554" width="241" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1308;0.1644;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
        <rect x="376" y="567" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="376" y="567" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1308;0.1644;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s1`} x="382.72" y="573.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0">
          <tspan x="420" y="578.58">
            CLOUD LOAD BALANCING
          </tspan>
        </text>
        <text fontSize="9.5" fontWeight="400" fill="#979a9b">
          <tspan x="420" y="595.59">
            Global external Application LB
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-armor`}>
        <rect x="108" y="424.5" width="216" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="108" y="424.5" width="216" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1308;0.1644;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
        <rect x="124" y="437.5" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="124" y="437.5" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1308;0.1644;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s1`} x="130.72" y="444.22" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0">
          <tspan x="168" y="449.08">
            CLOUD ARMOR
          </tspan>
        </text>
        <text fontSize="9.5" fontWeight="400" fill="#979a9b">
          <tspan x="168" y="466.09">
            Policy on the LB backend
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-cdn`}>
        <rect x="364" y="417" width="233" height="73" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="364" y="417" width="233" height="73" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1308;0.1644;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
        <rect x="380" y="437.5" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="380" y="437.5" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1308;0.1644;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s1`} x="386.72" y="444.22" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0">
          <tspan x="424" y="441.58">
            CLOUD CDN
          </tspan>
        </text>
        <text fontSize="9.5" fontWeight="400" fill="#979a9b">
          <tspan x="424" y="458.59">
            Static asset cache on the LB
          </tspan>
          <tspan x="424" y="473.59">
            backend
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-run`}>
        <rect x="406" y="818" width="150" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="406" y="818" width="150" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1308;0.1644;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
        <rect x="422" y="831" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="422" y="831" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1308;0.1644;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s3`} x="428.72" y="837.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0">
          <tspan x="466" y="842.58">
            CLOUD RUN
          </tspan>
        </text>
        <text fontSize="9.5" fontWeight="400" fill="#979a9b">
          <tspan x="466" y="859.59">
            web service
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-sql`}>
        <rect x="386" y="1063.5" width="189" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="386" y="1063.5" width="189" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1308;0.1644;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
        <rect x="402" y="1076.5" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="402" y="1076.5" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1308;0.1644;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s4`} x="408.72" y="1083.22" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0">
          <tspan x="446" y="1088.08">
            CLOUD SQL
          </tspan>
        </text>
        <text fontSize="9.5" fontWeight="400" fill="#979a9b">
          <tspan x="446" y="1105.09">
            PostgreSQL with HA
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-redis`}>
        <rect x="125" y="1082" width="184" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="125" y="1082" width="184" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1308;0.1644;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
        <rect x="141" y="1095" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="141" y="1095" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1308;0.1644;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="147.72" y="1101.72" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0">
          <tspan x="185" y="1106.58">
            MEMORYSTORE
          </tspan>
        </text>
        <text fontSize="9.5" fontWeight="400" fill="#979a9b">
          <tspan x="185" y="1123.59">
            Redis session store
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-secrets`}>
        <rect x="615" y="1063.5" width="208" height="58" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="615" y="1063.5" width="208" height="58" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1308;0.1644;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
        <rect x="631" y="1076.5" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.04" />
        <g opacity="0">
          <rect x="631" y="1076.5" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.04" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1308;0.1644;0.9064;0.94;1" dur="5.353s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="637.72" y="1083.22" width="18.56" height="18.56" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0">
          <tspan x="675" y="1088.08">
            SECRET MANAGER
          </tspan>
        </text>
        <text fontSize="9.5" fontWeight="400" fill="#979a9b">
          <tspan x="675" y="1105.09">
            Regional DB credentials
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <path d="M615 154 L615 502 Q615 510 607 510 L549 510 Q541 510 541 518 L541 553.48" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.48" pathLength="1" strokeDasharray="0.06 2" strokeDashoffset="0.06" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.06;0.06;-0.94;-1;-1" keyTimes="0;0.2335;0.4203;0.4309;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.353s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2335;0.2354;0.4309;0.4328;1" dur="5.353s" repeatCount="indefinite" />
        </path>
        <circle r="2.59" fill="#60a5fa" opacity="0">
          <animateMotion path="M615 154 L615 502 Q615 510 607 510 L549 510 Q541 510 541 518 L541 553.48" dur="5.353s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.2335;0.4203;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.2055;0.2335;0.4651;0.4932;1" dur="5.353s" repeatCount="indefinite" />
        </circle>
        <path d="M481 612 L481 817.48" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.48" pathLength="1" strokeDasharray="0.13 2" strokeDashoffset="0.13" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.13;0.13;-0.87;-1;-1" keyTimes="0;0.4651;0.5813;0.5965;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.353s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4651;0.467;0.5965;0.5984;1" dur="5.353s" repeatCount="indefinite" />
        </path>
        <circle r="2.59" fill="#60a5fa" opacity="0">
          <animateMotion path="M481 612 L481 817.48" dur="5.353s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4651;0.5813;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.4371;0.4651;0.6261;0.6542;1" dur="5.353s" repeatCount="indefinite" />
        </circle>
        <path d="M481 876 L481 1062.98" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.48" pathLength="1" strokeDasharray="0.14 2" strokeDashoffset="0.14" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.14;0.14;-0.86;-1;-1" keyTimes="0;0.6261;0.7319;0.7471;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.353s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6261;0.628;0.7471;0.749;1" dur="5.353s" repeatCount="indefinite" />
        </path>
        <circle r="2.59" fill="#60a5fa" opacity="0">
          <animateMotion path="M481 876 L481 1062.98" dur="5.353s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6261;0.7319;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.5981;0.6261;0.7319;0.7599;1" dur="5.353s" repeatCount="indefinite" />
        </circle>
        <circle r="2.07" fill="#60a5fa" opacity="0">
          <animateMotion path="M519 876 L519 973 Q519 981 527 981 L711 981 Q719 981 719 989 L719 1062.98" dur="5.353s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4578;0.6446;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.4298;0.4578;0.6446;0.6726;1" dur="5.353s" repeatCount="indefinite" />
        </circle>
        <circle r="2.07" fill="#60a5fa" opacity="0">
          <animateMotion path="M444 876 L444 888 Q444 896 436 896 L225 896 Q217 896 217 904 L217 1081.48" dur="5.353s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6073;0.7941;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.5793;0.6073;0.7941;0.8221;1" dur="5.353s" repeatCount="indefinite" />
        </circle>
      </g>
      <g id={`${uid}-legend`}>
        <rect x="616" y="1232" width="267" height="53" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.04" />
        <path d="M626 1249.5 H654" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.04" strokeLinecap="round" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="662" y="1252.87">
            REQUEST TRAFFIC
          </tspan>
        </text>
        <path d="M626 1267.5 H654" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.04" strokeLinecap="round" strokeDasharray="1.04 2.59" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#9d9fa0">
          <tspan x="662" y="1270.52">
            ATTACHED TO THE LOAD BALANCER BACKEND
          </tspan>
        </text>
      </g>
    </svg>
  );
}