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

export default function ThreeTierWebApplicationOnAWS(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="1112" height="1598" viewBox="0 0 1112 1598" 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`}>
        Three-tier web application on AWS
      </title>
      <desc id={`${uid}-sdw-desc`}>
        Three-tier web application on AWS. 11 components in 12 groups. Connections: Users to Internet gateway; Internet gateway to Application Load Balancer; Application Load Balancer to Web server; Application Load Balancer to Web server; Internet gateway to NAT gateway; Internet gateway to NAT gateway; NAT gateway to Web server; NAT gateway to Web server; Web server to Amazon Aurora; Web server to Amazon ElastiCache; Web server to Amazon Aurora; Web server to Amazon ElastiCache; Web server to Data subnet (writes).
      </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="25.27" height="25.27" patternUnits="userSpaceOnUse">
          <path d="M0 0.63H25.27M0.63 0V25.27" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1.26" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="337.5" cy="622" r="747.58">
          <stop offset="0" stopColor="#60a5fa" stopOpacity="0.12" />
          <stop offset="1" stopColor="#60a5fa" stopOpacity="0" />
        </radialGradient>
        <mask id={`${uid}-m-e7`} maskUnits="userSpaceOnUse" x="0" y="0" width="1112" height="1598">
          <path d="M248 925.63 L248 962 Q248 970 256 970 L358 970 Q366 970 366 978 L366 1077" fill="none" stroke="#ffffff" strokeWidth="9.1" pathLength="1" strokeDasharray="1 1" strokeDashoffset="-1">
            <animate attributeName="stroke-dashoffset" values="-1;-1;0;0" keyTimes="0;0.6461;0.7543;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.175s" repeatCount="indefinite" />
          </path>
        </mask>
        <symbol id={`${uid}-s1`} 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}-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.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}-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.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}-s2`} viewBox="0 0 40 40" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="40" height="40" fill="#00a4a6" />
            <path fill="#fff" d="M14 20.026v-9h15.293l-4.147 4.146a.5.5 0 0 0 0 .708l4.147 4.146zm12.207-4.5 4.647-4.646a.5.5 0 0 0-.354-.854H14V8.97A1.528 1.528 0 0 0 13.495 6c-.845 0-1.532.687-1.532 1.531 0 .67.435 1.235 1.037 1.442v24.053h-3v1h7v-1h-3v-12h16.5a.5.5 0 0 0 .354-.854z" />
          </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.8929 3.0038 0.3032 0 -2.604" result="a" />
          <feFlood floodColor="#b6b7b8" />
          <feComposite in2="a" 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.8929 3.0038 0.3032 0 -2.604" result="a" />
          <feFlood floodColor="#0b1012" />
          <feComposite in2="a" 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="#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}-s4`} viewBox="0 0 40 40" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="40" height="40" fill="#7aa116" />
            <path fill="#fff" d="M19.536 22.049c1.106 0 2.006.899 2.006 2.005s-.9 2.006-2.006 2.006-2.006-.9-2.006-2.006.9-2.005 2.006-2.005m-.524 4.958v3.494h1v-3.489a3 3 0 0 0 2.53-2.958 3.01 3.01 0 0 0-3.006-3.005 3.01 3.01 0 0 0-3.006 3.005 3.006 3.006 0 0 0 2.482 2.953M10 33.014h19.012V18H10zm4.046-20.53A5.49 5.49 0 0 1 19.529 7a5.49 5.49 0 0 1 5.483 5.484V17H14.046zM29.512 17h-3.5v-4.516A6.49 6.49 0 0 0 19.529 6a6.49 6.49 0 0 0-6.483 6.484V17H9.5a.5.5 0 0 0-.5.5v16.014a.5.5 0 0 0 .5.5h20.012a.5.5 0 0 0 .5-.5V17.5a.5.5 0 0 0-.5-.5" />
          </g>
        </symbol>
        <symbol id={`${uid}-s5`} viewBox="0 0 40 40" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="40" height="40" fill="#00a4a6" />
            <path fill="#fff" d="M19.536 22.049c1.106 0 2.006.899 2.006 2.005s-.9 2.006-2.006 2.006-2.006-.9-2.006-2.006.9-2.005 2.006-2.005m-.524 4.958v3.494h1v-3.489a3 3 0 0 0 2.53-2.958 3.01 3.01 0 0 0-3.006-3.005 3.01 3.01 0 0 0-3.006 3.005 3.006 3.006 0 0 0 2.482 2.953M10 33.014h19.012V18H10zm4.046-20.53A5.49 5.49 0 0 1 19.529 7a5.49 5.49 0 0 1 5.483 5.484V17H14.046zM29.512 17h-3.5v-4.516A6.49 6.49 0 0 0 19.529 6a6.49 6.49 0 0 0-6.483 6.484V17H9.5a.5.5 0 0 0-.5.5v16.014a.5.5 0 0 0 .5.5h20.012a.5.5 0 0 0 .5-.5V17.5a.5.5 0 0 0-.5-.5" />
          </g>
        </symbol>
        <symbol id={`${uid}-s6`} viewBox="0 0 40 40" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="40" height="40" fill="#ed7100" />
            <path fill="#fff" d="M18.021 19.495a.5.5 0 0 0-.188-.39l-2.954-2.954-.707.707 2.138 2.137H7v1h9.314l-2.142 2.142.707.707 2.969-2.969a.5.5 0 0 0 .173-.38m15.965-.5h-9.311l2.138-2.137-.707-.707-2.969 2.97a.5.5 0 0 0 .016.77l2.953 2.953.707-.707-2.142-2.142h9.315zm-12.99 12.33V22.01h-1v9.31l-2.138-2.137-.707.707 2.969 2.967a.5.5 0 0 0 .773-.016l2.951-2.95-.707-.708zM17.858 9.836l-.707-.707 2.952-2.95c.182-.233.58-.24.774-.018l2.967 2.968-.707.707-2.141-2.14v9.313h-1V7.7z" />
          </g>
        </symbol>
        <symbol id={`${uid}-s7`} viewBox="0 0 48 48" overflow="visible">
          <g fill="#919394">
            <path fill="#919394" fillRule="evenodd" d="M28.639 9.286c0-2.915 2.413-5.286 5.38-5.286s5.378 2.371 5.378 5.286-2.412 5.286-5.378 5.286-5.38-2.371-5.38-5.286m11.524 7.048a11.7 11.7 0 0 0-2.035-1.001c1.97-1.31 3.269-3.531 3.269-6.047 0-4.017-3.31-7.286-7.378-7.286-4.069 0-7.38 3.269-7.38 7.286 0 2.51 1.293 4.728 3.256 6.039a11.9 11.9 0 0 0-3.546 2.1l1.303 1.518A9.77 9.77 0 0 1 34 16.572c1.802 0 3.569.505 5.109 1.461 2.74 1.702 4.538 4.692 4.844 7.967H34v2h11a1 1 0 0 0 1-1c0-4.343-2.236-8.43-5.837-10.666M8.639 9.286C8.639 6.371 11.052 4 14.019 4s5.378 2.371 5.378 5.286-2.412 5.286-5.378 5.286-5.38-2.371-5.38-5.286M14 26H4.046C4.53 20.717 8.81 16.572 14 16.572c1.802 0 3.569.505 5.109 1.461.432.269.849.575 1.24.91l1.303-1.517a11.7 11.7 0 0 0-3.524-2.093c1.97-1.31 3.269-3.531 3.269-6.047 0-4.017-3.31-7.286-7.378-7.286-4.069 0-7.38 3.269-7.38 7.286 0 2.515 1.298 4.737 3.268 6.046C5.302 17.071 2 21.638 2 27a1 1 0 0 0 1 1h11zm.046 18c.484-5.283 4.764-9.428 9.954-9.428 1.802 0 3.569.505 5.109 1.461 2.74 1.702 4.538 4.692 4.844 7.967zm4.593-16.714c0-2.915 2.413-5.286 5.38-5.286s5.378 2.371 5.378 5.286-2.412 5.286-5.378 5.286-5.38-2.371-5.38-5.286m11.524 7.048a11.7 11.7 0 0 0-2.035-1.001c1.97-1.31 3.269-3.531 3.269-6.047 0-4.017-3.31-7.286-7.378-7.286-4.069 0-7.38 3.269-7.38 7.286 0 2.515 1.298 4.737 3.268 6.046C15.302 35.071 12 39.638 12 45a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1c0-4.343-2.236-8.43-5.837-10.666" />
          </g>
        </symbol>
        <symbol id={`${uid}-s8`} viewBox="0 0 48 48" overflow="visible">
          <path fill="#8c4fff" fillRule="evenodd" d="M33.431 35.178h-1.498V17.502a1 1 0 0 0-.589-.911l-.092-.042c-2.009-.907-4.088-1.846-7.076-1.846-3.123 0-5.415 1.009-7.68 2.134a1 1 0 0 0-.556.896v17.445h-1.463V16.312c2.434-1.98 5.943-3.107 9.71-3.107 3.5 0 6.838.997 9.244 2.748zm-9.245-23.973c-4.425 0-8.569 1.419-11.37 3.895a1 1 0 0 0-.339.749v20.329a1 1 0 0 0 1 1h3.463a1 1 0 0 0 1-1V18.356c1.92-.927 3.78-1.653 6.236-1.653 2.335 0 4.033.675 5.757 1.446v18.029a1 1 0 0 0 1 1h3.498a1 1 0 0 0 1-1v-20.72c0-.304-.139-.592-.378-.783-2.774-2.205-6.735-3.47-10.867-3.47m-.232 32.704C12.952 43.909 4 34.957 4 23.954S12.952 4 23.954 4 43.91 12.95 43.91 23.954c0 11.003-8.952 19.955-19.955 19.955m0-41.91C11.848 2 2 11.85 2 23.955 2 36.062 11.85 45.91 23.955 45.91c12.106 0 21.955-9.848 21.955-21.955S36.06 2 23.954 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}-s9`} viewBox="0 0 48 48" overflow="visible">
          <path fill="#8c4fff" fillRule="evenodd" d="M33.69 34.375h2.345V32H33.69zm-6.939 0h2.375V32h-2.375zm-7.875 0h2.375V32h-2.375zm-6.91 0h2.285V32h-2.285zm6.035-17.5h12V11h-12zM37.035 30h-1.534v-3.375a1 1 0 0 0-1-1h-2.5V22.25a1 1 0 0 0-1-1h-6v-2.375h6a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1h-14a1 1 0 0 0-1 1v7.875a1 1 0 0 0 1 1h6v2.375h-6a1 1 0 0 0-1 1v3.375h-2.5a1 1 0 0 0-1 1V30h-1.536a1 1 0 0 0-1 1v4.375a1 1 0 0 0 1 1h4.286a1 1 0 0 0 1-1V31a1 1 0 0 0-1-1h-.75v-2.375h4.125V30h-.75a1 1 0 0 0-1 1v4.375a1 1 0 0 0 1 1h4.375a1 1 0 0 0 1-1V31a1 1 0 0 0-1-1h-1.625v-3.375a1 1 0 0 0-1-1h-1.625V23.25h12v2.375h-1.625a1 1 0 0 0-1 1V30h-1.625a1 1 0 0 0-1 1v4.375a1 1 0 0 0 1 1h4.375a1 1 0 0 0 1-1V31a1 1 0 0 0-1-1h-.75v-2.375h4.125V30h-.811a1 1 0 0 0-1 1v4.375a1 1 0 0 0 1 1h4.345a1 1 0 0 0 1-1V31a1 1 0 0 0-1-1M24.001 44C12.972 44 4 35.028 4 24S12.972 4 24.001 4c11.028 0 20 8.972 20 20s-8.972 20-20 20m0-42C11.869 2 2 11.869 2 24s9.869 22 22.001 22c12.13 0 22-9.869 22-22s-9.87-22-22-22" />
        </symbol>
        <symbol id={`${uid}-s10`} viewBox="0 0 48 48" overflow="visible">
          <path fill="#8c4fff" fillRule="evenodd" d="M13.626 35.92v-2.837l1.774 1.419zm-.375-5.7a1.001 1.001 0 0 0-1.625.781v7a1.001 1.001 0 0 0 1.625.782l4.374-3.5a1 1 0 0 0 0-1.562zm24-3.383v-3.922l1.962 1.96zm4.083-2.668-4.376-4.375a1 1 0 0 0-1.706.707v3.375h-7.627v-9.5a1 1 0 0 0-1-1h-7.693v2h6.694v8.5H18.75v2h6.875v8.5h-6.693v2h7.694a1 1 0 0 0 1-1v-9.5h7.625v3.376a1 1 0 0 0 1.708.707l4.374-4.376a1 1 0 0 0 0-1.414m-27.708 2.127v-2.84l1.774 1.42zm-.375-5.701a1 1 0 0 0-1.625.78v7.002a1.001 1.001 0 0 0 1.625.78l4.374-3.5a1 1 0 0 0 0-1.562zm.375-4.8v-2.838l1.774 1.419zm-.375-5.7a1.001 1.001 0 0 0-1.625.781v7a1.001 1.001 0 0 0 1.625.78l4.374-3.5a1 1 0 0 0 0-1.561zM24 44.003C12.971 44.003 4 35.03 4 24S12.973 4 24 4c11.03 0 20.002 8.973 20.002 20 0 11.03-8.973 20.003-20.002 20.003M24 2C11.868 2 2 11.869 2 24c0 12.133 9.869 22.003 22 22.003 12.133 0 22.002-9.87 22.002-22.002S36.133 2 24 2" />
        </symbol>
        <symbol id={`${uid}-s11`} viewBox="0 0 48 48" overflow="visible">
          <path fill="#ed7100" fillRule="evenodd" d="M9 39h30V9H9zm37-26v-2h-5V8a1 1 0 0 0-1-1h-3V2h-2v5h-4V2h-2v5h-4V2h-2v5h-4V2h-2v5h-4V2h-2v5H8a1 1 0 0 0-1 1v3H2v2h5v4H2v2h5v4H2v2h5v4H2v2h5v4H2v2h5v3a1 1 0 0 0 1 1h3v5h2v-5h4v5h2v-5h4v5h2v-5h4v5h2v-5h4v5h2v-5h3a1 1 0 0 0 1-1v-3h5v-2h-5v-4h5v-2h-5v-4h5v-2h-5v-4h5v-2h-5v-4z" />
        </symbol>
        <symbol id={`${uid}-s12`} viewBox="0 0 48 48" overflow="visible">
          <path fill="#c925d1" fillRule="evenodd" d="M43.954 41.606v-2.717c-1.793.938-4.45 1.372-6.866 1.372-2.433 0-5.08-.436-6.866-1.372v2.717c0 .807 2.673 2.349 6.866 2.349s6.866-1.542 6.866-2.349M30.222 24.415c0 .615 2.336 2.059 6.866 2.059s6.866-1.444 6.866-2.059-2.336-2.06-6.866-2.06-6.866 1.444-6.866 2.06m13.732 2.655c-1.711.925-4.294 1.404-6.866 1.404s-5.155-.479-6.866-1.404v3.262c.538.815 3.092 1.872 6.866 1.872 3.499 0 6.134-.931 6.835-1.806.013-.017.019-.032.03-.048zm-13.732 9.319c.536.817 3.089 1.872 6.866 1.872 3.9 0 6.338-1.085 6.866-1.867v-3.575c-1.638.863-4.1 1.385-6.866 1.385-2.431 0-5.078-.437-6.866-1.372zm15.724-12.048h.008v17.265c0 2.438-3.895 4.349-8.866 4.349-4.972 0-8.866-1.911-8.866-4.349V24.341h.007c.084-2.616 4.495-3.986 8.859-3.986s8.775 1.37 8.858 3.986M27.42 18.695a1.4 1.4 0 0 0-.432-.058q-.24 0-.367.153-.13.154-.13.445 0 .248.105.394a.32.32 0 0 0 .277.145q.273 0 .547-.265zm1.043 1.768h-.877l-.1-.381a1.05 1.05 0 0 1-.405.352 1.2 1.2 0 0 1-.54.138q-.512 0-.811-.337-.299-.335-.298-.926 0-.622.365-.984.363-.36.985-.361.256 0 .638.1v-.383q0-.43-.113-.584-.11-.154-.417-.154-.499 0-1.217.266v-.756q.24-.158.629-.249.388-.092.795-.092.72 0 1.043.328t.323 1.051zm-4.58-3.097q.356-.2.755-.199.206 0 .438.042v-1.005a1.4 1.4 0 0 0-.265-.025q-.273 0-.518.141a1.9 1.9 0 0 0-.492.448l-.125-.548h-.927v4.243h1.134zm-4.223.98q0 .707.137 1.034.136.328.442.328.307 0 .443-.328.137-.327.137-1.034t-.137-1.038q-.137-.333-.443-.332-.306 0-.442.332-.137.331-.137 1.038m-.687 1.644q-.448-.58-.45-1.644.002-1.07.45-1.652.446-.582 1.266-.582t1.267.582.448 1.652q0 1.064-.448 1.644-.447.582-1.267.582t-1.266-.582m-1.972-2.624q.356-.2.754-.199.208 0 .439.042v-1.005a1.4 1.4 0 0 0-.265-.025q-.272 0-.518.141a1.9 1.9 0 0 0-.492.448l-.124-.548h-.928v4.243h1.134zm-5.3-1.146v3.089q0 .614.24.938.24.325.704.325.588 0 1.226-.49l.09.381h.929V16.22h-1.134v3.297q-.274.192-.523.191-.214 0-.306-.174-.09-.174-.091-.582V16.22zm-2.27 2.043-.521-2.384-.505 2.384zM9.6 14.71l1.582 5.753H9.905l-.298-1.37H8.232l-.29 1.37H6.725l1.59-5.753zm22.89-2.55V9.046q0-.606-.252-.922-.255-.315-.733-.315-.605 0-1.268.49l-.091-.382h-.926v4.243h1.133V8.872q.307-.2.564-.2.24 0 .339.166t.1.532v2.79zm-6.361-2.117q0 .705.138 1.034.136.327.443.327.305 0 .442-.327.136-.329.137-1.034 0-.707-.137-1.038-.136-.333-.442-.333-.307 0-.443.333-.138.332-.138 1.038m-.687 1.644q-.447-.581-.447-1.644 0-1.072.447-1.653.447-.582 1.268-.581.82 0 1.266.581.448.581.448 1.653 0 1.063-.448 1.644-.446.58-1.266.581-.82 0-1.268-.581m-.961-.399h-1.747l1.714-2.566v-.805h-2.84v.872h1.649l-1.715 2.566v.805h2.939zm-5.59-.357a.67.67 0 0 0 .104.395.33.33 0 0 0 .277.145q.274 0 .547-.265v-.815a1.4 1.4 0 0 0-.43-.058q-.241 0-.37.154-.127.154-.127.444m.05 1.337q-.512 0-.811-.336-.299-.337-.298-.927-.001-.622.364-.983.364-.362.987-.362.254 0 .636.1v-.382q0-.431-.111-.585t-.418-.153q-.497 0-1.218.265v-.756q.24-.157.629-.249.39-.091.795-.091.721 0 1.043.328.325.327.324 1.051v2.972h-.878l-.1-.382a1.05 1.05 0 0 1-.405.352 1.16 1.16 0 0 1-.54.138m-3.142-3.43q.095.167.095.524v2.798h1.134V9.046q0-.599-.248-.918-.249-.319-.712-.319-.58 0-1.26.506-.24-.506-.828-.506-.578 0-1.242.49l-.091-.382h-.927v4.243h1.134V8.872q.307-.2.539-.2.223 0 .319.166.094.167.095.524v2.798h1.134V8.963a.5.5 0 0 0-.007-.091q.306-.2.545-.2.224 0 .32.166M9.433 9.959 8.91 7.576l-.505 2.383zm1.748 2.201H9.905l-.298-1.37H8.232l-.29 1.37H6.725l1.59-5.754h1.284zm34.773-4.398v12.719h-2V7.762A3.766 3.766 0 0 0 40.192 4H7.762A3.766 3.766 0 0 0 4 7.762v32.431a3.766 3.766 0 0 0 3.762 3.762h19.712v2H7.762A5.77 5.77 0 0 1 2 40.193V7.762A5.77 5.77 0 0 1 7.762 2h32.43a5.77 5.77 0 0 1 5.762 5.762" />
        </symbol>
        <symbol id={`${uid}-s13`} viewBox="0 0 48 48" overflow="visible">
          <path fill="#c925d1" fillRule="evenodd" d="M33.889 7.289h3.972v.883h-2.874v2.467h2.376v.882h-2.376v2.727h2.874v.883h-3.972zm-2.795 0h1.098v7.842h-1.098v-3.565h-2.851v3.565h-1.098V7.289h1.098v3.384h2.85zm-6.643 6.993q.51 0 1.472-.283v.894a3.66 3.66 0 0 1-1.596.351q-3.032 0-3.032-4.006 0-1.979.78-3.01.781-1.029 2.297-1.029.725 0 1.46.306v.893q-.758-.237-1.335-.237-1.064 0-1.556.695-.492.696-.492 2.236v.271q0 1.539.475 2.229.476.69 1.527.69m-7.501-2.104.973-3.836.973 3.836zm.408-4.889-2.264 7.842h1.12l.532-2.116h2.366l.543 2.116h1.154l-2.264-7.842zm-4.21 6.993q.51 0 1.47-.283v.894a3.66 3.66 0 0 1-1.594.351q-3.033 0-3.032-4.006 0-1.979.78-3.01.78-1.029 2.297-1.029.723 0 1.46.306v.893q-.759-.237-1.335-.237-1.066 0-1.557.695-.492.696-.492 2.236v.271q0 1.539.475 2.229.477.69 1.528.69m30.63 25.049a4.45 4.45 0 0 1-4.447 4.447H8.449a4.453 4.453 0 0 1-4.45-4.447V8.448A4.453 4.453 0 0 1 8.45 4h30.88a4.453 4.453 0 0 1 4.448 4.448zM39.332 2H8.449a6.456 6.456 0 0 0-6.45 6.448v30.883a6.455 6.455 0 0 0 6.45 6.447H39.33a6.455 6.455 0 0 0 6.448-6.447V8.448A6.456 6.456 0 0 0 39.33 2" />
        </symbol>
      </defs>
      <rect width="1112" height="1598" fill={`url(#${uid}-bg)`} />
      <rect width="1112" height="1598" fill={`url(#${uid}-grid)`} />
      <rect width="1112" height="1598" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          THREE-TIER WEB APPLICATION ON AWS
        </tspan>
      </text>
      <text fontSize="11.5" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65.25">
          Load-balanced EC2 web tier across two Availability Zones, Aurora and ElastiCache in private subnets
        </tspan>
      </text>
      <g id={`${uid}-g-cloud`}>
        <rect x="28" y="246" width="1056" height="1259" rx="2.53" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="28" y="246" width="1056" height="1259" rx="2.53" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-region`}>
        <rect x="48" y="304" width="1016" height="1181" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" strokeDasharray="3.79 3.79" />
        <g opacity="0">
          <rect x="48" y="304" width="1016" height="1181" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.26" strokeDasharray="3.79 3.79" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-vpc`}>
        <rect x="68" y="362" width="976" height="1103" rx="2.53" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="68" y="362" width="976" height="1103" rx="2.53" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-az-a`}>
        <rect x="88" y="749" width="448" height="696" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" strokeDasharray="3.79 3.79" />
        <g opacity="0">
          <rect x="88" y="749" width="448" height="696" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.26" strokeDasharray="3.79 3.79" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-az-b`}>
        <rect x="576" y="749" width="448" height="696" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" strokeDasharray="3.79 3.79" />
        <g opacity="0">
          <rect x="576" y="749" width="448" height="696" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.26" strokeDasharray="3.79 3.79" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-public-a`}>
        <rect x="108" y="796" width="280" height="149" rx="2.53" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="108" y="796" width="280" height="149" rx="2.53" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-public-b`}>
        <rect x="596" y="796" width="280" height="149" rx="2.53" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="596" y="796" width="280" height="149" rx="2.53" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-app-a`}>
        <rect x="187" y="1019" width="329" height="166" rx="2.53" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="187" y="1019" width="329" height="166" rx="2.53" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-app-b`}>
        <rect x="675" y="1019" width="329" height="166" rx="2.53" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="675" y="1019" width="329" height="166" rx="2.53" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-data-a`}>
        <rect x="187" y="1259" width="329" height="166" rx="2.53" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="187" y="1259" width="329" height="166" rx="2.53" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-data-b`}>
        <rect x="675" y="1259" width="329" height="166" rx="2.53" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="675" y="1259" width="329" height="166" rx="2.53" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-asg`}>
        <rect x="175" y="962" width="841" height="235" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" strokeDasharray="3.79 3.79" />
        <g opacity="0">
          <rect x="175" y="962" width="841" height="235" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.26" strokeDasharray="3.79 3.79" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M427 167 L427 419.37" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M421.95 412.42 L427 420 L432.05 412.42" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M427 167 L427 419.37" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.52" 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.2024;0.3038;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.175s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2024;0.2316;0.9;0.9291;1" dur="6.175s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M421.95 412.42 L427 420 L432.05 412.42" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3038;0.3329;0.9;0.9291;1" dur="6.175s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M427 491 L427 554.37" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M421.95 547.42 L427 555 L432.05 547.42" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M427 491 L427 554.37" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.52" 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.3426;0.4074;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.175s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3426;0.3718;0.9;0.9291;1" dur="6.175s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M421.95 547.42 L427 555 L432.05 547.42" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4074;0.4365;0.9;0.9291;1" dur="6.175s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M406 675 L406 1076.37" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M400.95 1069.42 L406 1077 L411.05 1069.42" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M406 675 L406 1076.37" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.52" 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.4463;0.6073;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.175s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4463;0.4754;0.9;0.9291;1" dur="6.175s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M400.95 1069.42 L406 1077 L411.05 1069.42" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6073;0.6364;0.9;0.9291;1" dur="6.175s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M447 675 L447 687 Q447 695 455 695 L886 695 Q894 695 894 703 L894 1076.37" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M888.95 1069.42 L894 1077 L899.05 1069.42" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M401 491.63 L401 503 Q401 511 393 511 L256 511 Q248 511 248 519 L248 854" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="5.05 3.79" />
        <path d="M406.05 498.58 L401 491 L395.95 498.58" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M453 491.63 L453 503 Q453 511 461 511 L728 511 Q736 511 736 519 L736 854" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="5.05 3.79" />
        <path d="M458.05 498.58 L453 491 L447.95 498.58" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M248 925.63 L248 962 Q248 970 256 970 L358 970 Q366 970 366 978 L366 1077" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="5.05 3.79" />
        <path d="M253.05 932.58 L248 925 L242.95 932.58" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
        <g mask={`url(#${uid}-m-e7)`} opacity="0">
          <path d="M248 925.63 L248 962 Q248 970 256 970 L358 970 Q366 970 366 978 L366 1077" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.52" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="5.05 3.79" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6461;0.6753;0.9;0.9291;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <g opacity="0">
          <path d="M253.05 932.58 L248 925 L242.95 932.58" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7543;0.7834;0.9;0.9291;1" dur="6.175s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e8`}>
        <path d="M736 925.63 L736 962 Q736 970 744 970 L846 970 Q854 970 854 978 L854 1077" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="5.05 3.79" />
        <path d="M741.05 932.58 L736 925 L730.95 932.58" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e9`}>
        <path d="M366 1165 L366 1202 Q366 1210 358 1210 L263 1210 Q255 1210 255 1218 L255 1316.37" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M249.95 1309.42 L255 1317 L260.05 1309.42" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e10`}>
        <path d="M406 1165 L406 1316.37" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M400.95 1309.42 L406 1317 L411.05 1309.42" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e11`}>
        <path d="M854 1165 L854 1202 Q854 1210 846 1210 L751 1210 Q743 1210 743 1218 L743 1316.37" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M737.95 1309.42 L743 1317 L748.05 1309.42" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e12`}>
        <path d="M894 1165 L894 1316.37" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M888.95 1309.42 L894 1317 L899.05 1309.42" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e13`}>
        <path d="M814 1121 L673 1121 Q665 1121 665 1129 L665 1334 Q665 1342 657 1342 L516.63 1342" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M523.58 1336.95 L516 1342 L523.58 1347.05" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.26" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-el-e13`}>
        <rect x="671" y="1221" width="46" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.26" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="694.29" y="1234.87">
            WRITES
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-cloud`}>
        <rect x="28" y="246" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s1`} x="33.38" y="251.38" width="29.24" height="29.24" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <rect x="28" y="246" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s1`} x="33.38" y="251.38" width="29.24" height="29.24" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="76" y="269.9">
            AWS CLOUD
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-region`}>
        <rect x="48" y="304" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s2`} x="53.38" y="309.38" width="29.24" height="29.24" filter={`url(#${uid}-f3)`} />
        <g opacity="0">
          <rect x="48" y="304" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s2`} x="53.38" y="309.38" width="29.24" height="29.24" filter={`url(#${uid}-f4)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="96" y="327.91">
            US-EAST-1
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-vpc`}>
        <rect x="68" y="362" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s3`} x="73.38" y="367.38" width="29.24" height="29.24" filter={`url(#${uid}-f3)`} />
        <g opacity="0">
          <rect x="68" y="362" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s3`} x="73.38" y="367.38" width="29.24" height="29.24" filter={`url(#${uid}-f4)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="116" y="385.91">
            VPC 10.0.0.0/16
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-az-a`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="254" y="767.36">
            AVAILABILITY ZONE A
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-az-b`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="742" y="767.36">
            AVAILABILITY ZONE B
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-public-a`}>
        <rect x="108" y="796" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s4`} x="113.38" y="801.38" width="29.24" height="29.24" filter={`url(#${uid}-f3)`} />
        <g opacity="0">
          <rect x="108" y="796" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s4`} x="113.38" y="801.38" width="29.24" height="29.24" filter={`url(#${uid}-f4)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <rect x="152" y="806.55" width="107" height="18.9" rx="3" fill="#0b1012" />
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="156" y="819.91">
            PUBLIC SUBNET
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-public-b`}>
        <rect x="596" y="796" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s4`} x="601.38" y="801.38" width="29.24" height="29.24" filter={`url(#${uid}-f3)`} />
        <g opacity="0">
          <rect x="596" y="796" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s4`} x="601.38" y="801.38" width="29.24" height="29.24" filter={`url(#${uid}-f4)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <rect x="640" y="806.55" width="107" height="18.9" rx="3" fill="#0b1012" />
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="644" y="819.91">
            PUBLIC SUBNET
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-app-a`}>
        <rect x="187" y="1019" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s5`} x="192.38" y="1024.38" width="29.24" height="29.24" filter={`url(#${uid}-f3)`} />
        <g opacity="0">
          <rect x="187" y="1019" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s5`} x="192.38" y="1024.38" width="29.24" height="29.24" filter={`url(#${uid}-f4)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="235" y="1042.91">
            WEB SUBNET
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-app-b`}>
        <rect x="675" y="1019" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s5`} x="680.38" y="1024.38" width="29.24" height="29.24" filter={`url(#${uid}-f3)`} />
        <g opacity="0">
          <rect x="675" y="1019" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s5`} x="680.38" y="1024.38" width="29.24" height="29.24" filter={`url(#${uid}-f4)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="723" y="1042.91">
            WEB SUBNET
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-data-a`}>
        <rect x="187" y="1259" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s5`} x="192.38" y="1264.38" width="29.24" height="29.24" filter={`url(#${uid}-f3)`} />
        <g opacity="0">
          <rect x="187" y="1259" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s5`} x="192.38" y="1264.38" width="29.24" height="29.24" filter={`url(#${uid}-f4)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="261" y="1282.91">
            DATA SUBNET
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-data-b`}>
        <rect x="675" y="1259" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s5`} x="680.38" y="1264.38" width="29.24" height="29.24" filter={`url(#${uid}-f3)`} />
        <g opacity="0">
          <rect x="675" y="1259" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s5`} x="680.38" y="1264.38" width="29.24" height="29.24" filter={`url(#${uid}-f4)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="749" y="1282.91">
            DATA SUBNET
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-asg`}>
        <rect x="575.5" y="942" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s6`} x="580.88" y="947.38" width="29.24" height="29.24" filter={`url(#${uid}-f3)`} />
        <g opacity="0">
          <rect x="575.5" y="942" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s6`} x="580.88" y="947.38" width="29.24" height="29.24" filter={`url(#${uid}-f4)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0567;0.0858;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="535.43" y="997.36">
            AUTO SCALING GROUP
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-users`}>
        <rect x="403" y="96" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="403" y="96" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1134;0.1425;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="412.6" y="105.6" width="28.8" height="28.8" />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="427.46" y="162.53">
            USERS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-igw`}>
        <rect x="403" y="420" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="403" y="420" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1134;0.1425;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="413.08" y="430.08" width="27.84" height="27.84" filter={`url(#${uid}-f5)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="427.43" y="486.27">
            INTERNET GATEWAY
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-alb`}>
        <rect x="402.5" y="555" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="402.5" y="555" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1134;0.1425;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="412.58" y="565.08" width="27.84" height="27.84" filter={`url(#${uid}-f5)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="426.96" y="621.53">
            APPLICATION LOAD
          </tspan>
          <tspan x="426.96" y="638.43">
            BALANCER
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="426.5" y="655.6">
            Public subnets in both
          </tspan>
          <tspan x="426.5" y="670.6">
            AZs
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-nat-a`}>
        <rect x="224" y="854" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="224" y="854" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1134;0.1425;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s10`} x="234.08" y="864.08" width="27.84" height="27.84" filter={`url(#${uid}-f5)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="248.46" y="920.53">
            NAT GATEWAY
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-nat-b`}>
        <rect x="712" y="854" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="712" y="854" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1134;0.1425;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s10`} x="722.08" y="864.08" width="27.84" height="27.84" filter={`url(#${uid}-f5)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="736.46" y="920.53">
            NAT GATEWAY
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-web-a`}>
        <rect x="362" y="1077" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="362" y="1077" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1134;0.1425;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s11`} x="372.08" y="1087.08" width="27.84" height="27.84" filter={`url(#${uid}-f5)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="386.46" y="1143.53">
            WEB SERVER
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="386" y="1160.7">
            Amazon EC2 instance
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-web-b`}>
        <rect x="850" y="1077" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="850" y="1077" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1134;0.1425;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s11`} x="860.08" y="1087.08" width="27.84" height="27.84" filter={`url(#${uid}-f5)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="874.46" y="1143.53">
            WEB SERVER
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="874" y="1160.7">
            Amazon EC2 instance
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-db-a`}>
        <rect x="231" y="1317" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="231" y="1317" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1134;0.1425;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s12`} x="241.08" y="1327.08" width="27.84" height="27.84" filter={`url(#${uid}-f5)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="255.47" y="1383.53">
            AMAZON AURORA
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="255.01" y="1400.7">
            Primary (writer)
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-db-b`}>
        <rect x="719" y="1317" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="719" y="1317" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1134;0.1425;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s12`} x="729.08" y="1327.08" width="27.84" height="27.84" filter={`url(#${uid}-f5)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="743.47" y="1383.53">
            AMAZON AURORA
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="743.01" y="1400.7">
            Replica (reader)
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-cache-a`}>
        <rect x="382" y="1317" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="382" y="1317" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1134;0.1425;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s13`} x="392.08" y="1327.08" width="27.84" height="27.84" filter={`url(#${uid}-f5)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="406.46" y="1383.53">
            AMAZON ELASTICACHE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="406" y="1400.7">
            Primary node
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-cache-b`}>
        <rect x="870" y="1317" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.26" />
        <g opacity="0">
          <rect x="870" y="1317" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.26" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1134;0.1425;0.9109;0.94;1" dur="6.175s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s13`} x="880.08" y="1327.08" width="27.84" height="27.84" filter={`url(#${uid}-f5)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="894.46" y="1383.53">
            AMAZON ELASTICACHE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="894" y="1400.7">
            Replica node
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <path d="M427 167 L427 419.37" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.03" pathLength="1" strokeDasharray="0.13 2" strokeDashoffset="0.13" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.13;0.13;-0.87;-1;-1" keyTimes="0;0.2024;0.3038;0.3169;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.175s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2024;0.204;0.3169;0.3186;1" dur="6.175s" repeatCount="indefinite" />
        </path>
        <circle r="3.16" fill="#60a5fa" opacity="0">
          <animateMotion path="M427 167 L427 419.37" dur="6.175s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.2024;0.3038;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.1781;0.2024;0.3426;0.3669;1" dur="6.175s" repeatCount="indefinite" />
        </circle>
        <path d="M427 491 L427 554.37" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.03" pathLength="1" strokeDasharray="0.5 2" strokeDashoffset="0.5" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.5;0.5;-0.5;-1;-1" keyTimes="0;0.3426;0.4074;0.4398;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.175s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3426;0.3442;0.4398;0.4414;1" dur="6.175s" repeatCount="indefinite" />
        </path>
        <circle r="3.16" fill="#60a5fa" opacity="0">
          <animateMotion path="M427 491 L427 554.37" dur="6.175s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3426;0.4074;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.3183;0.3426;0.4463;0.4706;1" dur="6.175s" repeatCount="indefinite" />
        </circle>
        <path d="M406 675 L406 1076.37" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.03" 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.4463;0.6073;0.6204;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.175s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4463;0.4479;0.6204;0.6221;1" dur="6.175s" repeatCount="indefinite" />
        </path>
        <circle r="3.16" fill="#60a5fa" opacity="0">
          <animateMotion path="M406 675 L406 1076.37" dur="6.175s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4463;0.6073;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.422;0.4463;0.6461;0.6704;1" dur="6.175s" repeatCount="indefinite" />
        </circle>
        <circle r="2.53" fill="#60a5fa" opacity="0">
          <animateMotion path="M447 675 L447 687 Q447 695 455 695 L886 695 Q894 695 894 703 L894 1076.37" dur="6.175s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4507;0.6127;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.4265;0.4507;0.6127;0.637;1" dur="6.175s" repeatCount="indefinite" />
        </circle>
        <circle r="2.53" fill="#60a5fa" opacity="0">
          <animateMotion path="M401 491.63 L401 503 Q401 511 393 511 L256 511 Q248 511 248 519 L248 854" dur="6.175s" repeatCount="indefinite" calcMode="spline" keyPoints="1;1;0;0" keyTimes="0;0.6163;0.7782;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.592;0.6163;0.7782;0.8025;1" dur="6.175s" repeatCount="indefinite" />
        </circle>
        <path d="M248 925.63 L248 962 Q248 970 256 970 L358 970 Q366 970 366 978 L366 1077" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.03" pathLength="1" strokeDasharray="0.12 2" strokeDashoffset="-1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="-1;-1;0;0.12;0.12" keyTimes="0;0.6461;0.7543;0.7674;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.175s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6461;0.6477;0.7674;0.7691;1" dur="6.175s" repeatCount="indefinite" />
        </path>
        <circle r="3.16" fill="#60a5fa" opacity="0">
          <animateMotion path="M248 925.63 L248 962 Q248 970 256 970 L358 970 Q366 970 366 978 L366 1077" dur="6.175s" repeatCount="indefinite" calcMode="spline" keyPoints="1;1;0;0" keyTimes="0;0.6461;0.7543;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.6218;0.6461;0.7543;0.7785;1" dur="6.175s" repeatCount="indefinite" />
        </circle>
      </g>
      <g id={`${uid}-legend`}>
        <rect x="927" y="1517" width="157" height="53" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.26" />
        <path d="M937 1534.5 H965" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.26" strokeLinecap="round" />
        <text fontSize="8" fontWeight="700" letterSpacing="0.48" fill="#9d9fa0">
          <tspan x="973" y="1537.34">
            APPLICATION TRAFFIC
          </tspan>
        </text>
        <path d="M937 1552.5 H965" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.26" strokeLinecap="round" strokeDasharray="5.05 3.79" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="973" y="1555.87">
            OUTBOUND VIA NAT
          </tspan>
        </text>
      </g>
    </svg>
  );
}