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

export default function ServerlessWebAPIOnAWS(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="596" height="1459" viewBox="0 0 596 1459" 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`}>
        Serverless web API on AWS
      </title>
      <desc id={`${uid}-sdw-desc`}>
        Serverless web API on AWS. 8 components in 2 groups. Connections: Users to Amazon CloudFront (HTTPS); Users to Amazon Cognito (sign in); Amazon CloudFront to Web app bucket (static files); Amazon CloudFront to Amazon API Gateway (/api/*); Amazon Cognito to Amazon API Gateway (Cognito authorizer); Amazon API Gateway to Orders function; Orders function to Orders table; Orders function to Receipts bucket.
      </desc>
      <defs>
        <linearGradient id={`${uid}-bg`} x1="0" y1="0" x2="0.34" y2="0.94">
          <stop offset="0" stopColor="#0e1a24" />
          <stop offset="0.6" stopColor="#0b1012" />
        </linearGradient>
        <pattern id={`${uid}-grid`} width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M0 0.5H20M0.5 0V20" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="290" cy="693.5" r="494.64">
          <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="#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 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}-s4`} viewBox="0 0 80 80" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="80" height="80" fill="#8c4fff" />
            <path fill="#fff" d="M55.122 52.123c0-1.654-1.346-3-3-3s-3 1.346-3 3 1.346 3 3 3 3-1.346 3-3m2 0c0 2.757-2.243 5-5 5s-5-2.243-5-5 2.243-5 5-5 5 2.243 5 5m-26.73-14.431c0-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-3m2 0c0 2.757-2.244 5-5 5-2.757 0-5-2.243-5-5s2.243-5 5-5c2.756 0 5 2.243 5 5m7.338-15.685c0 1.654 1.346 3 3 3 1.655 0 3-1.346 3-3 0-1.655-1.345-3-3-3-1.654 0-3 1.345-3 3m-2 0c0-2.757 2.244-5 5-5 2.757 0 5 2.243 5 5s-2.243 5-5 5c-2.756 0-5-2.243-5-5M66 40c0-9.273-4.972-17.852-12.988-22.491-1.437.29-2.827.687-4.561 1.314l-.68-1.881c.905-.326 1.715-.59 2.495-.816A25.95 25.95 0 0 0 40 14c-1.689 0-3.351.175-4.975.492a32 32 0 0 1 3.232 2.142l-1.209 1.593c-1.428-1.082-2.908-1.999-4.851-3.017-9.819 3.088-16.891 11.748-18.014 21.918a35 35 0 0 1 6.231-.698l.049 1.999c-2.3.057-4.276.301-6.436.776-.009.265-.027.533-.027.795a25.94 25.94 0 0 0 11.327 21.447c-1.253-3.731-1.877-7.257-1.877-10.701 0-1.964.338-3.577.695-5.284.083-.395.167-.797.249-1.214l1.963.387q-.127.635-.254 1.238c-.35 1.672-.653 3.116-.653 4.873 0 3.908.858 7.949 2.604 12.337A25.7 25.7 0 0 0 40 66c2.756 0 5.446-.44 8.012-1.286a33.5 33.5 0 0 0 2.378-6.015l1.921.557a36 36 0 0 1-1.602 4.421 25.4 25.4 0 0 0 4.574-2.672 36 36 0 0 0-1.124-2.506l1.789-.895c.348.696.667 1.408.972 2.124C62.705 54.775 66 47.66 66 40m2 0c0 8.727-3.966 16.799-10.879 22.149a27.5 27.5 0 0 1-5.532 3.323c-.833.378-1.681.728-2.553 1.022A27.5 27.5 0 0 1 40 68c-4.6 0-9.168-1.146-13.212-3.314A27.95 27.95 0 0 1 12 40c0-.686.018-1.208.059-1.691.681-11.684 8.697-21.797 19.942-25.143A27.7 27.7 0 0 1 40 12a27.87 27.87 0 0 1 13.684 3.579A28.03 28.03 0 0 1 68 40M37.314 25.463 36 23.956c-2.242 1.956-3.986 4.033-6.023 7.17l1.678 1.089c1.928-2.971 3.568-4.927 5.659-6.752m-3.039 12.964-.65 1.891c4.593 1.577 8.6 4.093 12.609 7.918l1.381-1.447c-4.226-4.031-8.465-6.688-13.34-8.362m13.371-11.759c3.752 5.722 5.865 12.003 6.279 18.67l-1.996.124c-.393-6.316-2.396-12.27-5.954-17.697z" />
          </g>
        </symbol>
        <filter id={`${uid}-f5`} 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}-s5`} viewBox="0 0 48 48" overflow="visible">
          <path fill="#7aa116" fillRule="evenodd" d="m40.504 26.16.224-1.666c1.784 1.087 2.335 1.715 2.495 1.98-.473.143-1.428.017-2.72-.314m-17.702-6.049c0-.053.043-.096.096-.096.015 0 .026.01.039.017l-.073.147c-.033-.01-.062-.03-.062-.068m13.712 20.687a1 1 0 0 0-.01.133c0 .155-.378.744-2.063 1.41-.751.296-1.638.562-2.638.792-2.575.596-5.74.924-8.907.924-8.466 0-13.607-2.17-13.607-3.126q0-.066-.01-.133L5.442 12.285q.372.215.79.415c.079.038.165.074.247.112a16 16 0 0 0 1.089.453q.413.156.856.3c.087.03.17.06.258.086a27 27 0 0 0 1.522.427 30 30 0 0 0 1.378.32q.548.116 1.117.22l.244.046q.688.12 1.403.224.201.028.406.054.54.075 1.093.14l.453.051q.666.07 1.343.13l.162.013q.756.06 1.519.104l.436.021q.576.029 1.152.047l.45.014q.77.018 1.537.02a72 72 0 0 0 1.987-.034q.577-.019 1.15-.047l.439-.02q.764-.044 1.518-.105l.166-.014q.675-.058 1.338-.129l.457-.052q.55-.065 1.089-.138.207-.027.41-.056a50 50 0 0 0 1.402-.223q.123-.022.247-.047a38 38 0 0 0 2.493-.539l.344-.086q.61-.163 1.178-.34c.087-.028.169-.057.254-.086a19 19 0 0 0 1.954-.756c.079-.037.163-.072.24-.109q.42-.2.792-.416l-1.792 13.306c-3.637-1.167-8.745-3.284-13.58-5.583a2.09 2.09 0 0 0-2.084-1.993 2.1 2.1 0 0 0-2.096 2.096c0 1.155.94 2.095 2.096 2.095.454 0 .872-.149 1.215-.396 4.332 2.08 9.863 4.532 14.18 5.778zM22.896 4c10.419 0 17.76 3.228 17.896 5.021l-.026.208c-.018.062-.057.125-.09.19-.027.051-.047.101-.084.154-.044.062-.11.125-.166.188-.051.055-.094.11-.155.166-.068.061-.155.124-.236.186-.075.058-.141.115-.227.174-.091.06-.2.122-.302.184-.1.06-.19.12-.301.178-.11.06-.24.118-.36.178-.124.061-.24.121-.376.182-.13.057-.276.114-.414.171-.15.06-.291.122-.451.181-.148.056-.314.11-.471.164-.171.06-.335.12-.517.177-.17.054-.355.104-.534.157-.19.056-.373.113-.573.167-.192.052-.4.1-.6.15-.206.051-.406.104-.623.154s-.448.094-.674.141c-.218.045-.43.093-.658.136-.24.046-.497.087-.747.13-.23.04-.453.081-.692.118-.26.04-.536.076-.806.113-.244.033-.482.07-.734.1-.293.036-.602.066-.905.097-.244.026-.48.055-.73.077-.336.031-.688.054-1.034.078-.233.018-.458.038-.696.053-.38.022-.776.036-1.17.053-.215.008-.425.021-.646.028a65 65 0 0 1-3.797 0c-.222-.007-.434-.02-.654-.029-.39-.016-.783-.03-1.161-.052-.25-.016-.488-.037-.733-.055-.333-.024-.673-.046-.996-.076-.251-.022-.487-.052-.732-.077-.303-.03-.612-.06-.904-.097-.25-.03-.487-.066-.73-.1-.27-.037-.548-.072-.81-.113-.247-.038-.48-.082-.718-.123-.241-.042-.488-.08-.72-.125-.231-.044-.446-.092-.67-.138-.222-.047-.45-.09-.663-.14-.216-.049-.415-.102-.622-.153-.2-.05-.408-.098-.6-.15-.202-.054-.387-.112-.58-.169-.176-.05-.36-.102-.526-.155-.185-.059-.351-.119-.524-.18-.155-.053-.318-.106-.463-.16-.162-.06-.303-.123-.453-.183-.138-.057-.285-.114-.413-.17-.134-.06-.251-.12-.375-.182-.121-.06-.251-.118-.361-.179-.11-.059-.202-.119-.302-.179-.101-.06-.21-.122-.3-.182-.087-.06-.155-.118-.231-.177-.08-.06-.165-.123-.231-.183-.063-.057-.107-.114-.16-.169-.055-.062-.118-.124-.162-.185-.038-.054-.057-.106-.085-.16-.032-.062-.071-.124-.088-.184l-.028-.209C5.14 7.227 12.48 4 22.896 4m22.359 22.257c-.213-1.15-1.538-2.368-4.237-3.91l1.716-12.752v-.004l.05-.39a1 1 0 0 0 .01-.13c0-4.167-10.486-7.07-19.898-7.07S3 4.903 3 9.07q0 .066.009.132l.052.39v.002L7.29 41.01c.13 3.676 9.613 5.048 15.606 5.048 3.315 0 6.638-.346 9.357-.975a21 21 0 0 0 2.922-.882c2.166-.855 3.285-1.929 3.329-3.19l1.74-12.93c.953.202 1.818.325 2.537.325.969 0 1.694-.205 2.086-.673.35-.416.488-.94.388-1.475" />
        </symbol>
        <filter id={`${uid}-f6`} 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}-s6`} viewBox="0 0 80 80" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="80" height="80" fill="#dd344c" />
            <path fill="#fff" d="M16.964 35.808h12.905v-1.983H16.964zM61.376 50.23l1.403 1.402-7.372 7.36a.994.994 0 0 1-1.403 0l-3.71-3.702 1.406-1.4 3.006 3.001zm4.568 5.463a9.44 9.44 0 0 1-2.197 5.015 9.55 9.55 0 0 1-3.143 2.406 9.37 9.37 0 0 1-5.158.833 9.4 9.4 0 0 1-4.706-1.966 9.43 9.43 0 0 1-3.518-8.573 9.47 9.47 0 0 1 5.058-7.282 9.34 9.34 0 0 1 5.441-.972 9.43 9.43 0 0 1 7.26 5.088 9.45 9.45 0 0 1 .963 5.45m.806-6.35a11.406 11.406 0 0 0-15.381-4.978 11.45 11.45 0 0 0-6.118 8.805 11.4 11.4 0 0 0 4.254 10.364A11.38 11.38 0 0 0 56.592 66c1.68 0 3.338-.37 4.864-1.094a11.5 11.5 0 0 0 3.801-2.91 11.4 11.4 0 0 0 2.659-6.064 11.4 11.4 0 0 0-1.166-6.588m-39.86-7.588h3.972v-1.983H26.89zm-9.926 0h7.941v-1.983h-7.941zm-.858-25.773h44.402c1.17 0 2.12 1.156 2.12 2.578v7.334H59.65V20.94a.99.99 0 0 0-.993-.991H35.825a.99.99 0 0 0-.993.99v4.957H13.985v-7.334c0-1.398.972-2.578 2.12-2.578m31.15 9.625c2.305 0 4.18 1.853 4.18 4.131a4.11 4.11 0 0 1-2.163 3.608 4.25 4.25 0 0 1-4.043 0 4.11 4.11 0 0 1-2.154-3.608c0-2.278 1.874-4.131 4.18-4.131m-33.27 21.5v-19.23h20.846V44.73c0 .549.444.992.993.992h10.378v-1.983h-8.291a9.02 9.02 0 0 1 6.522-8.488c1.755.82 3.85.828 5.633-.001a9.1 9.1 0 0 1 5.226 4.005l1.699-1.027a11.1 11.1 0 0 0-5.147-4.432 6.05 6.05 0 0 0 1.577-4.056c0-3.37-2.767-6.114-6.166-6.114s-6.166 2.743-6.166 6.114a6.06 6.06 0 0 0 1.564 4.045 11 11 0 0 0-5.836 5.789V21.93h20.847v15.86h1.985v-9.912h2.978l.001 14.869h1.986l-.001-24.186c0-2.515-1.842-4.561-4.106-4.561H16.106C13.84 14 12 16.046 12 18.56v28.548c0 2.515 1.841 4.56 4.106 4.56h26.668v-1.982H16.106c-1.149 0-2.12-1.18-2.12-2.578" />
          </g>
        </symbol>
        <symbol id={`${uid}-s7`} viewBox="0 0 80 80" overflow="visible">
          <g fill="none">
            <rect width="80" height="80" fill="#8c4fff" />
            <path fill="#fff" fillRule="evenodd" d="M34.065 55.632H37v-2.017h-2.935zm4.935 0h3v-2.017h-3zM27 14.63l-13 6.452v40.111l13 4.397zm2 12.763v26.222h3v2.017h-3v11.36c0 .324-.155.629-.416.818a1 1 0 0 1-.902.138l-15-5.072A1.01 1.01 0 0 1 12 61.92V20.454c0-.384.217-.736.559-.905l15-7.445a.99.99 0 0 1 .969.049c.293.183.472.507.472.856v12.367h3v2.017zm15 28.24h3v-2.018h-3zm.065-28.24H47v-2.017h-2.935zm-5 0H42v-2.017h-2.935zm-5 0H37v-2.017h-2.935zM66 21.083 53 14.63v50.96l13-4.397zm2 40.837c0 .432-.274.817-.682.956l-15 5.072a.99.99 0 0 1-.902-.138 1.01 1.01 0 0 1-.416-.819V55.633h-1.935v-2.017H51V27.393h-1.935v-2.017H51V13.01c0-.35.179-.673.472-.857a.99.99 0 0 1 .969-.048l15 7.445c.342.17.559.521.559.905zM42.934 33.807l-1.868-.724-5 13.11 1.868.725zm6.773 6.402a1.014 1.014 0 0 0 0-1.426l-4-4.034-1.414 1.426 3.293 3.32-3.293 3.322 1.414 1.426zm-15.414 4.034-4-4.034a1.014 1.014 0 0 1 0-1.426l4-4.034 1.414 1.426-3.293 3.32 3.293 3.322z" clipRule="evenodd" />
          </g>
        </symbol>
        <symbol id={`${uid}-s8`} viewBox="0 0 48 48" overflow="visible">
          <path fill="#ed7100" 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 2m-6.769 33.25h-5.355l6.345-13.291 2.681 5.533zm1.883-16.035a1 1 0 0 0-.9-.564h-.003a1 1 0 0 0-.899.57L9.389 35.819a.998.998 0 0 0 .902 1.431h7.573c.387 0 .739-.223.905-.572l4.146-8.763a1 1 0 0 0-.004-.864zM36.125 35.25h-5.452l-9.912-21.297a1 1 0 0 0-.907-.578h-3.603l.004-4.125h7.22l9.864 21.295a1 1 0 0 0 .907.58h1.879zm1-6.125h-2.24L25.021 7.83a1 1 0 0 0-.908-.58h-8.857a1 1 0 0 0-1 .999l-.006 6.125a1 1 0 0 0 1 1.001h3.967l9.912 21.297a1 1 0 0 0 .906.578h7.09a1 1 0 0 0 1-1v-6.125a1 1 0 0 0-1-1" />
        </symbol>
        <symbol id={`${uid}-s9`} viewBox="0 0 48 48" overflow="visible">
          <path fill="#c925d1" fillRule="evenodd" d="M13.355 11.862h32.573V2H13.355zm2-2h28.572V4.001H15.355zM2 11.862h9.861V2H2zm2-2h5.862V4.001H4zm9.355 13.355h32.573v-9.861H13.355zm2-2h28.572v-5.861H15.355zM2 23.217h9.861v-9.861H2zm2-2h5.862v-5.861H4zm9.355 13.355h32.573v-9.861H13.355zm2-2h28.572V26.71H15.355zM2 34.572h9.861v-9.861H2zm2-2h5.862V26.71H4zm9.355 13.355h32.573v-9.861H13.355zm2-1.999h28.572v-5.862H15.355zM2 45.927h9.861v-9.861H2zm2-1.999h5.862v-5.862H4z" />
        </symbol>
      </defs>
      <rect width="596" height="1459" fill={`url(#${uid}-bg)`} />
      <rect width="596" height="1459" fill={`url(#${uid}-grid)`} />
      <rect width="596" height="1459" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          SERVERLESS WEB API ON AWS
        </tspan>
      </text>
      <text fontSize="11" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65.08">
          Single-page app on CloudFront, REST API on API Gateway and Lambda, Cognito sign-in
        </tspan>
      </text>
      <g id={`${uid}-g-cloud`}>
        <rect x="28" y="321" width="479" height="1027" rx="2" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="28" y="321" width="479" height="1027" rx="2" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0591;0.0895;0.9096;0.94;1" dur="5.925s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-region`}>
        <rect x="48" y="604" width="439" height="724" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" strokeDasharray="3 3" />
        <g opacity="0">
          <rect x="48" y="604" width="439" height="724" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" strokeDasharray="3 3" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0591;0.0895;0.9096;0.94;1" dur="5.925s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M182 167 L182 378.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M178 373 L182 379 L186 373" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M182 167 L182 378.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.211;0.3228;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.925s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.211;0.2414;0.9;0.9304;1" dur="5.925s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M178 373 L182 379 L186 373" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3228;0.3532;0.9;0.9304;1" dur="5.925s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M198 167 L198 179 Q198 187 206 187 L253 187 Q261 187 261 195 L261 661.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4 3" />
        <path d="M257 656 L261 662 L265 656" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M182 450 L182 462 Q182 470 174 470 L127 470 Q119 470 119 478 L119 661.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M115 656 L119 662 L123 656" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M182 450 L182 462 Q182 470 190 470 L390 470 Q398 470 398 478 L398 847 Q398 855 390 855 L294 855 Q286 855 286 863 L286 898.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M282 893 L286 899 L290 893" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M182 450 L182 462 Q182 470 190 470 L390 470 Q398 470 398 478 L398 847 Q398 855 390 855 L294 855 Q286 855 286 863 L286 898.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.3633;0.5321;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.925s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3633;0.3937;0.9;0.9304;1" dur="5.925s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M282 893 L286 899 L290 893" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5321;0.5624;0.9;0.9304;1" dur="5.925s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M261 750.5 L261 899" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1 2.5" />
        <path d="M265 756 L261 750 L257 756" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M274 1004 L274 1067.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M270 1062 L274 1068 L278 1062" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M274 1004 L274 1067.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.5726;0.6401;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.925s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5726;0.603;0.9;0.9304;1" dur="5.925s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M270 1062 L274 1068 L278 1062" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6401;0.6705;0.9;0.9304;1" dur="5.925s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M274 1156 L274 1219.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M270 1214 L274 1220 L278 1214" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M274 1156 L274 1219.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.6806;0.7481;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.925s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6806;0.711;0.9;0.9304;1" dur="5.925s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M270 1214 L274 1220 L278 1214" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7481;0.7785;0.9;0.9304;1" dur="5.925s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e8`}>
        <path d="M274 1156 L274 1168 Q274 1176 282 1176 L410 1176 Q418 1176 418 1184 L418 1228" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M414 1222.5 L418 1228.5 L422 1222.5" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-el-e1`}>
        <rect x="187" y="231" width="51" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="212.76" y="244.61">
            HTTPS
          </tspan>
        </text>
        <g opacity="0">
          <rect x="187" y="231" width="51" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="212.76" y="244.61">
              HTTPS
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.211;0.2414;0.9;0.9304;1" dur="5.925s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e2`}>
        <rect x="266" y="231" width="48" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="290.26" y="244.61">
            SIGN IN
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e3`}>
        <rect x="124" y="514" width="68" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="7.5" fontWeight="700" letterSpacing="0.45" fill="#979899" textAnchor="middle">
          <tspan x="158.23" y="527.16">
            STATIC FILES
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e4`}>
        <rect x="403" y="514" width="43" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="424.76" y="527.61">
            /API/*
          </tspan>
        </text>
        <g opacity="0">
          <rect x="403" y="514" width="43" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="424.76" y="527.61">
              /API/*
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3633;0.3937;0.9;0.9304;1" dur="5.925s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e5`}>
        <rect x="266" y="814" width="114" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="323.26" y="827.61">
            COGNITO AUTHORIZER
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-cloud`}>
        <rect x="28" y="321" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s1`} x="33.38" y="326.38" width="29.24" height="29.24" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <rect x="28" y="321" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s1`} x="33.38" y="326.38" width="29.24" height="29.24" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0591;0.0895;0.9096;0.94;1" dur="5.925s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="76" y="344.91">
            AWS CLOUD
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-region`}>
        <rect x="48" y="604" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s2`} x="53.38" y="609.38" width="29.24" height="29.24" filter={`url(#${uid}-f3)`} />
        <g opacity="0">
          <rect x="48" y="604" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s2`} x="53.38" y="609.38" width="29.24" height="29.24" filter={`url(#${uid}-f4)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0591;0.0895;0.9096;0.94;1" dur="5.925s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="125" y="627.91">
            US-EAST-1
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-users`}>
        <rect x="166" y="96" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="166" y="96" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1181;0.1485;0.9096;0.94;1" dur="5.925s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s3`} x="175.6" y="105.6" width="28.8" height="28.8" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="190.44" y="162.35">
            USERS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-cdn`}>
        <rect x="157.5" y="379" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="157.5" y="379" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1181;0.1485;0.9096;0.94;1" dur="5.925s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s4`} x="160.86" y="382.36" width="41.28" height="41.28" filter={`url(#${uid}-f5)`} />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="181.94" y="445.35">
            AMAZON CLOUDFRONT
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-site`}>
        <rect x="94.5" y="662" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="94.5" y="662" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1181;0.1485;0.9096;0.94;1" dur="5.925s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="104.58" y="672.08" width="27.84" height="27.84" filter={`url(#${uid}-f6)`} />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="118.94" y="728.36">
            WEB APP BUCKET
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="118.5" y="745.7">
            Static SPA assets
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-auth`}>
        <rect x="236.5" y="662" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="236.5" y="662" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1181;0.1485;0.9096;0.94;1" dur="5.925s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="239.86" y="665.36" width="41.28" height="41.28" filter={`url(#${uid}-f5)`} />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="260.95" y="728.36">
            AMAZON COGNITO
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="260.51" y="745.7">
            User pool
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-api`}>
        <rect x="249.5" y="899" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="249.5" y="899" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1181;0.1485;0.9096;0.94;1" dur="5.925s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="252.86" y="902.36" width="41.28" height="41.28" filter={`url(#${uid}-f5)`} />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="273.94" y="965.36">
            AMAZON API
          </tspan>
          <tspan x="273.94" y="982.26">
            GATEWAY
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="273.5" y="999.6">
            REST API
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-fn`}>
        <rect x="249.5" y="1068" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="249.5" y="1068" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1181;0.1485;0.9096;0.94;1" dur="5.925s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="259.58" y="1078.08" width="27.84" height="27.84" filter={`url(#${uid}-f6)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="273.94" y="1134.27">
            ORDERS FUNCTION
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="273.51" y="1151.7">
            AWS Lambda
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-table`}>
        <rect x="249.5" y="1220" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="249.5" y="1220" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1181;0.1485;0.9096;0.94;1" dur="5.925s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="259.58" y="1230.08" width="27.84" height="27.84" filter={`url(#${uid}-f6)`} />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="273.95" y="1286.36">
            ORDERS TABLE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="273.51" y="1303.7">
            Amazon DynamoDB
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-uploads`}>
        <rect x="393.5" y="1228.5" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="393.5" y="1228.5" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1181;0.1485;0.9096;0.94;1" dur="5.925s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="403.58" y="1238.58" width="27.84" height="27.84" filter={`url(#${uid}-f6)`} />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="417.94" y="1294.86">
            RECEIPTS BUCKET
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <path d="M182 167 L182 378.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.12 2" strokeDashoffset="0.12" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.12;0.12;-0.88;-1;-1" keyTimes="0;0.211;0.3228;0.3365;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.925s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.211;0.2127;0.3365;0.3382;1" dur="5.925s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M182 167 L182 378.5" dur="5.925s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.211;0.3228;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1857;0.211;0.3633;0.3886;1" dur="5.925s" repeatCount="indefinite" />
        </circle>
        <circle r="2" fill="#60a5fa" opacity="0">
          <animateMotion path="M198 167 L198 179 Q198 187 206 187 L253 187 Q261 187 261 195 L261 661.5" dur="5.925s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4527;0.6215;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4274;0.4527;0.6215;0.6468;1" dur="5.925s" repeatCount="indefinite" />
        </circle>
        <circle r="2" fill="#60a5fa" opacity="0">
          <animateMotion path="M182 450 L182 462 Q182 470 174 470 L127 470 Q119 470 119 478 L119 661.5" dur="5.925s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6138;0.7589;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5885;0.6138;0.7589;0.7842;1" dur="5.925s" repeatCount="indefinite" />
        </circle>
        <path d="M182 450 L182 462 Q182 470 190 470 L390 470 Q398 470 398 478 L398 847 Q398 855 390 855 L294 855 Q286 855 286 863 L286 898.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.03 2" strokeDashoffset="0.03" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.03;0.03;-0.97;-1;-1" keyTimes="0;0.3633;0.5321;0.5377;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.925s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3633;0.365;0.5377;0.5394;1" dur="5.925s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M182 450 L182 462 Q182 470 190 470 L390 470 Q398 470 398 478 L398 847 Q398 855 390 855 L294 855 Q286 855 286 863 L286 898.5" dur="5.925s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3633;0.5321;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.338;0.3633;0.5726;0.5979;1" dur="5.925s" repeatCount="indefinite" />
        </circle>
        <path d="M274 1004 L274 1067.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.41 2" strokeDashoffset="0.41" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.41;0.41;-0.59;-1;-1" keyTimes="0;0.5726;0.6401;0.6677;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.925s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5726;0.5743;0.6677;0.6694;1" dur="5.925s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M274 1004 L274 1067.5" dur="5.925s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5726;0.6401;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.5473;0.5726;0.6806;0.7059;1" dur="5.925s" repeatCount="indefinite" />
        </circle>
        <path d="M274 1156 L274 1219.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.41 2" strokeDashoffset="0.41" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.41;0.41;-0.59;-1;-1" keyTimes="0;0.6806;0.7481;0.7757;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.925s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6806;0.6823;0.7757;0.7774;1" dur="5.925s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M274 1156 L274 1219.5" dur="5.925s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6806;0.7481;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6553;0.6806;0.7481;0.7734;1" dur="5.925s" repeatCount="indefinite" />
        </circle>
      </g>
      <g id={`${uid}-legend`}>
        <rect x="419" y="1360" width="149" height="71" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <path d="M429 1377.5 H457" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="465" y="1380.87">
            REQUEST PATH
          </tspan>
        </text>
        <path d="M429 1395.5 H457" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeDasharray="4 3" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="465" y="1398.87">
            SIGN-IN
          </tspan>
        </text>
        <path d="M429 1413.5 H457" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeDasharray="1 2.5" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#9d9fa0">
          <tspan x="465" y="1416.61">
            AUTHORIZER CHECK
          </tspan>
        </text>
      </g>
    </svg>
  );
}