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

export default function AKSApplicationPlatformOnAzure(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="837" height="1468" viewBox="0 0 837 1468" 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`}>
        AKS application platform on Azure
      </title>
      <desc id={`${uid}-sdw-desc`}>
        AKS application platform on Azure. 8 components in 8 groups. Connections: Users to Application Gateway (HTTPS); Application Gateway to User nodes (HTTP to pod IPs (AGIC)); User nodes to Container Registry (pull images); User nodes to Managed identity (token exchange (Entra ID)); User nodes to Key Vault (read secrets); System nodes to Log Analytics; User nodes to Log Analytics.
      </desc>
      <defs>
        <linearGradient id={`${uid}-bg`} x1="0" y1="0" x2="0.34" y2="0.94">
          <stop offset="0" stopColor="#0e1a24" />
          <stop offset="0.6" stopColor="#0b1012" />
        </linearGradient>
        <pattern id={`${uid}-grid`} width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M0 0.5H20M0.5 0V20" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="442.25" cy="711.25" r="525.9">
          <stop offset="0" stopColor="#60a5fa" stopOpacity="0.12" />
          <stop offset="1" stopColor="#60a5fa" stopOpacity="0" />
        </radialGradient>
        <symbol id={`${uid}-s1`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <radialGradient id={`${uid}-s1-sk_a`} cx="-36.63" cy="17.12" r="11.18" gradientTransform="matrix(.94 0 0 .94 41.88 -7.4)" gradientUnits="userSpaceOnUse">
              <stop offset=".27" stopColor="#ffd70f" />
              <stop offset=".49" stopColor="#ffcb12" />
              <stop offset=".88" stopColor="#feac19" />
              <stop offset="1" stopColor="#fea11b" />
            </radialGradient>
          </defs>
          <path fill={`url(#${uid}-s1-sk_a)`} d="M13.56 7.19a2.07 2.07 0 0 0 0-2.93L10 .69a2.06 2.06 0 0 0-2.92 0L3.52 4.26a2.09 2.09 0 0 0 0 2.93l3 3a.6.6 0 0 1 .17.41v5.52a.7.7 0 0 0 .2.5l1.35 1.35a.45.45 0 0 0 .66 0l1.31-1.31.77-.77a.26.26 0 0 0 0-.38l-.55-.56a.29.29 0 0 1 0-.42l.55-.56a.26.26 0 0 0 0-.38L10.4 13a.28.28 0 0 1 0-.41L11 12a.26.26 0 0 0 0-.38l-.77-.78v-.28Zm-5-5.64a1.18 1.18 0 1 1-1.19 1.18 1.17 1.17 0 0 1 1.17-1.18Z" />
          <path fill="#ff9300" d="M7.62 16.21A.25.25 0 0 0 8 16v-4.45a.27.27 0 0 0-.11-.22.25.25 0 0 0-.39.22V16a.27.27 0 0 0 .12.21" opacity=".75" />
          <rect width="5.86" height=".69" x="5.69" y="5.45" fill="#ff9300" opacity=".75" rx=".32" />
          <rect width="5.86" height=".69" x="5.69" y="6.57" fill="#ff9300" opacity=".75" rx=".32" />
        </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 18" overflow="visible">
          <path fill="#949494" d="M.5 15.08a.16.16 0 0 0 .08.14l1.16.65L3.7 17a.17.17 0 0 0 .23-.06l.66-1.12a.16.16 0 0 0-.06-.21l-2.3-1.3a.17.17 0 0 1-.08-.14V3.85a.16.16 0 0 1 .08-.14l2.3-1.3a.16.16 0 0 0 .06-.21l-.66-1.12A.17.17 0 0 0 3.7 1L1.78 2.11l-1.2.67a.16.16 0 0 0-.08.14z" />
          <path fill="#a3a3a3" d="m2.14 3.77.06-.06 2.3-1.3a.14.14 0 0 0 .06-.21L3.9 1.08A.15.15 0 0 0 3.68 1L1.75 2.11l-1.19.67s-.05 0-.06.06l.9.51ZM4.5 15.59l-2.3-1.3a.2.2 0 0 1-.07-.09l-1.62 1h.05l1.15.65 2 1.11a.15.15 0 0 0 .22-.06l.66-1.12a.14.14 0 0 0-.09-.19" />
          <path fill="#949494" d="M17.5 15.08a.16.16 0 0 1-.08.14l-1.16.65L14.3 17a.17.17 0 0 1-.23-.06l-.66-1.12a.16.16 0 0 1 .06-.21l2.3-1.3a.17.17 0 0 0 .08-.14V3.85a.16.16 0 0 0-.08-.14l-2.3-1.3a.16.16 0 0 1-.06-.21l.66-1.12A.17.17 0 0 1 14.3 1l1.92 1.09 1.2.67a.16.16 0 0 1 .08.14z" />
          <path fill="#a3a3a3" d="m15.86 3.77-.06-.06-2.3-1.3a.14.14 0 0 1-.06-.21l.66-1.12a.15.15 0 0 1 .22-.08l1.93 1.09 1.19.67.06.06-.9.51ZM13.5 15.59l2.3-1.3a.2.2 0 0 0 .07-.09l1.62 1-1.15.65-2 1.11a.15.15 0 0 1-.22-.06l-.66-1.12a.14.14 0 0 1 .04-.19" />
          <polygon fill="#32bedd" points="14.31 5.93 14.31 12.07 8.99 15.16 8.99 9.01 14.31 5.93" />
          <polygon fill="#9cebff" points="14.31 5.93 9 9.02 3.68 5.93 9 2.84 14.31 5.93" />
          <polygon fill="#50e6ff" points="8.99 9.02 8.99 15.16 3.68 12.07 3.68 5.93 8.99 9.02" />
          <polygon fill="#9cebff" points="3.68 12.07 8.99 9.01 8.99 15.16 3.68 12.07" />
          <polygon fill="#50e6ff" points="14.31 12.07 8.99 9.01 8.99 15.16 14.31 12.07" />
        </symbol>
        <symbol id={`${uid}-s3`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s3-zw_a`} x1="9.88" x2="11.52" y1="8.59" y2="10.23" gradientTransform="rotate(-.08 -285.464 -1454.08)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#86d633" />
              <stop offset="1" stopColor="#5e9624" />
            </linearGradient>
            <linearGradient id={`${uid}-s3-zw_b`} x1="6.18" x2="7.81" y1="8.59" y2="10.23" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#86d633" />
              <stop offset="1" stopColor="#5e9624" />
            </linearGradient>
            <linearGradient id={`${uid}-s3-zw_c`} x1="2.48" x2="4.11" y1="8.59" y2="10.23" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#86d633" />
              <stop offset="1" stopColor="#5e9624" />
            </linearGradient>
          </defs>
          <circle cx="12.74" cy="8.99" r="1.16" fill={`url(#${uid}-s3-zw_a)`} />
          <circle cx="9.04" cy="9" r="1.16" fill={`url(#${uid}-s3-zw_b)`} />
          <circle cx="5.34" cy="9" r="1.16" fill={`url(#${uid}-s3-zw_c)`} />
          <path fill="#50e6ff" d="m6.182 13.638-.664.665a.3.3 0 0 1-.424 0L.18 9.404a.6.6 0 0 1-.001-.848l.663-.666 5.34 5.324a.3.3 0 0 1 0 .425" />
          <path fill="#1490df" d="m5.418 3.708.666.664a.3.3 0 0 1 0 .424L.838 10.057l-.666-.663a.6.6 0 0 1-.001-.849L4.994 3.71a.3.3 0 0 1 .424 0" />
          <path fill="#50e6ff" d="m17.157 7.88.663.666a.6.6 0 0 1 0 .848l-4.915 4.9a.3.3 0 0 1-.424 0l-.664-.666a.3.3 0 0 1 0-.424z" />
          <path fill="#1490df" d="m17.818 9.387-.665.664-5.247-5.261a.3.3 0 0 1 0-.425l.674-.67a.3.3 0 0 1 .424 0l4.823 4.836a.6.6 0 0 1-.002.849Z" />
        </symbol>
        <symbol id={`${uid}-s4`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s4-qj_a`} x1="2.94" x2="8.67" y1="3.74" y2="3.74" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#b77af4" />
              <stop offset="1" stopColor="#773adc" />
            </linearGradient>
            <linearGradient id={`${uid}-s4-qj_b`} x1="9.13" x2="14.85" y1="3.79" y2="3.79" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#b77af4" />
              <stop offset="1" stopColor="#773adc" />
            </linearGradient>
            <linearGradient id={`${uid}-s4-qj_c`} x1=".01" x2="5.73" y1="9.12" y2="9.12" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#b77af4" />
              <stop offset="1" stopColor="#773adc" />
            </linearGradient>
            <linearGradient id={`${uid}-s4-qj_d`} x1="6.18" x2="11.9" y1="9.08" y2="9.08" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#b77af4" />
              <stop offset="1" stopColor="#773adc" />
            </linearGradient>
            <linearGradient id={`${uid}-s4-qj_e`} x1="12.35" x2="18.08" y1="9.13" y2="9.13" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#b77af4" />
              <stop offset="1" stopColor="#773adc" />
            </linearGradient>
            <linearGradient id={`${uid}-s4-qj_f`} x1="2.87" x2="8.6" y1="14.56" y2="14.56" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#b77af4" />
              <stop offset="1" stopColor="#773adc" />
            </linearGradient>
            <linearGradient id={`${uid}-s4-qj_g`} x1="9.05" x2="14.78" y1="14.6" y2="14.6" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#b77af4" />
              <stop offset="1" stopColor="#773adc" />
            </linearGradient>
          </defs>
          <polygon fill={`url(#${uid}-s4-qj_a)`} points="5.8 1.22 2.94 1.75 2.94 5.65 5.8 6.26 8.67 5.11 8.67 2.2 5.8 1.22" />
          <path fill="none" d="m5.91 6.2 2.62-1.06A.2.2 0 0 0 8.65 5V2.36a.21.21 0 0 0-.13-.18l-2.65-.9h-.12l-2.6.48a.2.2 0 0 0-.15.18v3.53a.19.19 0 0 0 .15.19l2.63.55a.3.3 0 0 0 .13-.01" />
          <path fill="#341a6e" d="M2.94 1.75v3.9l2.89.61v-5Zm1.22 3.6-.81-.16v-3l.81-.13Zm1.26.23-.93-.15V2l.93-.16Z" />
          <polygon fill={`url(#${uid}-s4-qj_b)`} points="11.99 1.27 9.13 1.8 9.13 5.7 11.99 6.31 14.85 5.15 14.85 2.25 11.99 1.27" />
          <path fill="#341a6e" d="M9.13 1.8v3.9l2.87.61v-5Zm1.21 3.6-.81-.16v-3l.81-.13Zm1.26.23-.93-.15V2.05l.93-.17Z" />
          <polygon fill={`url(#${uid}-s4-qj_c)`} points="2.87 6.6 0.01 7.13 0.01 11.03 2.87 11.64 5.74 10.49 5.74 7.58 2.87 6.6" />
          <path fill="#341a6e" d="M0 7.13V11l2.89.61v-5Zm1.21 3.61-.81-.17v-3l.81-.14Zm1.27.26-.93-.15V7.38l.93-.16Z" />
          <polygon fill={`url(#${uid}-s4-qj_d)`} points="9.04 6.56 6.18 7.09 6.18 10.99 9.04 11.61 11.9 10.45 11.9 7.54 9.04 6.56" />
          <path fill="#341a6e" d="M6.18 7.09V11l2.88.61v-5Zm1.21 3.61-.81-.17v-3l.81-.14Zm1.26.22-.93-.15V7.34l.93-.16Z" />
          <polygon fill={`url(#${uid}-s4-qj_e)`} points="15.21 6.61 12.35 7.14 12.35 11.04 15.21 11.65 18.08 10.5 18.08 7.59 15.21 6.61" />
          <path fill="#341a6e" d="M12.35 7.14V11l2.89.61v-5Zm1.22 3.61-.81-.17v-3l.81-.14Zm1.26.22-.93-.15V7.39l.93-.16Z" />
          <polygon fill={`url(#${uid}-s4-qj_f)`} points="5.73 12.04 2.87 12.56 2.87 16.46 5.73 17.08 8.6 15.92 8.6 13.02 5.73 12.04" />
          <path fill="none" d="m5.84 17 2.61-1a.18.18 0 0 0 .12-.18v-2.6a.2.2 0 0 0-.13-.22l-2.64-.9a.17.17 0 0 0-.12 0l-2.6.47a.19.19 0 0 0-.16.19v3.54a.19.19 0 0 0 .15.19L5.7 17a.23.23 0 0 0 .14 0" />
          <path fill="#341a6e" d="M2.87 12.56v3.9l2.89.62V12Zm1.22 3.61L3.28 16v-3l.81-.14Zm1.26.23-.93-.15v-3.44l.93-.16Z" />
          <polygon fill={`url(#${uid}-s4-qj_g)`} points="11.91 12.08 9.05 12.61 9.05 16.51 11.91 17.12 14.78 15.97 14.78 13.06 11.91 12.08" />
          <path fill="#341a6e" d="M9.05 12.61v3.9l2.89.61v-5Zm1.22 3.61-.81-.17v-3l.81-.14Zm1.26.22-.93-.15v-3.43l.93-.16Z" />
        </symbol>
        <symbol id={`${uid}-s5`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s5-wa_a`} x1="9" x2="9" y1="6.88" y2="20.45" gradientUnits="userSpaceOnUse">
              <stop offset=".22" stopColor="#32d4f5" />
              <stop offset="1" stopColor="#198ab3" />
            </linearGradient>
            <linearGradient id={`${uid}-s5-wa_b`} x1="8.61" x2="9.6" y1="-.4" y2="11.92" gradientUnits="userSpaceOnUse">
              <stop offset=".22" stopColor="#32d4f5" />
              <stop offset="1" stopColor="#198ab3" />
            </linearGradient>
          </defs>
          <path fill={`url(#${uid}-s5-wa_a)`} d="M15.72 18a1.45 1.45 0 0 0 1.45-1.45.5.5 0 0 0 0-.17C16.59 11.81 14 8.09 9 8.09s-7.66 3.15-8.17 8.3A1.46 1.46 0 0 0 2.14 18z" />
          <path fill="#fff" d="M9 9.17a4.6 4.6 0 0 1-2.48-.73L9 14.86l2.44-6.38A4.53 4.53 0 0 1 9 9.17" opacity=".8" />
          <circle cx="9.01" cy="4.58" r="4.58" fill={`url(#${uid}-s5-wa_b)`} />
        </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" floodOpacity="0.4" />
          <feComposite in2="SourceAlpha" operator="in" result="base" />
          <feFlood floodColor="#919394" />
          <feComposite in2="a" operator="in" result="hi" />
          <feMerge>
            <feMergeNode in="base" />
            <feMergeNode in="hi" />
          </feMerge>
        </filter>
        <symbol id={`${uid}-s6`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s6-109_b`} x1="9" x2="9" y1="19.25" y2="-.46" gradientTransform="rotate(45 9.003 8.999)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#5e9624" />
              <stop offset=".55" stopColor="#6dad2a" />
              <stop offset="1" stopColor="#76bc2d" />
            </linearGradient>
            <linearGradient id={`${uid}-s6-109_a`} x1="7.54" x2="7.53" y1="6.44" y2="5.18" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#ccc" />
              <stop offset=".12" stopColor="#d7d7d7" />
              <stop offset=".42" stopColor="#ebebeb" />
              <stop offset=".72" stopColor="#f8f8f8" />
              <stop offset="1" stopColor="#fcfcfc" />
            </linearGradient>
            <linearGradient id={`${uid}-s6-109_c`} x1="9.36" x2="9.36" y1="7.69" y2="6.57" href={`#${uid}-s6-109_a`} />
          </defs>
          <rect width="12.35" height="12.35" x="2.82" y="2.82" fill={`url(#${uid}-s6-109_b)`} rx=".57" transform="rotate(-45 8.999 9.003)" />
          <g fill="#fff">
            <path d="M10.89 10.51h2.84a.11.11 0 0 0 .1-.11V7.57a.1.1 0 0 0-.18-.07l-.78.78v.05a.1.1 0 0 1-.14 0L9.26 4.91a.1.1 0 0 0-.14 0l-.88.88a.11.11 0 0 0 0 .15l3.41 3.41a.11.11 0 0 1 0 .15l-.05.05-.78.78a.11.11 0 0 0 .07.18" />
            <path d="M6.92 10.51H4.08A.11.11 0 0 1 4 10.4V7.57a.1.1 0 0 1 .17-.07l.79.78v.05a.1.1 0 0 0 .14 0l3.45-3.42a.1.1 0 0 1 .14 0l.88.88a.11.11 0 0 1 0 .15L6.16 9.35a.11.11 0 0 0 0 .15v.05l.78.78a.11.11 0 0 1-.02.18" />
            <path d="m6.82 13.07 2 2a.1.1 0 0 0 .14 0l2-2a.1.1 0 0 0-.07-.17H9.72a.11.11 0 0 1-.1-.1V8a.1.1 0 0 0-.1-.11H8.28a.11.11 0 0 0-.11.11v4.8a.1.1 0 0 1-.1.1H6.89a.1.1 0 0 0-.07.17" />
          </g>
          <path fill="#0078d4" d="M10.65 7.78A2.71 2.71 0 0 1 7.33 3.5a2.71 2.71 0 0 1 3.29 4.3" />
          <circle cx="7.53" cy="5.55" r=".87" fill={`url(#${uid}-s6-109_a)`} />
          <path fill="#f2f2f2" d="m6.67 7 .19.3.14.2a6 6 0 0 1 .34-1.1.85.85 0 0 1-.45-.23 7 7 0 0 0-.22.83m.57-2.27A4 4 0 0 1 7 3.8a2.5 2.5 0 0 0-.34.46 3.5 3.5 0 0 0 .2.74 1 1 0 0 1 .38-.27m.93 1.41a.87.87 0 0 1-.48.26 5 5 0 0 0 .46.41 4 4 0 0 0 .65.39v-.07a.53.53 0 0 1 .2-.4 3.6 3.6 0 0 1-.83-.59m2.62 1.06a4 4 0 0 1-.87-.1.55.55 0 0 1-.16.39 3.8 3.8 0 0 0 1.08.08 3 3 0 0 0 .37-.42Z" opacity=".55" />
          <circle cx="9.36" cy="7.13" r=".56" fill={`url(#${uid}-s6-109_c)`} />
          <circle cx="10.64" cy="5.74" r=".6" fill="#f2f2f2" />
          <path fill="#f2f2f2" d="M9.21 4.42A4.3 4.3 0 0 1 11.09 4a2.2 2.2 0 0 0-.47-.45 4.5 4.5 0 0 0-1.49.35c-.1 0-.19.11-.29.16a6 6 0 0 1-.63-.93l-.34.13a5.4 5.4 0 0 0 .65 1 4 4 0 0 0-.67.55.87.87 0 0 1 .43.35 3.3 3.3 0 0 1 .61-.48 9 9 0 0 0 1.17 1 .57.57 0 0 1 .2-.32 8.4 8.4 0 0 1-1.05-.94m2.34 1.67h-.18l-.1-.06a.6.6 0 0 1-.2.3l.12.07.11.06.28.14a4 4 0 0 0 .09-.35Z" opacity=".55" />
          <circle cx="7.53" cy="5.55" r=".87" fill="#f2f2f2" />
          <circle cx="9.36" cy="7.13" r=".56" fill="#f2f2f2" />
        </symbol>
        <symbol id={`${uid}-s7`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s7-qu_a`} x1="12.74" x2="12.74" y1="15.28" y2="8.52" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#0078d4" />
              <stop offset=".82" stopColor="#5ea0ef" />
            </linearGradient>
            <linearGradient id={`${uid}-s7-qu_b`} x1="12.74" x2="12.74" y1="17.89" y2="15.28" gradientUnits="userSpaceOnUse">
              <stop offset=".15" stopColor="#ccc" />
              <stop offset="1" stopColor="#707070" />
            </linearGradient>
          </defs>
          <rect width="10.11" height="6.75" x=".79" y=".89" fill="#005ba1" rx=".34" />
          <polygon fill="#50e6ff" points="7.53 3.28 7.53 5.25 5.85 6.23 5.85 4.27 7.53 3.28" />
          <polygon fill="#c3f1ff" points="7.53 3.28 5.85 4.27 4.16 3.28 5.85 2.29 7.53 3.28" />
          <polygon fill="#9cebff" points="5.85 4.27 5.85 6.23 4.16 5.25 4.16 3.28 5.85 4.27" />
          <rect width="10.11" height="6.75" x="4.76" y="4.76" fill="#0078d4" rx=".34" />
          <polygon fill="#50e6ff" points="11.5 7.16 11.5 9.12 9.82 10.11 9.82 8.14 11.5 7.16" />
          <polygon fill="#c3f1ff" points="11.5 7.16 9.82 8.14 8.13 7.16 9.82 6.17 11.5 7.16" />
          <polygon fill="#9cebff" points="9.82 8.14 9.82 10.11 8.13 9.12 8.13 7.16 9.82 8.14" />
          <rect width="10.11" height="6.75" x="7.68" y="8.52" fill={`url(#${uid}-s7-qu_a)`} rx=".34" />
          <polygon fill="#50e6ff" points="14.42 10.92 14.42 12.88 12.74 13.87 12.74 11.9 14.42 10.92" />
          <polygon fill="#c3f1ff" points="14.42 10.92 12.74 11.91 11.05 10.92 12.74 9.93 14.42 10.92" />
          <polygon fill="#9cebff" points="12.74 11.91 12.74 13.87 11.05 12.88 11.05 10.92 12.74 11.91" />
          <polygon fill="#c3f1ff" points="11.05 12.88 12.74 11.9 12.74 13.87 11.05 12.88" />
          <polygon fill="#9cebff" points="14.42 12.88 12.74 11.9 12.74 13.87 14.42 12.88" />
          <path fill={`url(#${uid}-s7-qu_b)`} d="M14.76 17.32c-1-.16-1-.88-1-2h-2c0 1.16 0 1.88-1 2a.59.59 0 0 0-.5.57h5a.59.59 0 0 0-.5-.57" />
        </symbol>
        <symbol id={`${uid}-s8`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s8-rb_a`} x1="8.637" x2="8.637" y1="-1.991" y2="16.739" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#5ea0ef" />
              <stop offset="1" stopColor="#0078d4" />
            </linearGradient>
            <linearGradient id={`${uid}-s8-rb_b`} x1="12.96" x2="12.96" y1="8.561" y2="6.141" gradientTransform="matrix(1 0 0 -1 0 20)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#333132" />
              <stop offset="1" stopColor="#5b5a5c" />
            </linearGradient>
          </defs>
          <path fill={`url(#${uid}-s8-rb_a)`} d="m7.43 8.178 2.589-1.573 7.255 2.731A3.66 3.66 0 0 0 16.23 7.49l-.01-.05A4.2 4.2 0 0 0 14 6.32a4.91 4.91 0 0 0-5.1-4.7 5.07 5.07 0 0 0-4.84 3.29A4.62 4.62 0 0 0 0 9.39a4.73 4.73 0 0 0 4.89 4.54h2.54Z" />
          <polygon fill="#767676" points="10.07 7.159 10.08 11.439 17.99 13.119 17.99 10.139 10.07 7.159" />
          <polyline fill="#999" points="10.07 7.159 7.93 8.459 7.93 12.439 10.08 11.439" />
          <polygon fill="#a3a3a3" points="13.68 11.499 14.4 11.699 14.4 9.369 13.68 9.119 13.68 11.499" />
          <polygon fill="#a3a3a3" points="12.96 8.889 12.24 8.629 12.24 11.119 12.96 11.319 12.96 8.889" />
          <polygon fill="#a3a3a3" points="15.12 11.889 15.82 12.079 15.84 9.859 15.12 9.619 15.12 11.889" />
          <polygon fill="#a3a3a3" points="10.81 10.749 11.53 10.929 11.53 8.399 10.81 8.159 10.81 10.749" />
          <polygon fill="#a3a3a3" points="17.27 10.349 16.55 10.099 16.55 12.269 17.27 12.469 17.27 10.349" />
          <path fill="#b3b3b3" d="m8.66 11.369-.36.21v-2.83l.36-.19Zm.71-3.22-.37.24v2.75l.37-.2Z" />
          <polygon fill={`url(#${uid}-s8-rb_b)`} points="17.99 13.119 15.83 13.859 7.93 12.439 10.08 11.439 17.99 13.119" />
          <polygon fill="#767676" points="17.99 16.169 10.04 17.679 10.08 12.089 17.99 13.559 17.99 16.169" />
          <polygon fill="#a3a3a3" points="10.81 16.759 10.81 13.209 11.53 13.299 11.53 16.639 10.81 16.759" />
          <polygon fill="#a3a3a3" points="12.96 16.399 12.24 16.529 12.24 13.389 12.96 13.499 12.96 16.399 12.96 16.399" />
          <polygon fill="#a3a3a3" points="13.68 16.289 13.68 13.569 14.4 13.659 14.4 16.159 13.68 16.289" />
          <polygon fill="#a3a3a3" points="15.83 15.909 15.12 16.039 15.12 13.749 15.83 13.859 15.83 15.909" />
          <polygon fill="#a3a3a3" points="17.29 15.679 16.55 15.809 16.55 13.929 17.24 14.019 17.29 15.679" />
          <path fill="#999" d="M7.93 16.4v-3.26l2.16-1v5.6Z" />
          <path fill="#b3b3b3" d="m8.61 16.389-.32-.16v-2.76l.32-.15Zm.77-3.45-.38.19v3.48l.37.19v-3.86Z" />
        </symbol>
        <symbol id={`${uid}-s9`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s9-w7_a`} x1="13.18" x2="8.63" y1="13.01" y2="4.38" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#1988d9" />
              <stop offset=".9" stopColor="#54aef0" />
            </linearGradient>
            <linearGradient id={`${uid}-s9-w7_b`} x1="11.22" x2="14.37" y1="10.5" y2="15.93" gradientUnits="userSpaceOnUse">
              <stop offset=".1" stopColor="#54aef0" />
              <stop offset=".29" stopColor="#4fabee" />
              <stop offset=".51" stopColor="#41a2e9" />
              <stop offset=".74" stopColor="#2a93e0" />
              <stop offset=".88" stopColor="#1988d9" />
            </linearGradient>
          </defs>
          <polygon fill="#50e6ff" points="1.15 10.22 8.93 15.27 16.85 10.21 17.85 11.36 8.93 17.11 0.15 11.37 1.15 10.22" />
          <polygon fill="#fff" points="1.73 9.58 8.93 1 16.28 9.59 8.93 14.23 1.73 9.58" />
          <polygon fill="#50e6ff" points="8.93 1 8.93 14.23 1.73 9.58 8.93 1" />
          <polygon fill={`url(#${uid}-s9-w7_a)`} points="8.93 1 8.93 14.23 16.28 9.59 8.93 1" />
          <polygon fill="#53b1e0" points="8.93 7.83 16.28 9.59 8.93 14.23 8.93 7.83" />
          <polygon fill="#9cebff" points="8.93 14.23 1.73 9.58 8.93 7.83 8.93 14.23" />
          <polygon fill={`url(#${uid}-s9-w7_b)`} points="8.93 17.11 17.85 11.36 16.85 10.21 8.93 15.27 8.93 17.11" />
          <path fill="#ffca00" d="M16.32 11.88a1.16 1.16 0 0 0 0-1.65l-2-2a1.16 1.16 0 0 0-1.64 0l-2 2a1.18 1.18 0 0 0 0 1.65l1.67 1.67a.32.32 0 0 1 .09.23v3.1a.36.36 0 0 0 .12.28l.76.76a.25.25 0 0 0 .37 0l.73-.73.44-.44a.15.15 0 0 0 0-.21l-.31-.31a.16.16 0 0 1 0-.24l.31-.31a.16.16 0 0 0 0-.22l-.31-.31a.15.15 0 0 1 0-.23l.31-.32a.15.15 0 0 0 0-.21l-.44-.44v-.16ZM13.5 8.71a.66.66 0 1 1-.66.66.66.66 0 0 1 .66-.66" />
          <path fill="#ff9300" d="M13 17a.14.14 0 0 0 .24-.11v-2.56a.16.16 0 0 0-.06-.13.14.14 0 0 0-.22.13v2.51A.15.15 0 0 0 13 17" opacity=".75" />
          <rect width="3.29" height=".39" x="11.9" y="10.9" fill="#ff9300" opacity=".75" rx=".18" />
          <rect width="3.29" height=".39" x="11.9" y="11.53" fill="#ff9300" opacity=".75" rx=".18" />
        </symbol>
        <symbol id={`${uid}-s10`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <radialGradient id={`${uid}-s10-10x_a`} cx="9" cy="9" r="8.5" gradientUnits="userSpaceOnUse">
              <stop offset=".18" stopColor="#5ea0ef" />
              <stop offset=".56" stopColor="#5c9fee" />
              <stop offset=".69" stopColor="#559ced" />
              <stop offset=".78" stopColor="#4a97e9" />
              <stop offset=".86" stopColor="#3990e4" />
              <stop offset=".93" stopColor="#2387de" />
              <stop offset=".99" stopColor="#087bd6" />
              <stop offset="1" stopColor="#0078d4" />
            </radialGradient>
            <radialGradient id={`${uid}-s10-10x_b`} cx="38.95" cy="182.07" r="9.88" gradientTransform="matrix(.94 0 0 .94 -28.71 -163.24)" gradientUnits="userSpaceOnUse">
              <stop offset=".27" stopColor="#ffd70f" />
              <stop offset=".49" stopColor="#ffcb12" />
              <stop offset=".88" stopColor="#feac19" />
              <stop offset="1" stopColor="#fea11b" />
            </radialGradient>
          </defs>
          <path fill={`url(#${uid}-s10-10x_a)`} d="M9 .5A8.5 8.5 0 1 0 17.5 9 8.51 8.51 0 0 0 9 .5m0 15.84A7.34 7.34 0 1 1 16.34 9 7.34 7.34 0 0 1 9 16.34" />
          <circle cx="9" cy="9" r="7.34" fill="#fff" />
          <path fill={`url(#${uid}-s10-10x_b)`} d="M13.44 7.33a1.84 1.84 0 0 0 0-2.59l-3.15-3.16a1.83 1.83 0 0 0-2.58 0L4.56 4.74a1.84 1.84 0 0 0 0 2.59L7.18 10a.5.5 0 0 1 .15.36v4.88a.63.63 0 0 0 .18.44l1.2 1.2a.41.41 0 0 0 .58 0l1.16-1.16.68-.68a.25.25 0 0 0 0-.34l-.49-.49a.27.27 0 0 1 0-.37l.49-.49a.25.25 0 0 0 0-.34l-.49-.49a.27.27 0 0 1 0-.37l.49-.49a.25.25 0 0 0 0-.34l-.68-.69v-.25ZM9 2.35a1 1 0 0 1 0 2.07 1 1 0 1 1 0-2.07" />
          <path fill="#ff9300" d="M8.18 15.3a.23.23 0 0 0 .38-.17v-4a.24.24 0 0 0-.11-.2.22.22 0 0 0-.34.2v4a.28.28 0 0 0 .07.17" opacity=".75" />
          <rect width="5.17" height=".61" x="6.48" y="5.79" fill="#ff9300" opacity=".75" rx=".28" />
          <rect width="5.17" height=".61" x="6.48" y="6.78" fill="#ff9300" opacity=".75" rx=".28" />
        </symbol>
        <symbol id={`${uid}-s11`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s11-p5_a`} x1="5.23" x2="5.23" y1="17.45" y2="8.09" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#1988d9" />
              <stop offset=".9" stopColor="#54aef0" />
            </linearGradient>
            <linearGradient id={`${uid}-s11-p5_b`} x1="11.5" x2="11.5" y1="12.45" y2=".55" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#198ab3" />
              <stop offset=".01" stopColor="#198bb4" />
              <stop offset=".44" stopColor="#27b2d7" />
              <stop offset=".79" stopColor="#2fcbed" />
              <stop offset="1" stopColor="#32d4f5" />
            </linearGradient>
          </defs>
          <path fill={`url(#${uid}-s11-p5_a)`} d="M5.59 13.13h4.32v4.32H5.59Zm-4.44 4.32h3.72v-4.32H.55v3.72a.6.6 0 0 0 .6.6m-.6-5h4.32V8.09H.55Z" />
          <path fill={`url(#${uid}-s11-p5_b)`} fillRule="evenodd" d="M11.5.55a5.89 5.89 0 0 1 5.95 6 5.89 5.89 0 0 1-5.95 5.95H5.55v-6A5.89 5.89 0 0 1 11.5.55" />
          <rect width="1.36" height="4.08" x="7.59" y="5.65" fill="#fff" />
          <rect width="1.36" height="2.72" x="10.31" y="7.01" fill="#fff" />
          <rect width="1.36" height="5.44" x="13.03" y="4.29" fill="#fff" />
        </symbol>
      </defs>
      <rect width="837" height="1468" fill={`url(#${uid}-bg)`} />
      <rect width="837" height="1468" fill={`url(#${uid}-grid)`} />
      <rect width="837" height="1468" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          AKS APPLICATION PLATFORM ON AZURE
        </tspan>
      </text>
      <text fontSize="11.5" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65.25">
          Application Gateway in front of AKS, with secrets read through workload identity and logs in Log Analytics
        </tspan>
      </text>
      <g id={`${uid}-g-sub`}>
        <rect x="28" y="336" width="781" height="1039" rx="2" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="28" y="336" width="781" height="1039" rx="2" 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.0591;0.0895;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-rg`}>
        <rect x="48" y="388" width="741" height="967" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" strokeDasharray="3 3" />
        <g opacity="0">
          <rect x="48" y="388" width="741" height="967" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" strokeDasharray="3 3" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0591;0.0895;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-vnet`}>
        <rect x="68" y="440" width="512" height="643" rx="2" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="68" y="440" width="512" height="643" rx="2" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0591;0.0895;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-snet-agw`}>
        <rect x="295" y="492" width="260" height="160" rx="2" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="295" y="492" width="260" height="160" rx="2" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0591;0.0895;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-snet-aks`}>
        <rect x="88" y="816" width="472" height="247" rx="2" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="88" y="816" width="472" height="247" rx="2" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0591;0.0895;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-system-pool`}>
        <rect x="108" y="868" width="164" height="175" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" strokeDasharray="3 3" />
        <g opacity="0">
          <rect x="108" y="868" width="164" height="175" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" strokeDasharray="3 3" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0591;0.0895;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-user-pool`}>
        <rect x="312" y="868" width="228" height="175" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" strokeDasharray="3 3" />
        <g opacity="0">
          <rect x="312" y="868" width="228" height="175" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" strokeDasharray="3 3" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0591;0.0895;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-cluster`}>
        <rect x="96" y="854" width="456" height="201" rx="2" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="96" y="854" width="456" height="201" rx="2" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0591;0.0895;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M426 167 L426 543.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M422 538 L426 544 L430 538" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M426 167 L426 543.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.211;0.3798;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.924s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.211;0.2414;0.9;0.9304;1" dur="5.924s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M422 538 L426 544 L430 538" 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.3798;0.4102;0.9;0.9304;1" dur="5.924s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M425.5 632 L425.5 919.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M421.5 914 L425.5 920 L429.5 914" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M425.5 632 L425.5 919.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.4203;0.5723;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.924s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4203;0.4507;0.9;0.9304;1" dur="5.924s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M421.5 914 L425.5 920 L429.5 914" 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.5723;0.6026;0.9;0.9304;1" dur="5.924s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M435 1023 L435 1195 Q435 1203 443 1203 L451 1203 Q459 1203 459 1211 L459 1255" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M455 1249.5 L459 1255.5 L463 1249.5" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M435 1023 L435 1195 Q435 1203 443 1203 L451 1203 Q459 1203 459 1211 L459 1255" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.6128;0.7481;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.924s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6128;0.6432;0.9;0.9304;1" dur="5.924s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M455 1249.5 L459 1255.5 L463 1249.5" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7481;0.7785;0.9;0.9304;1" dur="5.924s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M453 1023 L453 1110 Q453 1118 461 1118 L602 1118 Q610 1118 610 1126 L610 1246.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M606 1241 L610 1247 L614 1241" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M417 1023 L417 1120 Q417 1128 409 1128 L337 1128 Q329 1128 329 1136 L329 1246.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M325 1241 L329 1247 L333 1241" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M190 1023 L190 1246.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1 2.5" />
        <path d="M186 1241 L190 1247 L194 1241" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M399 1023 L399 1110 Q399 1118 391 1118 L231 1118 Q223 1118 223 1126 L223 1246.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1 2.5" />
        <path d="M219 1241 L223 1247 L227 1241" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-el-e1`}>
        <rect x="431" y="231" width="51" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#979899" textAnchor="middle">
          <tspan x="456.77" y="244.7">
            HTTPS
          </tspan>
        </text>
        <g opacity="0">
          <rect x="431" y="231" width="51" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#60a5fa" textAnchor="middle">
            <tspan x="456.77" y="244.7">
              HTTPS
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.211;0.2414;0.9;0.9304;1" dur="5.924s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e2`}>
        <rect x="431" y="721" width="141" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#979899" textAnchor="middle">
          <tspan x="501.77" y="734.7">
            HTTP TO POD IPS (AGIC)
          </tspan>
        </text>
        <g opacity="0">
          <rect x="431" y="721" width="141" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#60a5fa" textAnchor="middle">
            <tspan x="501.77" y="734.7">
              HTTP TO POD IPS (AGIC)
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4203;0.4507;0.9;0.9304;1" dur="5.924s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e3`}>
        <rect x="440" y="1162" width="74" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#979899" textAnchor="middle">
          <tspan x="477.27" y="1175.7">
            PULL IMAGES
          </tspan>
        </text>
        <g opacity="0">
          <rect x="440" y="1162" width="74" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#60a5fa" textAnchor="middle">
            <tspan x="477.27" y="1175.7">
              PULL IMAGES
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6128;0.6432;0.9;0.9304;1" dur="5.924s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e4`}>
        <rect x="615" y="1162" width="154" 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="692.26" y="1175.61">
            TOKEN EXCHANGE (ENTRA ID)
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e5`}>
        <rect x="334" y="1162" width="80" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#979899" textAnchor="middle">
          <tspan x="374.27" y="1175.7">
            READ SECRETS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-sub`}>
        <use href={`#${uid}-s1`} x="41.3" y="346.3" width="17.4" height="17.4" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <use href={`#${uid}-s1`} x="41.3" y="346.3" width="17.4" height="17.4" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0591;0.0895;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="68" y="358.35">
            PLATFORM SUBSCRIPTION
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-rg`}>
        <use href={`#${uid}-s2`} x="61.3" y="398.3" width="17.4" height="17.4" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <use href={`#${uid}-s2`} x="61.3" y="398.3" width="17.4" height="17.4" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0591;0.0895;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="88" y="410.35">
            RG-AKS-PROD
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-vnet`}>
        <use href={`#${uid}-s3`} x="81.3" y="450.3" width="17.4" height="17.4" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <use href={`#${uid}-s3`} x="81.3" y="450.3" width="17.4" height="17.4" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0591;0.0895;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="108" y="462.35">
            VNET-AKS-PROD 10.30.0.0/16
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-snet-agw`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="307" y="514.36">
            SNET-APPGATEWAY
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-snet-aks`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="100" y="838.36">
            SNET-AKS-NODES
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-system-pool`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="120" y="890.36">
            SYSTEM NODE POOL
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-user-pool`}>
        <rect x="320" y="877" width="114.7" height="18.9" rx="3" fill="#0b1012" />
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="324" y="890.36">
            USER NODE POOL
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-cluster`}>
        <use href={`#${uid}-s4`} x="107.04" y="847.04" width="13.92" height="13.92" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <use href={`#${uid}-s4`} x="107.04" y="847.04" width="13.92" height="13.92" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0591;0.0895;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="127" y="857.91">
            AKS CLUSTER AKS-PROD
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-users`}>
        <rect x="402" y="96" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="402" y="96" 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.1182;0.1485;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="411.12" y="105.12" width="29.76" height="29.76" filter={`url(#${uid}-f3)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="426.43" y="162.27">
            USERS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-agw`}>
        <rect x="401" y="544" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="401" y="544" 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.1182;0.1485;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="410.12" y="553.12" width="29.76" height="29.76" filter={`url(#${uid}-f3)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="425.43" y="610.27">
            APPLICATION GATEWAY
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="425" y="627.7">
            WAF v2 with AGIC
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-system`}>
        <rect x="166" y="920" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="166" y="920" 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.1182;0.1485;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="176.08" y="930.08" width="27.84" height="27.84" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="190.43" y="986.27">
            SYSTEM NODES
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="190" y="1003.7">
            VM Scale Sets,
          </tspan>
          <tspan x="190" y="1018.7">
            CoreDNS and add-ons
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-apps`}>
        <rect x="402" y="920" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="402" y="920" 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.1182;0.1485;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="412.08" y="930.08" width="27.84" height="27.84" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="426.43" y="986.27">
            USER NODES
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="426" y="1003.7">
            VM Scale Sets,
          </tspan>
          <tspan x="426" y="1018.7">
            application pods
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-acr`}>
        <rect x="435" y="1255.5" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="435" y="1255.5" 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.1182;0.1485;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="445.08" y="1265.58" width="27.84" height="27.84" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="459.42" y="1321.68">
            CONTAINER REGISTRY
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-identity`}>
        <rect x="585.5" y="1247" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="585.5" y="1247" 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.1182;0.1485;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="594.62" y="1256.12" width="29.76" height="29.76" filter={`url(#${uid}-f3)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="609.93" y="1313.27">
            MANAGED IDENTITY
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="609.5" y="1330.7">
            Workload identity
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-kv`}>
        <rect x="305" y="1247" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="305" y="1247" 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.1182;0.1485;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s10`} x="314.12" y="1256.12" width="29.76" height="29.76" filter={`url(#${uid}-f3)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="329.43" y="1313.27">
            KEY VAULT
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="329" y="1330.7">
            App secrets
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-logs`}>
        <rect x="182.5" y="1247" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="182.5" y="1247" 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.1182;0.1485;0.9096;0.94;1" dur="5.924s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s11`} x="191.62" y="1256.12" width="29.76" height="29.76" filter={`url(#${uid}-f3)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="206.94" y="1313.27">
            LOG ANALYTICS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="206.51" y="1330.7">
            Container insights
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <path d="M426 167 L426 543.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.07 2" strokeDashoffset="0.07" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.07;0.07;-0.93;-1;-1" keyTimes="0;0.211;0.3798;0.3915;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.924s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.211;0.2127;0.3915;0.3932;1" dur="5.924s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M426 167 L426 543.5" dur="5.924s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.211;0.3798;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.1857;0.211;0.4203;0.4456;1" dur="5.924s" repeatCount="indefinite" />
        </circle>
        <path d="M425.5 632 L425.5 919.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.09 2" strokeDashoffset="0.09" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.09;0.09;-0.91;-1;-1" keyTimes="0;0.4203;0.5723;0.586;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.924s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4203;0.422;0.586;0.5877;1" dur="5.924s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M425.5 632 L425.5 919.5" dur="5.924s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4203;0.5723;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.395;0.4203;0.6128;0.6381;1" dur="5.924s" repeatCount="indefinite" />
        </circle>
        <path d="M435 1023 L435 1195 Q435 1203 443 1203 L451 1203 Q459 1203 459 1211 L459 1255" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" 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.6128;0.7481;0.7618;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.924s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6128;0.6145;0.7618;0.7635;1" dur="5.924s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M435 1023 L435 1195 Q435 1203 443 1203 L451 1203 Q459 1203 459 1211 L459 1255" dur="5.924s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6128;0.7481;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.5874;0.6128;0.7481;0.7734;1" dur="5.924s" repeatCount="indefinite" />
        </circle>
        <circle r="2" fill="#60a5fa" opacity="0">
          <animateMotion path="M453 1023 L453 1110 Q453 1118 461 1118 L602 1118 Q610 1118 610 1126 L610 1246.5" dur="5.924s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4527;0.6215;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.4274;0.4527;0.6215;0.6468;1" dur="5.924s" repeatCount="indefinite" />
        </circle>
        <circle r="2" fill="#60a5fa" opacity="0">
          <animateMotion path="M417 1023 L417 1120 Q417 1128 409 1128 L337 1128 Q329 1128 329 1136 L329 1246.5" dur="5.924s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6138;0.7784;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.5885;0.6138;0.7784;0.8037;1" dur="5.924s" repeatCount="indefinite" />
        </circle>
      </g>
      <g id={`${uid}-legend`}>
        <rect x="637" y="1387" width="172" height="53" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <path d="M647 1404.5 H675" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#9d9fa0">
          <tspan x="683" y="1407.78">
            REQUESTS AND ACCESS
          </tspan>
        </text>
        <path d="M647 1422.5 H675" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeDasharray="1 2.5" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="683" y="1425.87">
            LOGS AND METRICS
          </tspan>
        </text>
      </g>
    </svg>
  );
}