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

export default function HubSpokeNetworkOnAzure(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="994" height="2184" viewBox="0 0 994 2184" 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`}>
        Hub-spoke network on Azure
      </title>
      <desc id={`${uid}-sdw-desc`}>
        Hub-spoke network on Azure. 13 components in 11 groups. Connections: Corporate servers to Edge router; Edge router to ExpressRoute circuit (private peering); ExpressRoute circuit to ExpressRoute gateway; Edge router to VPN gateway (IPsec tunnel); ExpressRoute gateway to Azure Firewall; VPN gateway to Azure Firewall; Azure Firewall to vnet-spoke-app 10.1.0.0/16 (via peering); Azure Firewall to vnet-spoke-data 10.2.0.0/16 (via peering); Azure Bastion to Virtual machines (RDP and SSH); Azure Firewall to Log Analytics (diagnostics); Virtual machines to Private endpoint; Private endpoint to Azure SQL Database; Virtual machines to Private DNS zone (name lookup).
      </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="22.59" height="22.59" patternUnits="userSpaceOnUse">
          <path d="M0 0.56H22.59M0.56 0V22.59" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1.13" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="265" cy="746" r="967.34">
          <stop offset="0" stopColor="#60a5fa" stopOpacity="0.12" />
          <stop offset="1" stopColor="#60a5fa" stopOpacity="0" />
        </radialGradient>
        <symbol id={`${uid}-s1`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 21h18M9 8h1m-1 4h1m-1 4h1m4-8h1m-1 4h1m-1 4h1M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16" />
        </symbol>
        <symbol id={`${uid}-s2`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#60a5fa" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 21h18M9 8h1m-1 4h1m-1 4h1m4-8h1m-1 4h1m-1 4h1M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16" />
        </symbol>
        <symbol id={`${uid}-s3`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <radialGradient id={`${uid}-s3-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}-s3-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}-s4`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s4-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}-s4-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}-s4-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}-s4-zw_a)`} />
          <circle cx="9.04" cy="9" r="1.16" fill={`url(#${uid}-s4-zw_b)`} />
          <circle cx="5.34" cy="9" r="1.16" fill={`url(#${uid}-s4-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}-s5`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.41" d="M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm0 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm4-7v.01M7 16v.01M11 8h6m-6 8h6" />
        </symbol>
        <symbol id={`${uid}-s6`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.41" d="M3 15a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm14 2v.01M13 17v.01M15 13v-2m-3.25-2.25a4 4 0 0 1 6.5 0M8.5 6.5a8 8 0 0 1 13 0" />
        </symbol>
        <symbol id={`${uid}-s7`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s7-10b_a`} x1="5.33" x2="8.74" y1="2.81" y2="6.22" gradientTransform="rotate(-.08 -980.175 -1454.565)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#86d633" />
              <stop offset="1" stopColor="#5e9624" />
            </linearGradient>
            <linearGradient id={`${uid}-s7-10b_b`} x1="11.84" x2="15.24" y1="14.54" y2="17.95" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#86d633" />
              <stop offset="1" stopColor="#5e9624" />
            </linearGradient>
            <linearGradient id={`${uid}-s7-10b_c`} x1="-1.34" x2="2.06" y1="14.53" y2="17.93" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#86d633" />
              <stop offset="1" stopColor="#5e9624" />
            </linearGradient>
          </defs>
          <rect width="1.98" height="9.5" x="4.74" y="4.21" fill="#a67af4" transform="rotate(30 5.723 8.967)" />
          <rect width="1.98" height="9.5" x="11.21" y="4.37" fill="#a67af4" transform="rotate(-30 12.2 9.109)" />
          <rect width="1.98" height="9.5" x="7.9" y="9.97" fill="#773adc" transform="rotate(90 8.895 14.715)" />
          <circle cx="9.07" cy="3.14" r="2.41" fill={`url(#${uid}-s7-10b_a)`} />
          <circle cx="15.59" cy="14.86" r="2.41" fill={`url(#${uid}-s7-10b_b)`} />
          <circle cx="2.41" cy="14.86" r="2.41" fill={`url(#${uid}-s7-10b_c)`} />
        </symbol>
        <symbol id={`${uid}-s8`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s8-zy_a`} x1="8.59" x2="9.12" y1="-7.79" y2="20.05" gradientUnits="userSpaceOnUse">
              <stop offset=".22" stopColor="#32d4f5" />
              <stop offset=".47" stopColor="#31d1f3" />
              <stop offset=".63" stopColor="#2ec9eb" />
              <stop offset=".77" stopColor="#29bade" />
              <stop offset=".89" stopColor="#22a5cb" />
              <stop offset="1" stopColor="#198ab3" />
              <stop offset="1" stopColor="#198ab3" />
            </linearGradient>
          </defs>
          <path fill={`url(#${uid}-s8-zy_a)`} d="M15.06 8.67h-1V5.59a5.8 5.8 0 0 0-1.49-3.92A4.79 4.79 0 0 0 8.91 0a4.79 4.79 0 0 0-3.7 1.67 5.73 5.73 0 0 0-1.49 3.92v3.08h-.81a.7.7 0 0 0-.69.69v8a.7.7 0 0 0 .69.69h12.15a.71.71 0 0 0 .7-.69v-8a.71.71 0 0 0-.7-.69m-3.37 0H6.13V5.54A3.18 3.18 0 0 1 7 3.39a2.5 2.5 0 0 1 1.88-.86 2.54 2.54 0 0 1 1.89.86 3 3 0 0 1 .32.43 3 3 0 0 1 .61 1.71Z" />
          <path fill="#50e6ff" d="M15.09 8.67H2.92a.66.66 0 0 0-.44.17l13.05 9a.67.67 0 0 0 .25-.52v-8a.71.71 0 0 0-.69-.65" />
          <path fill="#fff" d="M2.94 8.67H15.1a.7.7 0 0 1 .45.17l-13.06 9a.7.7 0 0 1-.25-.52v-8a.72.72 0 0 1 .7-.65" opacity=".2" />
          <path fill="#fff" d="M7.8 10.6 9 9.4a.07.07 0 0 1 .09 0l1.19 1.2a.06.06 0 0 1 0 .1h-.7a.06.06 0 0 0-.06.06v1.54a.06.06 0 0 1-.06.06h-.79a.05.05 0 0 1-.06-.06v-1.54a.07.07 0 0 0-.07-.06h-.7a.06.06 0 0 1-.04-.1m2.47 5.48-1.19 1.19a.06.06 0 0 1-.09 0L7.8 16.08a.06.06 0 0 1 0-.1h.7a.07.07 0 0 0 .07-.06v-1.55a.06.06 0 0 1 .06-.06h.74a.06.06 0 0 1 .06.06v1.55a.06.06 0 0 0 .06.06h.7a.06.06 0 0 1 .08.1m-4.7-1.55v-.7a.06.06 0 0 0-.06-.06H4a.06.06 0 0 1-.06-.06V13a.06.06 0 0 1 .06-.09h1.51a.06.06 0 0 0 .06-.06v-.7a.07.07 0 0 1 .11-.05l1.19 1.2a.06.06 0 0 1 0 .08l-1.19 1.2a.07.07 0 0 1-.11-.05m6.93-2.38v.7a.06.06 0 0 0 .06.06h1.54s.07 0 .07.06v.74a.07.07 0 0 1-.07.06h-1.54a.06.06 0 0 0-.06.06v.7a.06.06 0 0 1-.1.05l-1.19-1.2v-.08l1.19-1.2s.1-.01.1.05" />
        </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}-s9`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s9-10f_a`} x1="9" x2="9" y1="14.14" y2="1.38" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#0078d4" />
              <stop offset=".82" stopColor="#5ea0ef" />
            </linearGradient>
          </defs>
          <path fill={`url(#${uid}-s9-10f_a)`} d="M18 10.14a4.06 4.06 0 0 0-3.51-3.89 5.1 5.1 0 0 0-5.25-4.87 5.23 5.23 0 0 0-5 3.41A4.82 4.82 0 0 0 0 9.43a4.9 4.9 0 0 0 5.07 4.71h8.65a1.5 1.5 0 0 0 .22 0 4.1 4.1 0 0 0 4.06-4" />
          <path fill="#821010" d="M14.29 11.19a.42.42 0 0 0-.42-.41H4.13a.42.42 0 0 0-.42.41v5a.42.42 0 0 0 .42.41h9.74a.42.42 0 0 0 .42-.41z" />
          <rect width="2.87" height="1.27" x="4.3" y="11.36" fill="#e62323" />
          <rect width="2.87" height="1.27" x="7.6" y="11.36" fill="#ff7381" />
          <rect width="2.87" height="1.27" x="10.9" y="11.36" fill="#e62323" />
          <rect width="1.19" height="1.27" x="4.3" y="13.06" fill="#e62323" />
          <rect width="1.19" height="1.27" x="12.58" y="13.06" fill="#ff7381" />
          <rect width="2.87" height="1.27" x="5.92" y="13.06" fill="#ff7381" />
          <rect width="2.87" height="1.27" x="9.23" y="13.06" fill="#e62323" />
          <rect width="2.87" height="1.27" x="4.3" y="14.76" fill="#e62323" />
          <rect width="2.87" height="1.27" x="7.6" y="14.76" fill="#ff7381" />
          <rect width="2.87" height="1.27" x="10.9" y="14.76" fill="#e62323" />
        </symbol>
        <symbol id={`${uid}-s10`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s10-ze_a`} x1="12.896" x2="12.896" y1="-.54" y2="6.922" gradientTransform="rotate(-44.919 12.821 3.813)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#5ea0ef" />
              <stop offset="1" stopColor="#0078d4" />
            </linearGradient>
            <linearGradient id={`${uid}-s10-ze_b`} x1="5.104" x2="5.104" y1="5.035" y2="12.497" gradientTransform="rotate(224.919 5.179 8.795)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#5ea0ef" />
              <stop offset="1" stopColor="#0078d4" />
            </linearGradient>
          </defs>
          <path fill="#83b9f9" d="m16.637 12.107-.802.805a.363.363 0 0 1-.513 0L9.387 6.994a.727.727 0 0 1-.002-1.028l.802-.805 6.45 6.432a.363.363 0 0 1 0 .514" />
          <path fill={`url(#${uid}-s10-ze_a)`} d="M12.253-.856h1.136a.363.363 0 0 1 .363.363v8.976h-1.136a.727.727 0 0 1-.727-.727V-.492a.363.363 0 0 1 .363-.363Z" transform="rotate(44.919 12.821 3.813)" />
          <path fill="#83b9f9" d="m7.813 10.143.802.805a.727.727 0 0 1-.002 1.028l-5.935 5.918a.363.363 0 0 1-.513 0l-.803-.805a.363.363 0 0 1 0-.514z" />
          <path fill={`url(#${uid}-s10-ze_b)`} d="M4.974 4.126H6.11V13.1a.363.363 0 0 1-.363.363H4.611a.363.363 0 0 1-.363-.363V4.852a.727.727 0 0 1 .727-.727Z" transform="rotate(135.081 5.179 8.795)" />
        </symbol>
        <symbol id={`${uid}-s11`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s11-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}-s11-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}-s11-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}-s11-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}-s11-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}-s11-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}-s11-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}-s11-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}-s11-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}-s11-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}-s11-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}-s11-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}-s11-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}-s11-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}-s12`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s12-qi_a`} x1="8.88" x2="8.88" y1="12.21" y2=".21" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#0078d4" />
              <stop offset=".82" stopColor="#5ea0ef" />
            </linearGradient>
            <linearGradient id={`${uid}-s12-qi_b`} x1="8.88" x2="8.88" y1="16.84" y2="12.21" gradientUnits="userSpaceOnUse">
              <stop offset=".15" stopColor="#ccc" />
              <stop offset="1" stopColor="#707070" />
            </linearGradient>
          </defs>
          <rect width="18" height="12" x="-.12" y=".21" fill={`url(#${uid}-s12-qi_a)`} rx=".6" />
          <polygon fill="#50e6ff" points="11.88 4.46 11.88 7.95 8.88 9.71 8.88 6.21 11.88 4.46" />
          <polygon fill="#c3f1ff" points="11.88 4.46 8.88 6.22 5.88 4.46 8.88 2.71 11.88 4.46" />
          <polygon fill="#9cebff" points="8.88 6.22 8.88 9.71 5.88 7.95 5.88 4.46 8.88 6.22" />
          <polygon fill="#c3f1ff" points="5.88 7.95 8.88 6.21 8.88 9.71 5.88 7.95" />
          <polygon fill="#9cebff" points="11.88 7.95 8.88 6.21 8.88 9.71 11.88 7.95" />
          <path fill={`url(#${uid}-s12-qi_b)`} d="M12.49 15.84c-1.78-.28-1.85-1.56-1.85-3.63H7.11c0 2.07-.06 3.35-1.84 3.63a1 1 0 0 0-.89 1h9a1 1 0 0 0-.89-1" />
        </symbol>
        <symbol id={`${uid}-s13`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s13-130_a`} x1="9.084" x2="9.084" y1="790.967" y2="787.492" gradientTransform="matrix(1 0 0 -1 0 791.516)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#50e6ff" />
              <stop offset="1" stopColor="#32bedd" />
            </linearGradient>
            <linearGradient id={`${uid}-s13-130_b`} x1="9.065" x2="9.065" y1="13.843" y2="10.368" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#5e9624" />
              <stop offset=".183" stopColor="#629c25" />
              <stop offset=".435" stopColor="#6dae2a" />
              <stop offset=".726" stopColor="#7fcb30" />
              <stop offset=".822" stopColor="#86d633" />
            </linearGradient>
          </defs>
          <path fill="#b3b3b3" d="M7.85 13.342a1.738 1.738 0 1 0 2.436-2.479 1.7 1.7 0 0 0-.626-.389V3.009H8.548v7.444a1.73 1.73 0 0 0-.7 2.891Z" />
          <circle cx="9.084" cy="2.209" r="1.738" fill={`url(#${uid}-s13-130_a)`} />
          <path fill="#50e6ff" d="m6.195 16.778-.662.663a.3.3 0 0 1-.424 0L.216 12.564a.6.6 0 0 1 0-.848l.66-.664 5.318 5.302a.3.3 0 0 1 0 .425" />
          <path fill="#1490df" d="m5.435 6.886.664.662a.3.3 0 0 1 0 .424l-5.225 5.24-.664-.663a.6.6 0 0 1-.001-.848L5.01 6.886a.3.3 0 0 1 .425 0" />
          <path fill="#50e6ff" d="m17.122 11.052.661.664a.6.6 0 0 1 0 .848l-4.893 4.879a.3.3 0 0 1-.424-.001l-.662-.664a.3.3 0 0 1 0-.424z" />
          <path fill="#1490df" d="m17.788 12.547-.663.662-5.225-5.24a.3.3 0 0 1 0-.424l.664-.662a.3.3 0 0 1 .424 0L17.79 11.7a.6.6 0 0 1-.002.848" />
          <circle cx="9.065" cy="12.106" r="1.738" fill={`url(#${uid}-s13-130_b)`} />
        </symbol>
        <symbol id={`${uid}-s14`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <radialGradient id={`${uid}-s14-rr_b`} cx="9.36" cy="10.57" r="7.07" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#f2f2f2" />
              <stop offset=".58" stopColor="#eee" />
              <stop offset="1" stopColor="#e6e6e6" />
            </radialGradient>
            <linearGradient id={`${uid}-s14-rr_a`} x1="2.59" x2="15.41" y1="10.16" y2="10.16" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#005ba1" />
              <stop offset=".07" stopColor="#0060a9" />
              <stop offset=".36" stopColor="#0071c8" />
              <stop offset=".52" stopColor="#0078d4" />
              <stop offset=".64" stopColor="#0074cd" />
              <stop offset=".82" stopColor="#006abb" />
              <stop offset="1" stopColor="#005ba1" />
            </linearGradient>
          </defs>
          <path fill={`url(#${uid}-s14-rr_a)`} d="M9 5.14c-3.54 0-6.41-1-6.41-2.32v12.36c0 1.27 2.82 2.3 6.32 2.32H9c3.54 0 6.41-1 6.41-2.32V2.82c0 1.29-2.87 2.32-6.41 2.32" />
          <path fill="#e8e8e8" d="M15.41 2.82c0 1.29-2.87 2.32-6.41 2.32s-6.41-1-6.41-2.32S5.46.5 9 .5s6.41 1 6.41 2.32" />
          <path fill="#50e6ff" d="M13.92 2.63c0 .82-2.21 1.48-4.92 1.48s-4.92-.66-4.92-1.48S6.29 1.16 9 1.16s4.92.66 4.92 1.47" />
          <path fill="#198ab3" d="M9 3a11.6 11.6 0 0 0-3.89.57A11.4 11.4 0 0 0 9 4.11a11.2 11.2 0 0 0 3.89-.58A11.8 11.8 0 0 0 9 3" />
          <path fill={`url(#${uid}-s14-rr_b)`} d="M12.9 11.4V8H12v4.13h2.46v-.73ZM5.76 9.73a1.8 1.8 0 0 1-.51-.31.44.44 0 0 1-.12-.32.34.34 0 0 1 .15-.3.68.68 0 0 1 .42-.12 1.62 1.62 0 0 1 1 .29v-.86a2.6 2.6 0 0 0-1-.16 1.64 1.64 0 0 0-1.09.34 1.08 1.08 0 0 0-.42.89c0 .51.32.91 1 1.21a3 3 0 0 1 .62.36.42.42 0 0 1 .15.32.38.38 0 0 1-.16.31.8.8 0 0 1-.45.11 1.66 1.66 0 0 1-1.09-.42V12a2.2 2.2 0 0 0 1.07.24 1.88 1.88 0 0 0 1.18-.33 1.08 1.08 0 0 0 .33-.91 1.05 1.05 0 0 0-.25-.7 2.4 2.4 0 0 0-.83-.57M11 11.32a2.34 2.34 0 0 0 .33-1.26A2.3 2.3 0 0 0 11 9a1.8 1.8 0 0 0-.7-.75 2 2 0 0 0-1-.26 2.1 2.1 0 0 0-1.08.27 1.86 1.86 0 0 0-.73.74 2.46 2.46 0 0 0-.26 1.14 2.26 2.26 0 0 0 .24 1 1.76 1.76 0 0 0 .69.74 2.06 2.06 0 0 0 1 .3l.86 1h1.21L10 12.08a1.8 1.8 0 0 0 1-.76m-1-.25a.94.94 0 0 1-.76.35.92.92 0 0 1-.76-.36 1.52 1.52 0 0 1-.29-1 1.53 1.53 0 0 1 .29-1 1 1 0 0 1 .78-.37.87.87 0 0 1 .75.37 1.62 1.62 0 0 1 .27 1 1.46 1.46 0 0 1-.28 1.01" />
        </symbol>
        <symbol id={`${uid}-s15`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <radialGradient id={`${uid}-s15-zz_a`} cx="-6811.4" cy="6729.69" r="17" gradientTransform="matrix(.5 0 0 -.5 3414.91 3374.05)" gradientUnits="userSpaceOnUse">
              <stop offset=".18" stopColor="#5ea0ef" />
              <stop offset="1" stopColor="#0078d4" />
            </radialGradient>
          </defs>
          <path fill={`url(#${uid}-s15-zz_a)`} d="M14.21 15.72A8.5 8.5 0 0 1 3.79 2.28l.09-.06a8.5 8.5 0 0 1 10.33 13.5" />
          <path fill="#5ea0ef" d="M9 1.31A7.69 7.69 0 1 0 16.69 9 7.7 7.7 0 0 0 9 1.31m5.15 2.59a7.4 7.4 0 0 1-2.15.8A8.8 8.8 0 0 0 10.75 2a7.2 7.2 0 0 1 3.4 1.9M9 1.74a6.6 6.6 0 0 1 1.09.09 7.5 7.5 0 0 1 1.53 3 15.1 15.1 0 0 1-5.45 0 7.4 7.4 0 0 1 1.51-2.94A7.3 7.3 0 0 1 9 1.74M7 2a8.7 8.7 0 0 0-1.27 2.68 5.6 5.6 0 0 1-1.9-.77A7.35 7.35 0 0 1 7 2M3.72 14a5.3 5.3 0 0 1 1.78-.76 7.1 7.1 0 0 0 1.35 2.72A7.25 7.25 0 0 1 3.72 14m6.41 2.2a7 7 0 0 1-1.13.06 7 7 0 0 1-1.44-.15 6 6 0 0 1-1.67-3 14.7 14.7 0 0 1 5.88 0 6 6 0 0 1-1.69 3Zm.73-.16a7.1 7.1 0 0 0 1.38-2.8 6.7 6.7 0 0 1 2 .83A7.13 7.13 0 0 1 10.86 16Zm1.48-3.22c.08-.36.15-.73.2-1.12l-.46.11c-.05.31-.1.62-.17.91a15.2 15.2 0 0 0-6.09 0c-.07-.27-.12-.56-.17-.86a.3.3 0 0 1 0-.09l-.46-.13a2 2 0 0 0 0 .28c0 .32.11.62.17.91a5.9 5.9 0 0 0-2 .85 7.24 7.24 0 0 1 .11-9.4 6.3 6.3 0 0 0 2.08.86c-.07.24-.13.5-.18.76s0 .25-.08.37l.47-.11v-.17c.06-.26.12-.51.19-.75A15 15 0 0 0 9 5.48a15 15 0 0 0 2.78-.26c.07.27.14.56.2.85l.46.11q-.11-.54-.24-1a7.7 7.7 0 0 0 2.3-.91 7.22 7.22 0 0 1 .06 9.49 7.3 7.3 0 0 0-2.22-.97Z" />
          <path fill="#fff" d="M3.69 7a8 8 0 0 1 1.16-.08 2.44 2.44 0 0 1 1.71.52 2 2 0 0 1 .59 1.46 2.2 2.2 0 0 1-.61 1.64 2.6 2.6 0 0 1-1.86.61 9 9 0 0 1-1-.05Zm.55 3.73a4 4 0 0 0 .55 0 1.62 1.62 0 0 0 1.79-1.81A1.5 1.5 0 0 0 4.87 7.3a3 3 0 0 0-.63 0Zm3.62.38V6.9h.59L9.8 9a12 12 0 0 1 .76 1.37c-.05-.56-.06-1.07-.06-1.73V6.9h.5v4.21h-.55L9.13 9c-.29-.47-.57-1-.79-1.4v3.54Zm4.03-.66a2 2 0 0 0 1 .27c.56 0 .88-.29.88-.72s-.22-.62-.79-.83-1.12-.6-1.12-1.2a1.22 1.22 0 0 1 1.37-1.14 2 2 0 0 1 .93.2l-.16.45a1.63 1.63 0 0 0-.8-.2c-.58 0-.8.34-.8.63s.26.59.84.81 1.08.62 1.08 1.24-.48 1.21-1.48 1.21a2.16 2.16 0 0 1-1.07-.27Z" />
        </symbol>
        <symbol id={`${uid}-s16`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s16-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}-s16-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}-s16-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}-s16-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="994" height="2184" fill={`url(#${uid}-bg)`} />
      <rect width="994" height="2184" fill={`url(#${uid}-grid)`} />
      <rect width="994" height="2184" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          HUB-SPOKE NETWORK ON AZURE
        </tspan>
      </text>
      <text fontSize="11.5" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65.25">
          On-premises reaches two peered spoke networks through the hub&#39;s gateways and Azure Firewall, over ExpressRoute with a VPN backup
        </tspan>
      </text>
      <g id={`${uid}-g-onprem`}>
        <rect x="262" y="96" width="210" height="279" rx="2.26" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="262" y="96" width="210" height="279" rx="2.26" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0536;0.0812;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-sub`}>
        <rect x="28" y="644" width="938" height="1411" rx="2.26" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="28" y="644" width="938" height="1411" rx="2.26" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0536;0.0812;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-hub`}>
        <rect x="200" y="696" width="528" height="448" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" strokeDasharray="3.39 3.39" />
        <g opacity="0">
          <rect x="200" y="696" width="528" height="448" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.13" strokeDasharray="3.39 3.39" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0536;0.0812;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-spoke-app`}>
        <rect x="48" y="1273" width="230" height="232" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" strokeDasharray="3.39 3.39" />
        <g opacity="0">
          <rect x="48" y="1273" width="230" height="232" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.13" strokeDasharray="3.39 3.39" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0536;0.0812;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-spoke-data`}>
        <rect x="461" y="1273" width="452" height="484" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" strokeDasharray="3.39 3.39" />
        <g opacity="0">
          <rect x="461" y="1273" width="452" height="484" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.13" strokeDasharray="3.39 3.39" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0536;0.0812;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-snet-gw`}>
        <rect x="220" y="748" width="329" height="160" rx="2.26" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="220" y="748" width="329" height="160" rx="2.26" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0536;0.0812;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-snet-fw`}>
        <rect x="220" y="964" width="329" height="160" rx="2.26" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="220" y="964" width="329" height="160" rx="2.26" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0536;0.0812;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-snet-bastion`}>
        <rect x="550" y="964" width="158" height="160" rx="2.26" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="550" y="964" width="158" height="160" rx="2.26" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0536;0.0812;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-snet-aks`}>
        <rect x="94" y="1325" width="138" height="160" rx="2.26" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="94" y="1325" width="138" height="160" rx="2.26" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0536;0.0812;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-snet-vm`}>
        <rect x="626.5" y="1329" width="143" height="160" rx="2.26" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="626.5" y="1329" width="143" height="160" rx="2.26" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0536;0.0812;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-snet-pe`}>
        <rect x="514.5" y="1594" width="330" height="143" rx="2.26" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="514.5" y="1594" width="330" height="143" rx="2.26" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0536;0.0812;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M367 219 L367 266.44" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M362.48 260.22 L367 267 L371.52 260.22" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M367 219 L367 266.44" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.36" 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.1915;0.2527;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.529s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1915;0.219;0.9;0.9276;1" dur="6.529s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M362.48 260.22 L367 267 L371.52 260.22" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2527;0.2803;0.9;0.9276;1" dur="6.529s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M352 355 L352 495.44" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="2.03" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M347.48 489.22 L352 496 L356.52 489.22" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M352 355 L352 495.44" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="2.03" 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.2895;0.3508;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.529s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2895;0.3171;0.9;0.9276;1" dur="6.529s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M347.48 489.22 L352 496 L356.52 489.22" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3508;0.3783;0.9;0.9276;1" dur="6.529s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M352 584 L352 799.44" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="2.03" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M347.48 793.22 L352 800 L356.52 793.22" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M352 584 L352 799.44" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="2.03" 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.3875;0.479;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.529s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3875;0.4151;0.9;0.9276;1" dur="6.529s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M347.48 793.22 L352 800 L356.52 793.22" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.479;0.5066;0.9;0.9276;1" dur="6.529s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M382 355 L382 386 Q382 394 390 394 L469 394 Q477 394 477 402 L477 799.44" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.52 3.39" />
        <path d="M472.48 793.22 L477 800 L481.52 793.22" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M352 888 L352 1015.44" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M347.48 1009.22 L352 1016 L356.52 1009.22" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M352 888 L352 1015.44" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.36" 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.5158;0.5771;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.529s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5158;0.5434;0.9;0.9276;1" dur="6.529s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M347.48 1009.22 L352 1016 L356.52 1009.22" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5771;0.6046;0.9;0.9276;1" dur="6.529s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M477 888 L477 919 Q477 927 469 927 L396 927 Q388 927 388 935 L388 1015.44" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M383.48 1009.22 L388 1016 L392.52 1009.22" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M344 1104 L344 1159 Q344 1167 336 1167 L171 1167 Q163 1167 163 1175 L163 1272.44" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M158.48 1266.22 L163 1273 L167.52 1266.22" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M344 1104 L344 1159 Q344 1167 336 1167 L171 1167 Q163 1167 163 1175 L163 1272.44" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.36" 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.6138;0.7621;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.529s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6138;0.6414;0.9;0.9276;1" dur="6.529s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M158.48 1266.22 L163 1273 L167.52 1266.22" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7621;0.7897;0.9;0.9276;1" dur="6.529s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e8`}>
        <path d="M397 1104 L397 1159 Q397 1167 405 1167 L450 1167 Q458 1167 458 1175 L458 1236 Q458 1244 466 1244 L681 1244 Q689 1244 689 1252 L689 1272.44" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M684.48 1266.22 L689 1273 L693.52 1266.22" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e9`}>
        <path d="M630 1104 L630 1228 Q630 1236 638 1236 L691 1236 Q699 1236 699 1244 L699 1380.44" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M694.48 1374.22 L699 1381 L703.52 1374.22" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e10`}>
        <path d="M370 1104 L370 1464.94" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.13 2.82" />
        <path d="M365.48 1458.72 L370 1465.5 L374.52 1458.72" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e11`}>
        <path d="M680.5 1469 L680.5 1645.44" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M675.98 1639.22 L680.5 1646 L685.02 1639.22" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e12`}>
        <path d="M680 1717 L680 1812.44" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M675.48 1806.22 L680 1813 L684.52 1806.22" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e13`}>
        <path d="M715.5 1469 L715.5 1500 Q715.5 1508 723.5 1508 L850.5 1508 Q858.5 1508 858.5 1516 L858.5 1931.44" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M853.98 1925.22 L858.5 1932 L863.02 1925.22" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.13" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-el-e2`}>
        <rect x="357" y="427" width="95" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.13" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="404.76" y="440.61">
            PRIVATE PEERING
          </tspan>
        </text>
        <g opacity="0">
          <rect x="357" y="427" width="95" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.13" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="404.76" y="440.61">
              PRIVATE PEERING
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2895;0.3171;0.9;0.9276;1" dur="6.529s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e4`}>
        <rect x="482" y="427" width="79" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.13" />
        <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#979899" textAnchor="middle">
          <tspan x="521.77" y="440.7">
            IPSEC TUNNEL
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e7`}>
        <rect x="168" y="1200" width="73" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.13" />
        <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#979899" textAnchor="middle">
          <tspan x="204.77" y="1213.7">
            VIA PEERING
          </tspan>
        </text>
        <g opacity="0">
          <rect x="168" y="1200" width="73" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.13" />
          <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#60a5fa" textAnchor="middle">
            <tspan x="204.77" y="1213.7">
              VIA PEERING
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6138;0.6414;0.9;0.9276;1" dur="6.529s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e8`}>
        <rect x="463" y="1200" width="73" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.13" />
        <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#979899" textAnchor="middle">
          <tspan x="499.77" y="1213.7">
            VIA PEERING
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e9`}>
        <rect x="635" y="1200" width="86" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.13" />
        <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#979899" textAnchor="middle">
          <tspan x="678.27" y="1213.7">
            RDP AND SSH
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e10`}>
        <rect x="375" y="1200" width="75" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.13" />
        <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#979899" textAnchor="middle">
          <tspan x="412.77" y="1213.7">
            DIAGNOSTICS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e13`}>
        <rect x="864" y="1838" width="82" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.13" />
        <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#979899" textAnchor="middle">
          <tspan x="905.27" y="1851.7">
            NAME LOOKUP
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-onprem`}>
        <use href={`#${uid}-s1`} x="275" y="106" width="18" height="18" />
        <g opacity="0">
          <use href={`#${uid}-s2`} x="275" y="106" width="18" height="18" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0536;0.0812;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
        <text fontSize="10.25" fontWeight="700" letterSpacing="1.03" fill="#649adb">
          <tspan x="302" y="118.09">
            ON-PREMISES DATACENTER
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-sub`}>
        <use href={`#${uid}-s3`} x="41.3" y="654.3" width="17.4" height="17.4" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <use href={`#${uid}-s3`} x="41.3" y="654.3" width="17.4" height="17.4" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0536;0.0812;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="68" y="666.36">
            PRODUCTION SUBSCRIPTION
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-hub`}>
        <use href={`#${uid}-s4`} x="484.3" y="706.3" width="17.4" height="17.4" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <use href={`#${uid}-s4`} x="484.3" y="706.3" width="17.4" height="17.4" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0536;0.0812;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="511" y="718.36">
            VNET-HUB 10.0.0.0/16
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-spoke-app`}>
        <use href={`#${uid}-s4`} x="61.3" y="1283.3" width="17.4" height="17.4" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <use href={`#${uid}-s4`} x="61.3" y="1283.3" width="17.4" height="17.4" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0536;0.0812;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
        <text fontSize="9.75" fontWeight="700" letterSpacing="0.98" fill="#9d9fa0">
          <tspan x="88" y="1294.91">
            VNET-SPOKE-APP 10.1.0.0/16
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-spoke-data`}>
        <use href={`#${uid}-s4`} x="474.3" y="1283.3" width="17.4" height="17.4" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <use href={`#${uid}-s4`} x="474.3" y="1283.3" width="17.4" height="17.4" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0536;0.0812;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
        <rect x="497" y="1282" width="214.8" height="18.9" rx="3" fill="#0b1012" />
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="501" y="1295.36">
            VNET-SPOKE-DATA 10.2.0.0/16
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-snet-gw`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="232" y="770.36">
            GATEWAYSUBNET
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-snet-fw`}>
        <text fontSize="10.75" fontWeight="700" letterSpacing="1.08" fill="#9d9fa0">
          <tspan x="394" y="986.27">
            AZUREFIREWALLSUBNET
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-snet-bastion`}>
        <text fontSize="10.75" fontWeight="700" letterSpacing="1.08" fill="#9d9fa0">
          <tspan x="562" y="986.27">
            AZUREBASTIONSUBNET
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-snet-aks`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="106" y="1347.36">
            SNET-AKS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-snet-vm`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="638.5" y="1351.36">
            SNET-VM
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-snet-pe`}>
        <rect x="522.5" y="1603" width="176.3" height="18.9" rx="3" fill="#0b1012" />
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="526.5" y="1616.36">
            SNET-PRIVATE-ENDPOINTS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-servers`}>
        <rect x="343" y="148" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="343" y="148" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1072;0.1348;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="352.6" y="157.6" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="367.43" y="214.27">
            CORPORATE SERVERS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-router`}>
        <rect x="343" y="267" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="343" y="267" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1072;0.1348;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="352.6" y="276.6" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="367.43" y="333.27">
            EDGE ROUTER
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="367" y="350.7">
            BGP ASN 65010
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-er`}>
        <rect x="327.5" y="496" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="327.5" y="496" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1072;0.1348;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="337.58" y="506.08" width="27.84" height="27.84" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.25" fontWeight="700" letterSpacing="0.82" fill="#9d9fa0" textAnchor="middle">
          <tspan x="351.92" y="562.09">
            EXPRESSROUTE CIRCUIT
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="351.5" y="579.7">
            1 Gbps primary
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-er-gw`}>
        <rect x="327.5" y="800" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="327.5" y="800" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1072;0.1348;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="336.62" y="809.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="351.94" y="866.27">
            EXPRESSROUTE
          </tspan>
          <tspan x="351.94" y="883.17">
            GATEWAY
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-vpn-gw`}>
        <rect x="452.5" y="800" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="452.5" y="800" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1072;0.1348;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="461.62" y="809.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="476.93" y="866.27">
            VPN GATEWAY
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="476.5" y="883.7">
            Site-to-site backup
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-fw`}>
        <rect x="346" y="1016" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="346" y="1016" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1072;0.1348;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="356.08" y="1026.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="370.43" y="1082.27">
            AZURE FIREWALL
          </tspan>
        </text>
        <text fontSize="9.5" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="370" y="1099.54">
            Filters spoke traffic
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-bastion`}>
        <rect x="605" y="1016" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="605" y="1016" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1072;0.1348;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s10`} x="615.08" y="1026.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="629.43" y="1082.27">
            AZURE BASTION
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="629.01" y="1099.7">
            RDP and SSH to VMs
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-aks`}>
        <rect x="139" y="1377" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="139" y="1377" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1072;0.1348;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s11`} x="149.08" y="1387.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="163.43" y="1443.27">
            AKS CLUSTER
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="162.99" y="1460.7">
            Private API server
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-vms`}>
        <rect x="674" y="1381" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="674" y="1381" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1072;0.1348;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s12`} x="684.08" y="1391.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="698.44" y="1447.27">
            VIRTUAL MACHINES
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="698.01" y="1464.7">
            App servers x2
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-pe`}>
        <rect x="655.5" y="1646" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="655.5" y="1646" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1072;0.1348;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s13`} x="665.58" y="1656.08" 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="679.92" y="1712.18">
            PRIVATE ENDPOINT
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-sql`}>
        <rect x="657" y="1813" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="657" y="1813" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1072;0.1348;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s14`} x="667.08" y="1823.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="681.44" y="1879.27">
            AZURE SQL DATABASE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-dns`}>
        <rect x="835" y="1932" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="835" y="1932" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1072;0.1348;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s15`} x="844.12" y="1941.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="859.44" y="1998.27">
            PRIVATE DNS ZONE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="859" y="2015.7">
            A record, linked to
          </tspan>
          <tspan x="859" y="2030.7">
            every VNet
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-logs`}>
        <rect x="345.5" y="1465.5" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.13" />
        <g opacity="0">
          <rect x="345.5" y="1465.5" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.13" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1072;0.1348;0.9124;0.94;1" dur="6.529s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s16`} x="354.62" y="1474.62" 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="369.94" y="1531.77">
            LOG ANALYTICS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="369.51" y="1549.2">
            Firewall and VNet flow
          </tspan>
          <tspan x="369.51" y="1564.2">
            logs
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <path d="M367 219 L367 266.44" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.71" pathLength="1" strokeDasharray="0.5 2" strokeDashoffset="0.5" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.5;0.5;-0.5;-1;-1" keyTimes="0;0.1915;0.2527;0.2834;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.529s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1915;0.193;0.2834;0.2849;1" dur="6.529s" repeatCount="indefinite" />
        </path>
        <circle r="2.82" fill="#60a5fa" opacity="0">
          <animateMotion path="M367 219 L367 266.44" dur="6.529s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.1915;0.2527;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.1685;0.1915;0.2895;0.3125;1" dur="6.529s" repeatCount="indefinite" />
        </circle>
        <path d="M352 355 L352 495.44" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.71" pathLength="1" strokeDasharray="0.21 2" strokeDashoffset="0.21" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.21;0.21;-0.79;-1;-1" keyTimes="0;0.2895;0.3508;0.3636;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.529s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2895;0.291;0.3636;0.3651;1" dur="6.529s" repeatCount="indefinite" />
        </path>
        <circle r="2.82" fill="#60a5fa" opacity="0">
          <animateMotion path="M352 355 L352 495.44" dur="6.529s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.2895;0.3508;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.2665;0.2895;0.3875;0.4105;1" dur="6.529s" repeatCount="indefinite" />
        </circle>
        <path d="M352 584 L352 799.44" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.71" 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.3875;0.479;0.4915;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.529s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3875;0.389;0.4915;0.4931;1" dur="6.529s" repeatCount="indefinite" />
        </path>
        <circle r="2.82" fill="#60a5fa" opacity="0">
          <animateMotion path="M352 584 L352 799.44" dur="6.529s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3875;0.479;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.3645;0.3875;0.5158;0.5388;1" dur="6.529s" repeatCount="indefinite" />
        </circle>
        <circle r="2.26" fill="#60a5fa" opacity="0">
          <animateMotion path="M382 355 L382 386 Q382 394 390 394 L469 394 Q477 394 477 402 L477 799.44" dur="6.529s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4483;0.6014;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.4253;0.4483;0.6014;0.6244;1" dur="6.529s" repeatCount="indefinite" />
        </circle>
        <path d="M352 888 L352 1015.44" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.71" pathLength="1" strokeDasharray="0.23 2" strokeDashoffset="0.23" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.23;0.23;-0.77;-1;-1" keyTimes="0;0.5158;0.5771;0.5912;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.529s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5158;0.5173;0.5912;0.5927;1" dur="6.529s" repeatCount="indefinite" />
        </path>
        <circle r="2.82" fill="#60a5fa" opacity="0">
          <animateMotion path="M352 888 L352 1015.44" dur="6.529s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5158;0.5771;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.4928;0.5158;0.6138;0.6368;1" dur="6.529s" repeatCount="indefinite" />
        </circle>
        <circle r="2.26" fill="#60a5fa" opacity="0">
          <animateMotion path="M477 888 L477 919 Q477 927 469 927 L396 927 Q388 927 388 935 L388 1015.44" dur="6.529s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6195;0.7114;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.5965;0.6195;0.7114;0.7344;1" dur="6.529s" repeatCount="indefinite" />
        </circle>
        <path d="M344 1104 L344 1159 Q344 1167 336 1167 L171 1167 Q163 1167 163 1175 L163 1272.44" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.71" pathLength="1" strokeDasharray="0.08 2" strokeDashoffset="0.08" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.08;0.08;-0.92;-1;-1" keyTimes="0;0.6138;0.7621;0.7746;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.529s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6138;0.6154;0.7746;0.7761;1" dur="6.529s" repeatCount="indefinite" />
        </path>
        <circle r="2.82" fill="#60a5fa" opacity="0">
          <animateMotion path="M344 1104 L344 1159 Q344 1167 336 1167 L171 1167 Q163 1167 163 1175 L163 1272.44" dur="6.529s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6138;0.7621;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.5909;0.6138;0.7621;0.7851;1" dur="6.529s" repeatCount="indefinite" />
        </circle>
      </g>
      <g id={`${uid}-legend`}>
        <rect x="790" y="2067" width="176" height="89" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.13" />
        <path d="M800 2084.5 H828" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.13" strokeLinecap="round" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="836" y="2087.87">
            TRAFFIC
          </tspan>
        </text>
        <path d="M800 2102.5 H828" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.13" strokeLinecap="round" strokeDasharray="4.52 3.39" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="836" y="2105.87">
            VPN BACKUP
          </tspan>
        </text>
        <path d="M800 2120.5 H828" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.13" strokeLinecap="round" strokeDasharray="1.13 2.82" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="836" y="2123.87">
            DIAGNOSTIC LOGS
          </tspan>
        </text>
        <path d="M800 2138.5 H828" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="2.03" strokeLinecap="round" />
        <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#9d9fa0">
          <tspan x="836" y="2141.7">
            EXPRESSROUTE PRIMARY
          </tspan>
        </text>
      </g>
    </svg>
  );
}