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

export default function WebAppOnAzure(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="715" height="1740" viewBox="0 0 715 1740" role="img" aria-labelledby={`${uid}-sdw-title ${uid}-sdw-desc`} fontFamily="'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace" {...props}>
      <title id={`${uid}-sdw-title`}>
        Web app on Azure
      </title>
      <desc id={`${uid}-sdw-desc`}>
        Web app on Azure. 10 components in 5 groups. Connections: Users to Azure Front Door (HTTPS); Azure Front Door to App Service; App Service to Integration interface (VNet integration); Integration interface to Private endpoint; Private endpoint to Azure SQL Database (Private Link); Integration interface to Private endpoint; Private endpoint to Key Vault (Private Link); Integration interface to Private DNS zones (name resolution); Application Insights to App Service.
      </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="221.5" cy="847.25" r="612.04">
          <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-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}-s4-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}-s4-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}-s4-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}-s5`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s5-107_a`} x1="9" x2="9" y1="13.83" y2="1.07" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#0078d4" />
              <stop offset=".82" stopColor="#5ea0ef" />
            </linearGradient>
          </defs>
          <path fill={`url(#${uid}-s5-107_a)`} d="M18 9.83A4 4 0 0 0 14.49 6a5.1 5.1 0 0 0-5.25-4.93 5.23 5.23 0 0 0-5 3.41A4.83 4.83 0 0 0 0 9.12a4.9 4.9 0 0 0 5.07 4.71h8.65a.8.8 0 0 0 .22 0 4.09 4.09 0 0 0 4.06-4" />
          <path fill="#f2f2f2" d="M6.63 6.82h5.06v7H6.63Z" />
          <path fill="#50e6ff" d="m12.61 6.37-3.49-2a.25.25 0 0 0-.31.15s0 .06 0 .08v12.08a.25.25 0 0 0 .24.25h.08l3.49-2.06a.25.25 0 0 0 .17-.23v-8a.26.26 0 0 0-.18-.27" />
        </symbol>
        <symbol id={`${uid}-s6`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s6-pq_b`} x1="4.4" x2="4.37" y1="11.48" y2="7.53" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#ccc" />
              <stop offset="1" stopColor="#fcfcfc" />
            </linearGradient>
            <linearGradient id={`${uid}-s6-pq_c`} x1="10.13" x2="10.13" y1="15.45" y2="11.9" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#ccc" />
              <stop offset="1" stopColor="#fcfcfc" />
            </linearGradient>
            <linearGradient id={`${uid}-s6-pq_d`} x1="14.18" x2="14.18" y1="11.15" y2="7.38" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#ccc" />
              <stop offset="1" stopColor="#fcfcfc" />
            </linearGradient>
            <radialGradient id={`${uid}-s6-pq_a`} cx="13428.81" cy="3518.86" r="56.67" gradientTransform="matrix(.15 0 0 .15 -2005.33 -518.83)" gradientUnits="userSpaceOnUse">
              <stop offset=".18" stopColor="#5ea0ef" />
              <stop offset="1" stopColor="#0078d4" />
            </radialGradient>
          </defs>
          <path fill={`url(#${uid}-s6-pq_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="#fff" d="M6.69 7.23a13 13 0 0 1 8.91-3.58 8.5 8.5 0 0 0-1.49-1.44 14.3 14.3 0 0 0-4.69 1.1 12.5 12.5 0 0 0-4.08 2.82 2.76 2.76 0 0 1 1.35 1.1m-4.21 3.42a18 18 0 0 0-.83 2.62 8 8 0 0 0 .62.92c.18.23.35.44.55.65a18 18 0 0 1 1.08-3.47 2.76 2.76 0 0 1-1.42-.72" opacity=".6" />
          <path fill="#f2f2f2" d="M3.46 6.11a12 12 0 0 1-.69-2.94 8 8 0 0 0-1.1 1.45A12.7 12.7 0 0 0 2.24 7a2.7 2.7 0 0 1 1.22-.89" opacity=".55" />
          <circle cx="4.38" cy="8.68" r="2.73" fill={`url(#${uid}-s6-pq_b)`} />
          <path fill="#f2f2f2" d="M8.36 13.67a1.77 1.77 0 0 1 .54-1.27 12 12 0 0 1-2.53-1.86 2.74 2.74 0 0 1-1.49.83 13 13 0 0 0 1.45 1.28 12 12 0 0 0 2.05 1.25 2 2 0 0 1-.02-.23m6.3.21a12 12 0 0 1-2.76-.32.4.4 0 0 1 0 .11 1.75 1.75 0 0 1-.51 1.24 13.7 13.7 0 0 0 3.42.24A8.2 8.2 0 0 0 16 13.81a12 12 0 0 1-1.34.07" opacity=".55" />
          <circle cx="10.13" cy="13.67" r="1.78" fill={`url(#${uid}-s6-pq_c)`} />
          <path fill="#f2f2f2" d="M12.32 8.93a1.83 1.83 0 0 1 .61-1 25.5 25.5 0 0 1-4.46-4.14 17 17 0 0 1-2-2.92 7.6 7.6 0 0 0-1.09.42 18 18 0 0 0 2.15 3.18 26.4 26.4 0 0 0 4.79 4.46" opacity=".7" />
          <circle cx="14.18" cy="9.27" r="1.89" fill={`url(#${uid}-s6-pq_d)`} />
          <path fill="#f2f2f2" d="m17.35 10.54-.35-.17-.3-.16h-.06l-.26-.21h-.07L16 9.8a1.76 1.76 0 0 1-.64.92c.12.08.25.15.38.22l.08.05.35.19.86.45a9 9 0 0 0 .29-1.11Z" opacity=".55" />
          <circle cx="4.38" cy="8.68" r="2.73" fill={`url(#${uid}-s6-pq_b)`} />
          <circle cx="10.13" cy="13.67" r="1.78" fill={`url(#${uid}-s6-pq_c)`} />
        </symbol>
        <symbol id={`${uid}-s7`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s7-10c_a`} x1="9.01" x2="9.01" y1="16.5" y2="1.5" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#5e9641" />
              <stop offset=".34" stopColor="#6baa42" />
              <stop offset=".67" stopColor="#73b743" />
              <stop offset="1" stopColor="#76bb43" />
            </linearGradient>
          </defs>
          <path fill="#ffca00" d="M15.89 2.91h1.27a.34.34 0 0 1 .34.34v3.5a.34.34 0 0 1-.34.34h-1.27zm0 6.09h1.27a.34.34 0 0 1 .34.34v5.86a.34.34 0 0 1-.34.34h-1.27z" />
          <rect width="13.76" height="15" x="2.13" y="1.5" fill={`url(#${uid}-s7-10c_a)`} rx=".69" />
          <path fill="#b4ec36" d="M5.9 12.9h-.71a.2.2 0 0 1-.19-.21V4.34a.19.19 0 0 1 .19-.2h1.93a.19.19 0 0 1 .19.2.2.2 0 0 1-.19.21H5.38v7.93h.52a.2.2 0 0 1 .19.21.21.21 0 0 1-.19.21" />
          <path fill="#b4ec36" d="M6 13.92H4.4a.2.2 0 0 1-.19-.21L4.08 3.38a.2.2 0 0 1 .06-.15.16.16 0 0 1 .13-.06h2.85v.41H4.47l.12 9.92H6Zm6-.92h-1.59a.2.2 0 0 1-.14-.07.18.18 0 0 1-.06-.14V7.9a.19.19 0 0 1 .19-.2h.91V5.45h.38v2.44a.2.2 0 0 1-.18.21h-.91v4.42H12Z" />
          <rect width="6.14" height="3.11" x="7.07" y="2.29" fill="#365615" rx=".26" />
          <rect width="4.9" height="1.09" x="5.86" y="12.69" fill="#365615" rx=".26" transform="rotate(90 8.305 13.235)" />
          <rect width="4.9" height="1.09" x="3.99" y="12.71" fill="#365615" rx=".26" transform="rotate(90 6.44 13.26)" />
          <rect width="4.9" height="1.09" x="9.98" y="12.71" fill="#f2f2f2" rx=".26" transform="rotate(90 12.425 13.255)" />
          <ellipse cx="8.11" cy="8.06" fill="#f2f2f2" rx="1.04" ry="1.12" />
          <path fill="#3b3b3b" d="M2.11 12.25H.84a.34.34 0 0 1-.34-.3V6.09a.34.34 0 0 1 .34-.34h1.27z" />
        </symbol>
        <symbol id={`${uid}-s8`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s8-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}-s8-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}-s8-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}-s8-130_b)`} />
        </symbol>
        <symbol id={`${uid}-s9`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <radialGradient id={`${uid}-s9-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}-s9-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}-s9-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}-s9-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}-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>
            <radialGradient id={`${uid}-s11-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}-s11-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}-s12`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <radialGradient id={`${uid}-s12-s3_a`} cx="9" cy="7.35" r="6.42" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#b77af4" />
              <stop offset=".21" stopColor="#b378f2" />
              <stop offset=".43" stopColor="#a672ed" />
              <stop offset=".65" stopColor="#9267e4" />
              <stop offset=".88" stopColor="#7559d8" />
              <stop offset="1" stopColor="#624fd0" />
            </radialGradient>
            <linearGradient id={`${uid}-s12-s3_b`} x1="9.02" x2="9.08" y1="3.91" y2="11.49" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#f2f2f2" />
              <stop offset=".23" stopColor="#f1f1f2" stopOpacity=".99" />
              <stop offset=".37" stopColor="#ededf1" stopOpacity=".95" />
              <stop offset=".48" stopColor="#e7e5f0" stopOpacity=".89" />
              <stop offset=".58" stopColor="#dedbee" stopOpacity=".81" />
              <stop offset=".67" stopColor="#d3ceeb" stopOpacity=".7" />
              <stop offset=".76" stopColor="#c4bee8" stopOpacity=".57" />
              <stop offset=".84" stopColor="#b4abe5" stopOpacity=".41" />
              <stop offset=".92" stopColor="#a095e1" stopOpacity=".22" />
              <stop offset=".99" stopColor="#8b7ddc" stopOpacity=".02" />
              <stop offset="1" stopColor="#897bdc" stopOpacity="0" />
            </linearGradient>
          </defs>
          <path fill="#cecece" d="m10.23 17.39.81-.87V14.2H7v2.32l.81.87a.32.32 0 0 0 .19.11h2a.32.32 0 0 0 .23-.11" />
          <path fill={`url(#${uid}-s12-s3_a)`} d="M9 .5a5.89 5.89 0 0 0-5.91 6.57c.27 2.47 2.62 3.62 3.29 6.75a.49.49 0 0 0 .47.38h4.3a.49.49 0 0 0 .47-.38c.67-3.13 3-4.28 3.29-6.75A5.89 5.89 0 0 0 9 .5M7 14.2" />
          <path fill={`url(#${uid}-s12-s3_b)`} d="M11.46 3.79a1.4 1.4 0 0 0-1.35 1.44V6H8v-.77a1.41 1.41 0 0 0-1.41-1.44 1.4 1.4 0 0 0-1.35 1.44 1.41 1.41 0 0 0 1.35 1.45h.64v6a.36.36 0 0 0 .72 0v-6h2.16v6a.36.36 0 1 0 .72 0v-6h.63a1.4 1.4 0 0 0 1.35-1.45 1.4 1.4 0 0 0-1.35-1.44M7.23 6h-.68a.74.74 0 0 1-.68-.77.74.74 0 0 1 .68-.77.74.74 0 0 1 .68.77Zm4.28 0h-.68v-.81a.68.68 0 1 1 1.35 0 .73.73 0 0 1-.67.81" />
          <polygon fill="#999" points="6.96 15.8 11.04 15.01 11.04 14.56 6.96 15.36 6.96 15.8" />
          <polygon fill="#999" points="11.04 16.11 11.04 15.67 6.96 16.48 6.96 16.52 7.27 16.86 11.04 16.11" />
        </symbol>
      </defs>
      <rect width="715" height="1740" fill={`url(#${uid}-bg)`} />
      <rect width="715" height="1740" fill={`url(#${uid}-grid)`} />
      <rect width="715" height="1740" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          WEB APP ON AZURE
        </tspan>
      </text>
      <text fontSize="10.5" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="64.92">
          Front Door sends traffic to App Service, which reaches Azure SQL and Key Vault through private endpoints
        </tspan>
      </text>
      <g id={`${uid}-g-sub`}>
        <rect x="28" y="326" width="568" height="1321" rx="2" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="28" y="326" width="568" height="1321" 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.046;0.0696;0.9164;0.94;1" dur="7.614s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-rg`}>
        <rect x="48" y="378" width="528" height="1249" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" strokeDasharray="3 3" />
        <g opacity="0">
          <rect x="48" y="378" width="528" height="1249" 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.046;0.0696;0.9164;0.94;1" dur="7.614s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-vnet`}>
        <rect x="68" y="829" width="401" height="531" rx="2" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="68" y="829" width="401" height="531" rx="2" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.046;0.0696;0.9164;0.94;1" dur="7.614s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-snet-app`}>
        <rect x="88" y="881" width="361" height="160" rx="2" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="88" y="881" width="361" 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.046;0.0696;0.9164;0.94;1" dur="7.614s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-snet-pe`}>
        <rect x="88" y="1180" width="282" height="160" rx="2" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="88" y="1180" width="282" 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.046;0.0696;0.9164;0.94;1" dur="7.614s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M287 167 L287 429.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M283 424 L287 430 L291 424" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M287 167 L287 429.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.1642;0.2721;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.614s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1642;0.1878;0.9;0.9236;1" dur="7.614s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M283 424 L287 430 L291 424" 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.2721;0.2958;0.9;0.9236;1" dur="7.614s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M287 518 L287 581.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M283 576 L287 582 L291 576" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M287 518 L287 581.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.3037;0.3562;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.614s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3037;0.3273;0.9;0.9236;1" dur="7.614s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M283 576 L287 582 L291 576" 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.3562;0.3798;0.9;0.9236;1" dur="7.614s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M300 670 L300 932.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M296 927 L300 933 L304 927" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M300 670 L300 932.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.3877;0.4957;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.614s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3877;0.4114;0.9;0.9236;1" dur="7.614s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M296 927 L300 933 L304 927" 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.4957;0.5193;0.9;0.9236;1" dur="7.614s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M268 1021 L268 1058 Q268 1066 260 1066 L167 1066 Q159 1066 159 1074 L159 1231.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M155 1226 L159 1232 L163 1226" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M268 1021 L268 1058 Q268 1066 260 1066 L167 1066 Q159 1066 159 1074 L159 1231.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.5272;0.6585;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.614s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5272;0.5508;0.9;0.9236;1" dur="7.614s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M155 1226 L159 1232 L163 1226" 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.6585;0.6822;0.9;0.9236;1" dur="7.614s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M159 1320 L159 1382 Q159 1390 151 1390 L151 1390 Q143 1390 143 1398 L143 1527" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M139 1521.5 L143 1527.5 L147 1521.5" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M159 1320 L159 1382 Q159 1390 151 1390 L151 1390 Q143 1390 143 1398 L143 1527" 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.6901;0.7818;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.614s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6901;0.7137;0.9;0.9236;1" dur="7.614s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M139 1521.5 L143 1527.5 L147 1521.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.7818;0.8054;0.9;0.9236;1" dur="7.614s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M299.5 1021 L299.5 1231.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M295.5 1226 L299.5 1232 L303.5 1226" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M300 1320 L300 1518.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M296 1513 L300 1519 L304 1513" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e8`}>
        <path d="M331 1021 L331 1058 Q331 1066 339 1066 L380 1066 Q388 1066 388 1074 L388 1382 Q388 1390 396 1390 L443 1390 Q451 1390 451 1398 L451 1518.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M447 1513 L451 1519 L455 1513" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e9`}>
        <path d="M441 518.5 L441 530 Q441 538 433 538 L320 538 Q312 538 312 546 L312 582" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1 2.5" />
        <path d="M445 524 L441 518 L437 524" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-el-e1`}>
        <rect x="292" y="231" width="51" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="317.76" y="244.52">
            HTTPS
          </tspan>
        </text>
        <g opacity="0">
          <rect x="292" y="231" width="51" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#60a5fa" textAnchor="middle">
            <tspan x="317.76" y="244.52">
              HTTPS
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1642;0.1878;0.9;0.9236;1" dur="7.614s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e3`}>
        <rect x="305" y="734" width="101" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="355.76" y="747.52">
            VNET INTEGRATION
          </tspan>
        </text>
        <g opacity="0">
          <rect x="305" y="734" width="101" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#60a5fa" textAnchor="middle">
            <tspan x="355.76" y="747.52">
              VNET INTEGRATION
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3877;0.4114;0.9;0.9236;1" dur="7.614s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e5`}>
        <rect x="148" y="1434" width="76" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="186.26" y="1447.52">
            PRIVATE LINK
          </tspan>
        </text>
        <g opacity="0">
          <rect x="148" y="1434" width="76" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#60a5fa" textAnchor="middle">
            <tspan x="186.26" y="1447.52">
              PRIVATE LINK
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6901;0.7137;0.9;0.9236;1" dur="7.614s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e7`}>
        <rect x="305" y="1434" width="76" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="343.26" y="1447.52">
            PRIVATE LINK
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e8`}>
        <rect x="456" y="1434" width="100" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="506.26" y="1447.52">
            NAME RESOLUTION
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-sub`}>
        <use href={`#${uid}-s1`} x="41.3" y="336.3" width="17.4" height="17.4" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <use href={`#${uid}-s1`} x="41.3" y="336.3" width="17.4" height="17.4" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.046;0.0696;0.9164;0.94;1" dur="7.614s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="68" y="348.35">
            PRODUCTION SUBSCRIPTION
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-rg`}>
        <use href={`#${uid}-s2`} x="61.3" y="388.3" width="17.4" height="17.4" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <use href={`#${uid}-s2`} x="61.3" y="388.3" width="17.4" height="17.4" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.046;0.0696;0.9164;0.94;1" dur="7.614s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="88" y="400.35">
            RG-WEB-PROD
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-vnet`}>
        <use href={`#${uid}-s3`} x="81.3" y="839.3" width="17.4" height="17.4" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <use href={`#${uid}-s3`} x="81.3" y="839.3" width="17.4" height="17.4" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.046;0.0696;0.9164;0.94;1" dur="7.614s" repeatCount="indefinite" />
        </g>
        <rect x="104" y="838" width="207.1" height="18.9" rx="3" fill="#0b1012" />
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="108" y="851.36">
            VNET-WEB-PROD 10.20.0.0/16
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-snet-app`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="100" y="903.36">
            SNET-APP-INTEGRATION
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-snet-pe`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="100" y="1202.36">
            SNET-PE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-users`}>
        <rect x="263" y="96" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="263" 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.0919;0.1156;0.9164;0.94;1" dur="7.614s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s4`} x="272.12" y="105.12" width="29.76" height="29.76" filter={`url(#${uid}-f3)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="287.42" y="162.18">
            USERS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-fd`}>
        <rect x="263" y="430" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="263" y="430" 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.0919;0.1156;0.9164;0.94;1" dur="7.614s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="273.08" y="440.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="287.42" y="496.18">
            AZURE FRONT DOOR
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="287.01" y="513.7">
            WAF policy
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-app`}>
        <rect x="275.5" y="582" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="275.5" y="582" 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.0919;0.1156;0.9164;0.94;1" dur="7.614s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="284.62" y="591.12" width="29.76" height="29.76" filter={`url(#${uid}-f3)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="299.92" y="648.18">
            APP SERVICE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="299.5" y="665.7">
            Web app
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-vnet-int`}>
        <rect x="275" y="933" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="275" y="933" 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.0919;0.1156;0.9164;0.94;1" dur="7.614s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="285.08" y="943.08" width="27.84" height="27.84" filter={`url(#${uid}-f1)`} />
        <text fontSize="9.75" fontWeight="700" letterSpacing="0.78" fill="#9d9fa0" textAnchor="middle">
          <tspan x="299.39" y="998.91">
            INTEGRATION INTERFACE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="299" y="1016.7">
            Outbound traffic only
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-pe-sql`}>
        <rect x="134.5" y="1232" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="134.5" y="1232" 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.0919;0.1156;0.9164;0.94;1" dur="7.614s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="144.58" y="1242.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="158.92" y="1298.18">
            PRIVATE ENDPOINT
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="158.5" y="1315.7">
            SQL Database
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-pe-kv`}>
        <rect x="275.5" y="1232" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="275.5" y="1232" 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.0919;0.1156;0.9164;0.94;1" dur="7.614s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="285.58" y="1242.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="299.92" y="1298.18">
            PRIVATE ENDPOINT
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="299.5" y="1315.7">
            Key Vault
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-sql`}>
        <rect x="119" y="1527.5" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="119" y="1527.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.0919;0.1156;0.9164;0.94;1" dur="7.614s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="129.08" y="1537.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="143.42" y="1593.68">
            AZURE SQL DATABASE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-kv`}>
        <rect x="276" y="1519" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="276" y="1519" 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.0919;0.1156;0.9164;0.94;1" dur="7.614s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s10`} x="285.12" y="1528.12" width="29.76" height="29.76" filter={`url(#${uid}-f3)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="300.42" y="1585.18">
            KEY VAULT
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="300" y="1602.7">
            Connection secrets
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-dns`}>
        <rect x="426.5" y="1519" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="426.5" y="1519" 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.0919;0.1156;0.9164;0.94;1" dur="7.614s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s11`} x="435.62" y="1528.12" width="29.76" height="29.76" filter={`url(#${uid}-f3)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="450.93" y="1585.18">
            PRIVATE DNS ZONES
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="450.51" y="1602.7">
            privatelink zones
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-insights`}>
        <rect x="416.5" y="430" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="416.5" y="430" 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.0919;0.1156;0.9164;0.94;1" dur="7.614s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s12`} x="426.58" y="440.08" width="27.84" height="27.84" filter={`url(#${uid}-f1)`} />
        <text fontSize="9.75" fontWeight="700" letterSpacing="0.78" fill="#9d9fa0" textAnchor="middle">
          <tspan x="440.89" y="495.91">
            APPLICATION INSIGHTS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="440.51" y="513.7">
            Telemetry
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <path d="M287 167 L287 429.5" 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.1642;0.2721;0.2828;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.614s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1642;0.1655;0.2828;0.2841;1" dur="7.614s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M287 167 L287 429.5" dur="7.614s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.1642;0.2721;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.1445;0.1642;0.3037;0.3234;1" dur="7.614s" repeatCount="indefinite" />
        </circle>
        <path d="M287 518 L287 581.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.41 2" strokeDashoffset="0.41" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.41;0.41;-0.59;-1;-1" keyTimes="0;0.3037;0.3562;0.3777;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.614s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3037;0.305;0.3777;0.379;1" dur="7.614s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M287 518 L287 581.5" dur="7.614s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3037;0.3562;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.284;0.3037;0.3877;0.4074;1" dur="7.614s" repeatCount="indefinite" />
        </circle>
        <path d="M300 670 L300 932.5" 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.3877;0.4957;0.5064;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.614s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3877;0.389;0.5064;0.5077;1" dur="7.614s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M300 670 L300 932.5" dur="7.614s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3877;0.4957;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.368;0.3877;0.5272;0.5469;1" dur="7.614s" repeatCount="indefinite" />
        </circle>
        <path d="M268 1021 L268 1058 Q268 1066 260 1066 L167 1066 Q159 1066 159 1074 L159 1231.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" 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.5272;0.6585;0.6692;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.614s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5272;0.5285;0.6692;0.6705;1" dur="7.614s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M268 1021 L268 1058 Q268 1066 260 1066 L167 1066 Q159 1066 159 1074 L159 1231.5" dur="7.614s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5272;0.6585;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.5075;0.5272;0.6901;0.7098;1" dur="7.614s" repeatCount="indefinite" />
        </circle>
        <path d="M159 1320 L159 1382 Q159 1390 151 1390 L151 1390 Q143 1390 143 1398 L143 1527" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.12 2" strokeDashoffset="0.12" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.12;0.12;-0.88;-1;-1" keyTimes="0;0.6901;0.7818;0.7925;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.614s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6901;0.6914;0.7925;0.7938;1" dur="7.614s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M159 1320 L159 1382 Q159 1390 151 1390 L151 1390 Q143 1390 143 1398 L143 1527" dur="7.614s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6901;0.7818;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.6704;0.6901;0.7818;0.8015;1" dur="7.614s" repeatCount="indefinite" />
        </circle>
        <circle r="2" fill="#60a5fa" opacity="0">
          <animateMotion path="M299.5 1021 L299.5 1231.5" dur="7.614s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4421;0.5287;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.4224;0.4421;0.5287;0.5484;1" dur="7.614s" repeatCount="indefinite" />
        </circle>
        <circle r="2" fill="#60a5fa" opacity="0">
          <animateMotion path="M331 1021 L331 1058 Q331 1066 339 1066 L380 1066 Q388 1066 388 1074 L388 1382 Q388 1390 396 1390 L443 1390 Q451 1390 451 1398 L451 1518.5" dur="7.614s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6274;0.7587;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.6077;0.6274;0.7587;0.7784;1" dur="7.614s" repeatCount="indefinite" />
        </circle>
      </g>
      <g id={`${uid}-legend`}>
        <rect x="550" y="1659" width="137" height="53" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <path d="M560 1676.5 H588" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" />
        <text fontSize="8" fontWeight="700" letterSpacing="0.48" fill="#9d9fa0">
          <tspan x="596" y="1679.34">
            REQUEST TRAFFIC
          </tspan>
        </text>
        <path d="M560 1694.5 H588" 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="596" y="1697.87">
            TELEMETRY
          </tspan>
        </text>
      </g>
    </svg>
  );
}