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

export default function HybridNetworkOnAWS(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="1338" height="1812" viewBox="0 0 1338 1812" 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`}>
        Hybrid network on AWS
      </title>
      <desc id={`${uid}-sdw-desc`}>
        Hybrid network on AWS. 12 components in 9 groups. Connections: Application servers to Customer router; Customer router to AWS Direct Connect; AWS Direct Connect to Direct Connect gateway (transit VIF); Direct Connect gateway to AWS Transit Gateway (association); Customer router to AWS Site-to-Site VPN; AWS Site-to-Site VPN to AWS Transit Gateway (VPN attachment); AWS Transit Gateway to TGW attachment; TGW attachment to Amazon Elastic Kubernetes Service; AWS Transit Gateway to TGW attachment; TGW attachment to Amazon EC2; AWS Transit Gateway to TGW attachment; TGW attachment to Amazon Route 53 Resolver.
      </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="30.41" height="30.41" patternUnits="userSpaceOnUse">
          <path d="M0 0.76H30.41M0.76 0V30.41" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1.52" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="802.8" cy="815.4" r="767.84">
          <stop offset="0" stopColor="#60a5fa" stopOpacity="0.12" />
          <stop offset="1" stopColor="#60a5fa" stopOpacity="0" />
        </radialGradient>
        <symbol id={`${uid}-s1`} viewBox="0 0 40 40" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="40" height="40" fill="#7d8998" />
            <path fill="#fff" d="M12 17h3.5a.5.5 0 0 0 .5-.5V7h7v9.5a.5.5 0 0 0 .5.5H27v16H12zm16 16.5v-17a.5.5 0 0 0-.5-.5H24V6.5a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5V16h-3.5a.5.5 0 0 0-.5.5v17a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5M24 31h1v-2h-1zm-5 0h1v-2h-1zm-5 0h1v-2h-1zm10-4h1v-3h-1zm-5 0h1v-3h-1zm-5 0h1v-3h-1zm10-5h1v-3h-1zm-5-10h1V9h-1zm0 5h1v-3h-1zm0 5h1v-3h-1zm-5 0h1v-3h-1z" />
          </g>
        </symbol>
        <filter id={`${uid}-f1`} 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="#b6b7b8" />
          <feComposite in2="a" operator="in" />
        </filter>
        <filter id={`${uid}-f2`} 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="#0b1012" />
          <feComposite in2="a" operator="in" />
        </filter>
        <symbol id={`${uid}-s2`} viewBox="0 0 40 40" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="40" height="40" fill="#fff" />
            <path fill="#232f3e" d="M32.698 23.9c.361.47-.4 2.4-.74 3.264-.105.262.117.365.35.168 1.512-1.284 1.904-3.975 1.593-4.363-.307-.386-2.95-.717-4.563.432-.249.177-.206.42.07.389.907-.112 2.93-.357 3.29.11m-.842 2.01c.518-.378.074-.941-.454-.72-3.513 1.464-7.327 2.173-10.8 2.173-5.143 0-10.127-1.39-14.156-3.695-.352-.202-.613.155-.319.414 3.733 3.316 8.67 5.309 14.147 5.309 3.91 0 8.451-1.208 11.582-3.481m-2.144-5.215a6.6 6.6 0 0 1-1.459-.161q-.714-.163-1.093-.373-.233-.128-.29-.258a.7.7 0 0 1-.059-.26v-.47q0-.29.216-.292.083.002.173.033.091.034.241.098.48.21 1.044.324.564.113 1.126.113.895 0 1.384-.308a.97.97 0 0 0 .49-.873.88.88 0 0 0-.258-.65q-.256-.258-.952-.484l-1.375-.421q-1.045-.325-1.517-.938a2.17 2.17 0 0 1-.472-1.347q0-.581.258-1.027.255-.445.676-.761.427-.314.99-.478a4.3 4.3 0 0 1 1.19-.162q.315 0 .64.04a6.3 6.3 0 0 1 1.15.252q.248.082.4.162a.9.9 0 0 1 .28.227.5.5 0 0 1 .083.308v.436q0 .291-.217.29-.114.002-.364-.111c-.54-.24-1.15-.356-1.82-.356q-.815 0-1.262.258-.448.26-.448.827 0 .388.283.655.281.267 1.044.51l1.342.423q1.028.322 1.466.888.441.568.441 1.295 0 .6-.25 1.078-.248.477-.689.817a3.1 3.1 0 0 1-1.05.518q-.615.179-1.343.178m-12.165-.244q-.248.002-.365-.087-.117-.09-.199-.365l-2.222-7.157a1.8 1.8 0 0 1-.082-.371q0-.227.233-.227h.927q.265 0 .374.09.106.086.19.364l1.59 6.12 1.477-6.12q.066-.278.181-.364.116-.09.38-.09h.765q.263 0 .38.09.116.086.182.364l1.493 6.2 1.64-6.2q.082-.278.19-.364.109-.09.373-.09h.878q.233 0 .233.227a1 1 0 0 1-.016.144 2 2 0 0 1-.068.227l-2.286 7.157q-.083.275-.2.365-.116.088-.364.087h-.813q-.264.001-.38-.094-.116-.099-.182-.373l-1.476-5.96-1.457 5.96q-.067.274-.183.373-.116.095-.38.094zM9.94 19.449q.465 0 .98-.17.513-.17.893-.592.232-.259.324-.591.09-.33.09-.801v-.388a8 8 0 0 0-1.757-.211q-.945 0-1.408.373-.464.37-.465 1.07 0 .645.35.978.347.332.993.332m3.846-1.408q0 .517.107.825.11.31.307.664a.4.4 0 0 1 .066.209q0 .148-.182.276l-.597.39a.5.5 0 0 1-.248.08.4.4 0 0 1-.282-.128 2 2 0 0 1-.339-.43 6 6 0 0 1-.29-.544q-1.112 1.28-2.785 1.28-1.194.001-1.89-.664-.696-.664-.696-1.78 0-1.182.863-1.903.86-.72 2.32-.721.48 0 1.002.073t1.084.203v-.68q.001-1.052-.446-1.482-.446-.428-1.54-.428a4.5 4.5 0 0 0-1.02.12 7.5 7.5 0 0 0-1.02.315 3 3 0 0 1-.33.122.7.7 0 0 1-.15.024q-.199.001-.2-.292v-.452q.001-.228.068-.323.066-.099.265-.195a6 6 0 0 1 1.192-.421 6 6 0 0 1 1.476-.18c1.126 0 1.952.254 2.477.754q.787.753.788 2.275z" />
          </g>
        </symbol>
        <filter id={`${uid}-f3`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -0.8504 -2.8608 -0.2888 0 2.4" result="a" />
          <feFlood floodColor="#b6b7b8" />
          <feComposite in2="a" operator="in" />
          <feComposite in2="SourceAlpha" operator="in" />
        </filter>
        <filter id={`${uid}-f4`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -0.8504 -2.8608 -0.2888 0 2.4" result="a" />
          <feFlood floodColor="#0b1012" />
          <feComposite in2="a" operator="in" />
          <feComposite in2="SourceAlpha" operator="in" />
        </filter>
        <symbol id={`${uid}-s3`} viewBox="0 0 40 40" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="40" height="40" fill="#e7157b" />
            <path fill="#fff" d="M24.5 22c1.93 0 3.5 1.57 3.5 3.5S26.43 29 24.5 29 21 27.43 21 25.5s1.57-3.5 3.5-3.5m0 8c2.481 0 4.5-2.019 4.5-4.5S26.981 21 24.5 21a4.505 4.505 0 0 0-4.5 4.5c0 2.481 2.019 4.5 4.5 4.5m1.523-19.12L29.084 17h-6.121zM22.154 18h7.739a.502.502 0 0 0 .447-.724l-3.869-7.738c-.17-.338-.725-.338-.895 0l-3.869 7.738a.503.503 0 0 0 .447.724M11 23h7v-7h-7zm-.5 1h8a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5M8 32h24V8H8zM32.5 7h-25a.5.5 0 0 0-.5.5v25a.5.5 0 0 0 .5.5h25a.5.5 0 0 0 .5-.5v-25a.5.5 0 0 0-.5-.5" />
          </g>
        </symbol>
        <symbol id={`${uid}-s4`} viewBox="0 0 40 40" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="40" height="40" fill="#8c4fff" />
            <path fill="#fff" d="m30.97 21.03-2.943-1.264v10.49c2.545-.353 2.932-2.969 2.948-3.088zm-3.943 9.24V19.76l-3.035 1.272v6.201c.013.054.445 2.767 3.035 3.036m.306-11.723a.5.5 0 0 1 .39.001l3.945 1.692a.5.5 0 0 1 .303.46v6.533c-.183 1.447-1.357 4.063-4.527 4.063-3.075 0-4.254-2.612-4.448-3.994l-.004-6.603c0-.2.12-.383.306-.46zm5.65.637-5.461-2.406-5.53 2.327v7.128c-.001.042-.054 2.868 1.657 4.623.917.941 2.194 1.42 3.795 1.42 1.602 0 2.887-.48 3.819-1.423 1.735-1.758 1.72-4.585 1.72-4.613zM31.98 31.55c-1.127 1.144-2.654 1.725-4.536 1.725-1.884 0-3.404-.58-4.517-1.727-2.005-2.063-1.94-5.197-1.935-5.329v-7.446a.5.5 0 0 1 .305-.46l6.035-2.54a.5.5 0 0 1 .396.003l5.956 2.625a.5.5 0 0 1 .299.457v7.375c.002.125.027 3.255-2.003 5.317m-20.988-7.314h8v1h-8c-2.811 0-4.811-2.016-4.98-5.016A4 4 0 0 1 6 19.841c0-2.509 1.318-4.223 3.817-4.979a8 8 0 0 1-.032-.647c0-2.916 1.577-5.445 4.017-6.445 3.298-1.348 7.042-.894 9.106 1.104a8.2 8.2 0 0 1 1.76 2.485c.609-.45 1.4-.66 2.349-.614 1.78.09 3.149 1.713 3.433 4.007 1.498.124 2.485.883 3.01 2.308l-.937.346c-.428-1.157-1.208-1.673-2.531-1.673a.5.5 0 0 1-.5-.47c-.138-2.338-1.406-3.463-2.526-3.519-.945-.053-1.645.22-2.08.791a.5.5 0 0 1-.472.193.5.5 0 0 1-.395-.323 7.4 7.4 0 0 0-1.807-2.814c-1.788-1.73-5.09-2.099-8.031-.895-2.063.845-3.396 3.011-3.396 5.52 0 .272.035.695.066.958a.5.5 0 0 1-.376.544C8.169 16.29 7 17.678 7 19.841c0 .101-.001.201.009.302.14 2.495 1.703 4.093 3.983 4.093" />
          </g>
        </symbol>
        <symbol id={`${uid}-s5`} viewBox="0 0 48 48" overflow="visible">
          <g fill="#919394">
            <path fill="#919394" fillRule="evenodd" d="M8.999 40h2v-2h-2zm0-15.001h2v-2h-2zm0-14.999h2V8h-2zm2 7.999H37V16H10.999zM4 29h40v-9.001H4zm6.999 4h26.002v-2H10.999zM4 43.999h40V35H4zM4 14h40V5H4zm41 2a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h5.999v1.999H3a1 1 0 0 0-1 1V30a1 1 0 0 0 1 1h5.999v2H3a1 1 0 0 0-1 1v10.999a1 1 0 0 0 1 1h42a1 1 0 0 0 1-1V34a1 1 0 0 0-1-1h-5.999v-2H45a1 1 0 0 0 1-1V18.999a1 1 0 0 0-1-1h-6V16z" />
          </g>
        </symbol>
        <symbol id={`${uid}-s6`} viewBox="0 0 48 48" overflow="visible">
          <path fill="#8c4fff" fillRule="evenodd" d="m42.208 24.707-4.375 4.375-1.414-1.414L39.087 25H25v14.086l2.668-2.668 1.414 1.414-4.375 4.375a.997.997 0 0 1-1.414 0l-4.375-4.375 1.414-1.414L23 39.086V25H8.915l2.668 2.668-1.414 1.414-4.375-4.375a1 1 0 0 1 0-1.414l4.375-4.376 1.414 1.414L8.915 23H23V8.913l-2.668 2.668-1.414-1.414 4.375-4.375a1 1 0 0 1 1.414 0l4.375 4.375-1.414 1.414L25 8.913V23h14.087l-2.668-2.669 1.414-1.414 4.375 4.376a1 1 0 0 1 0 1.414M24 44C12.972 44 4 35.028 4 24S12.972 4 24 4s20 8.972 20 20-8.972 20-20 20m0-42C11.87 2 2 11.869 2 24s9.87 22 22 22 22-9.869 22-22S36.131 2 24 2" />
        </symbol>
        <filter id={`${uid}-f5`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feFlood floodColor="#919394" />
          <feComposite in2="SourceAlpha" operator="in" />
        </filter>
        <symbol id={`${uid}-s7`} viewBox="0 0 80 80" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="80" height="80" fill="#8c4fff" />
            <path fill="#fff" d="M29.97 60.66h17.86v-5.873c0-.517-.566-.953-1.236-.953H31.206c-.67 0-1.236.436-1.236.953zm23.172 3.335V68h-2v-4.005c0-.786-.458-1.334-.868-1.334H27.527c-.41 0-.867.548-.867 1.334V68h-2v-4.005c0-1.838 1.287-3.335 2.867-3.335h.443v-5.873c0-1.628 1.451-2.954 3.236-2.954h15.388c1.785 0 3.238 1.326 3.238 2.954v5.873h.442c1.581 0 2.868 1.497 2.868 3.335M45.52 38.594a2.313 2.313 0 0 0 2.31-2.31 2.313 2.313 0 0 0-2.31-2.31 2.313 2.313 0 0 0-2.31 2.31 2.313 2.313 0 0 0 2.31 2.31m-1 12.034V40.465c-1.895-.454-3.311-2.15-3.311-4.181a4.316 4.316 0 0 1 4.31-4.31 4.316 4.316 0 0 1 4.312 4.31c0 2.031-1.417 3.727-3.31 4.181v10.163zM41.137 28.56a2.31 2.31 0 0 0-2.31-2.31 2.31 2.31 0 0 0-2.309 2.31 2.31 2.31 0 0 0 2.309 2.309 2.31 2.31 0 0 0 2.31-2.309m2 0c0 2.005-1.38 3.678-3.237 4.158v17.909h-2V32.765a4.31 4.31 0 0 1-3.383-4.204 4.315 4.315 0 0 1 4.31-4.31 4.316 4.316 0 0 1 4.31 4.31M32.28 33.974a2.31 2.31 0 0 0-2.31 2.31 2.31 2.31 0 0 0 2.31 2.31 2.31 2.31 0 0 0 2.31-2.31 2.31 2.31 0 0 0-2.31-2.31m0-2a4.315 4.315 0 0 1 4.31 4.31c0 2.031-1.416 3.727-3.31 4.181v10.163h-2V40.465c-1.894-.454-3.31-2.15-3.31-4.181a4.316 4.316 0 0 1 4.31-4.31M68 37.365c0 7.653-5.81 10.38-11.247 10.38h-7.816v-2h7.816c2.17 0 9.246-.605 9.246-8.38 0-5.626-4.407-7.69-8.102-8.432a1 1 0 0 1-.802-.922c-.263-4.44-2.857-6.014-4.999-6.014-1.448 0-2.807.69-3.726 1.895a1 1 0 0 1-1.735-.262c-.634-1.724-1.76-4.136-3.518-5.839-3.882-3.773-9.193-4.798-14.213-2.74-4.097 1.677-7.43 6.804-7.43 11.427 0 .51.03 1.02.093 1.519a1 1 0 0 1-.755 1.094c-2.048.5-6.811 2.302-6.811 8.196q.002.308.022.617c.242 4.322 4.309 7.84 9.064 7.84h5.75v2h-5.75c-5.799 0-10.762-4.365-11.062-9.73a13 13 0 0 1-.025-.727c0-4.796 2.785-8.446 7.501-9.908q-.027-.45-.028-.9c0-4.782 3.243-11.058 8.673-13.28 5.778-2.368 11.897-1.187 16.363 3.156 1.558 1.506 2.666 3.447 3.417 5.136a6.57 6.57 0 0 1 4.17-1.495c3.095 0 6.347 2.214 6.93 7.137C64.82 28.525 68 32.137 68 37.366" />
          </g>
        </symbol>
        <filter id={`${uid}-f6`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.8929 3.0038 0.3032 0 -2.604" result="a" />
          <feFlood floodColor="#919394" />
          <feComposite in2="a" operator="in" />
        </filter>
        <symbol id={`${uid}-s8`} viewBox="0 0 80 80" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="80" height="80" fill="#8c4fff" />
            <path fill="#fff" d="M31.014 24c0-5.514 4.486-10 10-10s10 4.486 10 10v1h2v-1c0-6.617-5.383-12-12-12s-12 5.383-12 12v1h2zm7 26c0 1.654 1.346 3 3 3s3-1.346 3-3-1.346-3-3-3-3 1.346-3 3m-2 0c0-2.757 2.243-5 5-5s5 2.243 5 5a5.01 5.01 0 0 1-4 4.899V61h-2v-6.101a5.01 5.01 0 0 1-4-4.899m-11 16h32V40h-32zm28-28h6v30h-36V38h6v-6h2v6h20v-6h2zm14.414-9-6.707 6.707-1.414-1.414L63.6 30H18.428l4.293 4.293-1.414 1.414L14.6 29l6.707-6.707 1.414 1.414L18.428 28H63.6l-4.293-4.293 1.414-1.414z" />
          </g>
        </symbol>
        <symbol id={`${uid}-s9`} viewBox="0 0 48 48" overflow="visible">
          <polygon fill="#8c4fff" fillRule="evenodd" points="24.279 2 5.779 12.68 6.778 14.413 23.278 4.886 23.278 22.938 7.328 22.938 11.485 18.781 10.072 17.367 3 24.437 10.072 31.507 11.485 30.094 6.328 24.937 23.278 24.937 23.278 42.992 6.778 33.466 5.779 35.198 24.279 45.879 42.778 35.198 41.779 33.466 25.279 42.992 25.279 24.937 41.999 24.937 37.402 29.536 38.816 30.949 45.886 23.879 38.816 16.808 37.402 18.222 42.116 22.938 25.279 22.938 25.279 4.886 41.779 14.413 42.778 12.68" />
        </symbol>
        <symbol id={`${uid}-s10`} viewBox="0 0 80 80" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="80" height="80" fill="#8c4fff" />
            <path fill="#fff" d="M43.23 64.784C44.303 63.866 45 62.519 45 61a5.01 5.01 0 0 0-4-4.899V47.93A8.01 8.01 0 0 0 47.93 41h8.171A5.01 5.01 0 0 0 61 45c1.519 0 2.866-.696 3.784-1.77-1.453 11.205-10.349 20.101-21.554 21.554M15.215 43.23C16.133 44.304 17.48 45 19 45a5.01 5.01 0 0 0 4.898-4h8.171A8.01 8.01 0 0 0 39 47.93v8.171c-2.28.465-4 2.484-4 4.899 0 1.519.696 2.866 1.769 3.784-11.205-1.453-20.101-10.349-21.554-21.554M22 40c0 1.654-1.346 3-3 3-1.655 0-3-1.346-3-3s1.345-3 3-3c1.654 0 3 1.346 3 3m14.769-24.784C35.696 16.134 35 17.48 35 19a5.01 5.01 0 0 0 4 4.899v8.17A8.01 8.01 0 0 0 32.069 39h-8.171A5.01 5.01 0 0 0 19 35c-1.52 0-2.867.696-3.785 1.769 1.453-11.205 10.349-20.1 21.554-21.553M40 16c1.654 0 3 1.346 3 3s-1.346 3-3 3c-1.655 0-3-1.346-3-3s1.345-3 3-3m0 30c-3.309 0-6-2.692-6-6 0-3.309 2.691-6 6-6 3.308 0 6 2.691 6 6 0 3.308-2.692 6-6 6m0 18c-1.655 0-3-1.346-3-3s1.345-3 3-3c1.654 0 3 1.346 3 3s-1.346 3-3 3m24-24c0 1.654-1.346 3-3 3-1.655 0-3-1.346-3-3s1.345-3 3-3c1.654 0 3 1.346 3 3m.784-3.231C63.866 35.696 62.519 35 61 35a5.01 5.01 0 0 0-4.899 4H47.93A8.01 8.01 0 0 0 41 32.069v-8.17A5.01 5.01 0 0 0 45 19c0-1.52-.697-2.866-1.77-3.784 11.205 1.453 20.101 10.348 21.554 21.553M40 13c-14.888 0-27 12.112-27 27s12.112 27 27 27 27-12.112 27-27-12.113-27-27-27" />
          </g>
        </symbol>
        <symbol id={`${uid}-s11`} viewBox="0 0 48 48" overflow="visible">
          <path fill="#8c4fff" fillRule="evenodd" d="M24 44C12.972 44 4 35.028 4 24S12.972 4 24 4s20 8.972 20 20-8.972 20-20 20m0-42C11.869 2 2 11.869 2 24s9.869 22 22 22 22-9.869 22-22S36.131 2 24 2m12 25c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3m-24 0c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3m24-8a5.01 5.01 0 0 0-4.899 4H16.899A5.01 5.01 0 0 0 12 19c-2.757 0-5 2.243-5 5s2.243 5 5 5a5.01 5.01 0 0 0 4.899-4h14.202A5.01 5.01 0 0 0 36 29c2.757 0 5-2.243 5-5s-2.243-5-5-5" />
        </symbol>
        <symbol id={`${uid}-s12`} viewBox="0 0 80 80" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="80" height="80" fill="#ed7100" />
            <path fill="#fff" d="m46.842 32.199-6.829 7.921 7.428 8.664h-2.772L38 41v8h-2V32h2v7l6.181-6.801zM64 48.234l-8-4.801V32a1 1 0 0 0-.496-.864L44 24.426v-9.674l20 11.819zm1.509-23.095-22-13a1 1 0 0 0-1.005-.008c-.311.178-.504.51-.504.869v12c0 .355.189.684.496.864L54 32.574V44a1 1 0 0 0 .486.857l10 6A.997.997 0 0 0 66 50V26a1 1 0 0 0-.491-.861M40.445 66.863 17 54.399V26.571l20-11.819v9.699l-10.537 6.705A1 1 0 0 0 26 32v17a1 1 0 0 0 .538.887l13.453 7c.289.15.633.151.921.001l13.052-6.744 8.032 4.82zm24.07-12.721-10-6a1 1 0 0 0-.974-.03l-13.086 6.761L28 48.393V32.549l10.537-6.705c.288-.184.463-.502.463-.844V13a1 1 0 0 0-1.509-.861l-22 13A1 1 0 0 0 15 26v29c0 .369.204.709.53.883l24.454 13a1 1 0 0 0 .953-.008l23.547-13a1.002 1.002 0 0 0 .031-1.733" />
          </g>
        </symbol>
        <symbol id={`${uid}-s13`} viewBox="0 0 80 80" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="80" height="80" fill="#ed7100" />
            <path fill="#fff" d="M27 53h25V28H27zm27-25h4v2h-4v4h4v2h-4v3h4v2h-4v4h4v2h-4v4h4v2h-4v.136A1.866 1.866 0 0 1 52.136 55H52v4h-2v-4h-4v4h-2v-4h-3v4h-2v-4h-4v4h-2v-4h-4v4h-2v-4h-.136A1.866 1.866 0 0 1 25 53.136V53h-3v-2h3v-4h-3v-2h3v-4h-3v-2h3v-3h-3v-2h3v-4h-3v-2h3v-.136c0-1.028.836-1.864 1.864-1.864H27v-4h2v4h4v-4h2v4h4v-4h2v4h3v-4h2v4h4v-4h2v4h.136c1.028 0 1.864.836 1.864 1.864zM41 65.876a.125.125 0 0 1-.124.124H14.124a.125.125 0 0 1-.124-.124V39.124c0-.068.056-.124.124-.124H20v-2h-5.876A2.127 2.127 0 0 0 12 39.124v26.752c0 1.171.953 2.124 2.124 2.124h26.752A2.127 2.127 0 0 0 43 65.876V61h-2zm27-51.752v26.752A2.127 2.127 0 0 1 65.876 43H60v-2h5.876a.125.125 0 0 0 .124-.124V14.124a.125.125 0 0 0-.124-.124H39.124a.125.125 0 0 0-.124.124V20h-2v-5.876c0-1.171.953-2.124 2.124-2.124h26.752c1.171 0 2.124.953 2.124 2.124" />
          </g>
        </symbol>
        <symbol id={`${uid}-s14`} viewBox="0 0 48 48" overflow="visible">
          <path fill="#8c4fff" fillRule="evenodd" d="M32.978 32.012c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3m-12-15c0-1.654 1.346-3 3-3s3 1.346 3 3-1.346 3-3 3-3-1.346-3-3m-6 15c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3m18-8c-.748 0-1.451.177-2.089.472l-3.172-4.187c.775-.881 1.261-2.022 1.261-3.285 0-2.757-2.243-5-5-5s-5 2.243-5 5c0 1.192.437 2.274 1.137 3.135l-3.22 4.25a5 5 0 0 0-1.917-.385c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5a4.98 4.98 0 0 0-1.429-3.488l3.113-4.108a4.9 4.9 0 0 0 2.316.596c.771 0 1.494-.19 2.147-.504l3.157 4.167a4.96 4.96 0 0 0-1.304 3.337c0 2.757 2.243 5 5 5s5-2.243 5-5-2.243-5-5-5m1.077 15.435c-4.663.837-8.595 3.294-10.062 4.305-1.468-1.011-5.401-3.468-10.064-4.305C11.6 39.028 4 37.17 4 30.821c0-2.653 1.004-4.382 2.067-6.213.998-1.719 2.029-3.496 2.029-5.928 0-3.663-2.025-6.296-3.155-7.48 1.154-1.403 3.693-4.501 5.086-6.283 2.121 1.933 4.568 2.985 6.992 2.985 2.7 0 4.941-1.065 6.974-3.333 2.031 2.268 4.272 3.333 6.972 3.333 2.424 0 4.871-1.052 6.992-2.985 1.393 1.782 3.932 4.88 5.086 6.283-1.129 1.184-3.155 3.817-3.155 7.48 0 2.432 1.031 4.209 2.029 5.928 1.063 1.831 2.067 3.56 2.067 6.213 0 6.349-7.6 8.207-9.929 8.626m9.592-15.843c-.943-1.626-1.759-3.03-1.759-4.924 0-3.998 3.119-6.595 3.149-6.619a1.003 1.003 0 0 0 .142-1.415c-.052-.062-5.144-6.233-6.307-7.828a1.002 1.002 0 0 0-1.539-.094c-1.917 2.05-4.178 3.178-6.368 3.178-2.416 0-4.321-1.082-6.178-3.51a1.002 1.002 0 0 0-1.588 0c-1.859 2.428-3.765 3.51-6.18 3.51-2.189 0-4.451-1.128-6.368-3.178a1 1 0 0 0-1.538.094c-1.163 1.595-6.256 7.766-6.308 7.828-.169.205-.248.47-.223.735.027.265.158.509.364.678.031.026 3.15 2.623 3.15 6.621 0 1.894-.815 3.298-1.759 4.924C3.242 25.491 2 27.63 2 30.821c0 5.332 4.328 9.292 11.576 10.594 5.313.954 9.763 4.328 9.808 4.362a1 1 0 0 0 1.217 0c.045-.034 4.495-3.408 9.808-4.362 7.248-1.302 11.575-5.262 11.575-10.594 0-3.191-1.241-5.33-2.337-7.217" />
        </symbol>
      </defs>
      <rect width="1338" height="1812" fill={`url(#${uid}-bg)`} />
      <rect width="1338" height="1812" fill={`url(#${uid}-grid)`} />
      <rect width="1338" height="1812" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          HYBRID NETWORK ON AWS
        </tspan>
      </text>
      <text fontSize="11.5" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65.25">
          A corporate data center reaches VPCs in three accounts in us-east-1 through one Transit Gateway, over Direct Connect with Site-to-Site VPN as backup
        </tspan>
      </text>
      <g id={`${uid}-g-dc`}>
        <rect x="543" y="96" width="203" height="316" rx="3.04" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="543" y="96" width="203" height="316" rx="3.04" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.268;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-cloud`}>
        <rect x="28" y="745" width="1282" height="956" rx="3.04" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="28" y="745" width="1282" height="956" rx="3.04" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.268;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-network`}>
        <rect x="444" y="803" width="386" height="403" rx="3.04" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="444" y="803" width="386" height="403" rx="3.04" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.268;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-prod`}>
        <rect x="48" y="1285" width="356" height="396" rx="3.04" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="48" y="1285" width="356" height="396" rx="3.04" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.268;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-dev`}>
        <rect x="444" y="1285" width="386" height="379" rx="3.04" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="444" y="1285" width="386" height="379" rx="3.04" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.268;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-shared`}>
        <rect x="870" y="1285" width="420" height="396" rx="3.04" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="870" y="1285" width="420" height="396" rx="3.04" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.268;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-prod-vpc`}>
        <rect x="73" y="1343" width="306" height="318" rx="3.04" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="73" y="1343" width="306" height="318" rx="3.04" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.268;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-dev-vpc`}>
        <rect x="481" y="1343" width="312" height="301" rx="3.04" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="481" y="1343" width="312" height="301" rx="3.04" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.268;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-shared-vpc`}>
        <rect x="924" y="1343" width="312" height="318" rx="3.04" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="924" y="1343" width="312" height="318" rx="3.04" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.268;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M645 225 L645 289" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M624 392 L624 489.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="2.74" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M624 577.5 L624 861" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="2.74" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M623.5 949 L623.5 1098" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="2.74" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M665 392 L665 429 Q665 437 673 437 L772 437 Q780 437 780 445 L780 481" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="6.08 4.56" />
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M780 586 L780 683 Q780 691 772 691 L729 691 Q721 691 721 699 L721 727 Q721 735 720.94 743 L720.56 790 Q720.5 798 720.5 806 L720.5 1046 Q720.5 1054 712.5 1054 L656.5 1054 Q648.5 1054 648.5 1062 L648.5 1098" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="6.08 4.56" />
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M617 1186 L617 1223 Q617 1231 609 1231 L235 1231 Q227 1231 227 1239 L227 1401" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e8`}>
        <path d="M226.5 1472 L226.5 1536" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e9`}>
        <path d="M636.5 1186 L636.5 1401" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e10`}>
        <path d="M637 1472 L637 1536" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e11`}>
        <path d="M656 1186 L656 1223 Q656 1231 664 1231 L1073 1231 Q1081 1231 1081 1239 L1081 1401" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e12`}>
        <path d="M1080.5 1472 L1080.5 1536" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-el-e3`}>
        <rect x="629" y="650" width="68" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.52" />
        <text fontSize="8.25" fontWeight="700" letterSpacing="0.5" fill="#979899" textAnchor="middle">
          <tspan x="663.25" y="663.43">
            TRANSIT VIF
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e4`}>
        <rect x="628.5" y="1013" width="74" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.52" />
        <text fontSize="8.25" fontWeight="700" letterSpacing="0.5" fill="#979899" textAnchor="middle">
          <tspan x="665.75" y="1026.43">
            ASSOCIATION
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e6`}>
        <rect x="785" y="650" width="101" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.52" />
        <text fontSize="8.25" fontWeight="700" letterSpacing="0.5" fill="#979899" textAnchor="middle">
          <tspan x="835.75" y="663.43">
            VPN ATTACHMENT
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-dc`}>
        <rect x="543" y="96" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s1`} x="548.38" y="101.38" width="29.24" height="29.24" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <rect x="543" y="96" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s1`} x="548.38" y="101.38" width="29.24" height="29.24" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.268;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.95" fill="#649adb">
          <tspan x="591" y="119.37">
            CORPORATE DATA CENTER
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-cloud`}>
        <rect x="28" y="745" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s2`} x="33.38" y="750.38" width="29.24" height="29.24" filter={`url(#${uid}-f3)`} />
        <g opacity="0">
          <rect x="28" y="745" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s2`} x="33.38" y="750.38" width="29.24" height="29.24" filter={`url(#${uid}-f4)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.268;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="76" y="768.91">
            AWS CLOUD
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-network`}>
        <rect x="444" y="803" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s3`} x="449.38" y="808.38" width="29.24" height="29.24" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <rect x="444" y="803" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s3`} x="449.38" y="808.38" width="29.24" height="29.24" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.268;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="492" y="826.91">
            NETWORK ACCOUNT
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-prod`}>
        <rect x="48" y="1285" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s3`} x="53.38" y="1290.38" width="29.24" height="29.24" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <rect x="48" y="1285" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s3`} x="53.38" y="1290.38" width="29.24" height="29.24" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.268;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <rect x="92" y="1295.55" width="145.5" height="18.9" rx="3" fill="#0b1012" />
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="96" y="1308.91">
            PRODUCTION ACCOUNT
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-dev`}>
        <rect x="444" y="1285" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s3`} x="449.38" y="1290.38" width="29.24" height="29.24" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <rect x="444" y="1285" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s3`} x="449.38" y="1290.38" width="29.24" height="29.24" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.268;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <rect x="488" y="1295.55" width="153.2" height="18.9" rx="3" fill="#0b1012" />
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="492" y="1308.91">
            DEVELOPMENT ACCOUNT
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-shared`}>
        <rect x="870" y="1285" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s3`} x="875.38" y="1290.38" width="29.24" height="29.24" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <rect x="870" y="1285" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s3`} x="875.38" y="1290.38" width="29.24" height="29.24" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.268;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <rect x="914" y="1295.55" width="184" height="18.9" rx="3" fill="#0b1012" />
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="918" y="1308.91">
            SHARED SERVICES ACCOUNT
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-prod-vpc`}>
        <rect x="73" y="1343" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s4`} x="78.38" y="1348.38" width="29.24" height="29.24" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <rect x="73" y="1343" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s4`} x="78.38" y="1348.38" width="29.24" height="29.24" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.268;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <rect x="117" y="1353.55" width="122.4" height="18.9" rx="3" fill="#0b1012" />
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="121" y="1366.91">
            VPC 10.1.0.0/16
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-dev-vpc`}>
        <rect x="481" y="1343" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s4`} x="486.38" y="1348.38" width="29.24" height="29.24" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <rect x="481" y="1343" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s4`} x="486.38" y="1348.38" width="29.24" height="29.24" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.268;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <rect x="525" y="1353.55" width="122.4" height="18.9" rx="3" fill="#0b1012" />
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="529" y="1366.91">
            VPC 10.2.0.0/16
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-shared-vpc`}>
        <rect x="924" y="1343" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s4`} x="929.38" y="1348.38" width="29.24" height="29.24" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <rect x="924" y="1343" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s4`} x="929.38" y="1348.38" width="29.24" height="29.24" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.177;0.268;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <rect x="968" y="1353.55" width="122.4" height="18.9" rx="3" fill="#0b1012" />
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="972" y="1366.91">
            VPC 10.3.0.0/16
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-servers`}>
        <rect x="620.5" y="154" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="620.5" y="154" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3539;0.4449;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="630.1" y="163.6" width="28.8" height="28.8" />
        <text fontSize="10.25" fontWeight="700" letterSpacing="0.82" fill="#9d9fa0" textAnchor="middle">
          <tspan x="644.91" y="220.09">
            APPLICATION SERVERS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-router`}>
        <rect x="620.5" y="289" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="620.5" y="289" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3539;0.4449;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="630.58" y="299.08" width="27.84" height="27.84" filter={`url(#${uid}-f5)`} />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="644.94" y="355.35">
            CUSTOMER ROUTER
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="644.49" y="372.7">
            BGP ASN 65000, VPN
          </tspan>
          <tspan x="644.49" y="387.7">
            customer gateway
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-dx`}>
        <rect x="599.5" y="489.5" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="599.5" y="489.5" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3539;0.4449;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="602.86" y="492.86" width="41.28" height="41.28" filter={`url(#${uid}-f6)`} />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="623.95" y="555.86">
            AWS DIRECT CONNECT
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="623.5" y="573.2">
            10 Gbps primary link
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-vpn`}>
        <rect x="755.5" y="481" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="755.5" y="481" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3539;0.4449;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="758.86" y="484.36" width="41.28" height="41.28" filter={`url(#${uid}-f6)`} />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="779.95" y="547.36">
            AWS SITE-TO-SITE
          </tspan>
          <tspan x="779.95" y="564.26">
            VPN
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="779.5" y="581.6">
            IPsec backup link
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-dxgw`}>
        <rect x="599" y="861" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="599" y="861" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3539;0.4449;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="609.08" y="871.08" width="27.84" height="27.84" filter={`url(#${uid}-f5)`} />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="623.44" y="927.36">
            DIRECT CONNECT
          </tspan>
          <tspan x="623.44" y="944.26">
            GATEWAY
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-tgw`}>
        <rect x="612" y="1098" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="612" y="1098" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3539;0.4449;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s10`} x="615.36" y="1101.36" width="41.28" height="41.28" filter={`url(#${uid}-f6)`} />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="636.45" y="1164.36">
            AWS TRANSIT
          </tspan>
          <tspan x="636.45" y="1181.25">
            GATEWAY
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-prod-att`}>
        <rect x="202.5" y="1401" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="202.5" y="1401" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3539;0.4449;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s11`} x="212.58" y="1411.08" width="27.84" height="27.84" filter={`url(#${uid}-f5)`} />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="226.94" y="1467.36">
            TGW ATTACHMENT
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-prod-app`}>
        <rect x="202" y="1536" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="202" y="1536" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3539;0.4449;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s12`} x="205.36" y="1539.36" width="41.28" height="41.28" filter={`url(#${uid}-f6)`} />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="226.44" y="1602.36">
            AMAZON ELASTIC
          </tspan>
          <tspan x="226.44" y="1619.26">
            KUBERNETES SERVICE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="226" y="1636.6">
            Production workloads
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-dev-att`}>
        <rect x="613" y="1401" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="613" y="1401" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3539;0.4449;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s11`} x="623.08" y="1411.08" width="27.84" height="27.84" filter={`url(#${uid}-f5)`} />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="637.44" y="1467.36">
            TGW ATTACHMENT
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-dev-app`}>
        <rect x="613" y="1536" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="613" y="1536" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3539;0.4449;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s13`} x="616.36" y="1539.36" width="41.28" height="41.28" filter={`url(#${uid}-f6)`} />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="637.45" y="1602.36">
            AMAZON EC2
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="637" y="1619.7">
            Development hosts
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-shared-att`}>
        <rect x="1056.5" y="1401" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="1056.5" y="1401" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3539;0.4449;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s11`} x="1066.58" y="1411.08" width="27.84" height="27.84" filter={`url(#${uid}-f5)`} />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="1080.94" y="1467.36">
            TGW ATTACHMENT
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-dns`}>
        <rect x="1056" y="1536" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.52" />
        <g opacity="0">
          <rect x="1056" y="1536" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3539;0.4449;0.849;0.94;1" dur="1.978s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s14`} x="1066.08" y="1546.08" width="27.84" height="27.84" filter={`url(#${uid}-f5)`} />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="1080.45" y="1602.36">
            AMAZON ROUTE 53
          </tspan>
          <tspan x="1080.45" y="1619.26">
            RESOLVER
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="1080" y="1636.6">
            Hybrid DNS endpoints
          </tspan>
        </text>
      </g>
      <g id={`${uid}-legend`}>
        <rect x="1058" y="1713" width="252" height="71" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.52" />
        <path d="M1068 1730.5 H1096" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.52" strokeLinecap="round" />
        <text fontSize="8.25" fontWeight="700" letterSpacing="0.5" fill="#9d9fa0">
          <tspan x="1104" y="1733.43">
            ATTACHMENT OR LOCAL LINK (BOTH WAYS)
          </tspan>
        </text>
        <path d="M1068 1748.5 H1096" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.52" strokeLinecap="round" strokeDasharray="6.08 4.56" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="1104" y="1751.87">
            VPN BACKUP
          </tspan>
        </text>
        <path d="M1068 1766.5 H1096" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="2.74" strokeLinecap="round" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="1104" y="1769.87">
            DIRECT CONNECT PRIMARY
          </tspan>
        </text>
      </g>
    </svg>
  );
}
