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

export default function WebAppOnAWS(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="1152" height="690" viewBox="0 0 1152 690" role="img" aria-labelledby={`${uid}-sdw-title ${uid}-sdw-desc`} fontFamily="'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace" {...props}>
      <title id={`${uid}-sdw-title`}>
        Web app on AWS
      </title>
      <desc id={`${uid}-sdw-desc`}>
        Web app on AWS. 6 components in 3 groups. Connections: Users to Application Load Balancer (HTTPS); Application Load Balancer to Web service; Web service to Orders database; Web service to Session cache; Web service to Uploads.
      </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="26.18" height="26.18" patternUnits="userSpaceOnUse">
          <path d="M0 0.65H26.18M0.65 0V26.18" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1.31" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="419.75" cy="368.5" r="491.85">
          <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 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 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}-s5`} 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>
        <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}-s6`} viewBox="0 0 80 80" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="80" height="80" fill="#ed7100" />
            <path fill="#fff" d="M52 56.523v-4.846l3-1.2v4.846zm-5-6.046 3 1.2v4.846l-3-1.2zm-6 13.046v-4.846l3-1.2v4.846zm-5-6.046 3 1.2v4.846l-3-1.2zm-6-.954v-4.846l3-1.2v4.846zm-5-6.046 3 1.2v4.846l-3-1.2zm4-2.4 2.308.923-2.308.923L26.692 49zm11 7 2.308.923-2.308.923L37.692 56zm11-7 2.308.923-2.308.923L48.692 49zm5.371-.006-5-2a1 1 0 0 0-.742 0l-5 2c-.38.153-.629.52-.629.929v5.923l-4.629-1.852a1 1 0 0 0-.742 0L35 54.923V49c0-.409-.249-.776-.629-.929l-5-2a1 1 0 0 0-.742 0l-5 2c-.38.153-.629.52-.629.929v7c0 .409.249.776.629.929l5 2a1 1 0 0 0 .742 0L34 57.077V63c0 .409.249.776.629.929l5 2a1 1 0 0 0 .742 0l5-2c.38-.153.629-.52.629-.929v-5.923l4.629 1.852a1 1 0 0 0 .742 0l5-2c.38-.153.629-.52.629-.929v-7c0-.409-.249-.776-.629-.929M65 35.938c0 5.845-12.881 9-25 9s-25-3.155-25-9c0-2.791 3.095-5.248 8.715-6.919l.57 1.917C19.791 32.272 17 34.189 17 35.938c0 3.311 9.445 7 23 7s23-3.689 23-7c0-1.749-2.791-3.666-7.285-5.002l.57-1.917C61.905 30.69 65 33.147 65 35.938M40 17.071 50.214 21 40 24.929 29.786 21zm10.58 19.771c-1.886.844-5.052 1.827-9.58 1.959V26.687l11-4.23v12.191c0 .951-.556 1.812-1.42 2.194M28 34.648V22.457l11 4.23v12.114c-4.528-.132-7.694-1.115-9.584-1.961A2.39 2.39 0 0 1 28 34.648m.604 4.019c2.201.985 5.965 2.16 11.396 2.16s9.195-1.175 11.393-2.158A4.39 4.39 0 0 0 54 34.648V21c0-.414-.255-.785-.641-.934l-13-5a1 1 0 0 0-.718 0l-13 5c-.386.149-.641.52-.641.934v13.648a4.39 4.39 0 0 0 2.604 4.019" />
          </g>
        </symbol>
        <filter id={`${uid}-f6`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.8929 3.0038 0.3032 0 -2.604" result="a" />
          <feFlood floodColor="#919394" />
          <feComposite in2="a" operator="in" />
        </filter>
        <symbol id={`${uid}-s7`} viewBox="0 0 80 80" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="80" height="80" fill="#c925d1" />
            <path fill="#fff" d="M45.091 18.045h-3.008v-2.018h3.008V13h2.005v3.027h3.009v2.018h-3.009v3.027h-2.005zm12.032 11.1h-3.008v-2.019h3.008V24.1h2.006v3.027h3.008v2.018h-3.008v3.027h-2.006zm-5.222 31.889c-1.915-4.866-6.335-9.314-11.172-11.242 4.837-1.927 9.257-6.375 11.172-11.241 1.915 4.866 6.335 9.314 11.171 11.241-4.836 1.928-9.256 6.376-11.17 11.242m16.096-12.25c-7.053 0-15.093-8.092-15.093-15.19 0-.557-.448-1.009-1.003-1.009s-1.002.452-1.002 1.01c0 7.097-8.042 15.188-15.095 15.188-.553 0-1.002.452-1.002 1.01 0 .557.449 1.008 1.002 1.008 7.053 0 15.095 8.091 15.095 15.19 0 .557.448 1.009 1.002 1.009.555 0 1.003-.452 1.003-1.009 0-7.099 8.04-15.19 15.093-15.19.554 0 1.003-.45 1.003-1.009 0-.557-.45-1.009-1.003-1.009m-54.992-19.88c2.92 2.136 8.593 3.267 14.038 3.267 5.444 0 11.118-1.13 14.037-3.268v9.665c-1.444 1.933-6.758 3.838-13.837 3.838-8.148 0-14.238-2.563-14.238-4.854zm14.038-7.832c8.697 0 14.037 2.645 14.037 4.54 0 1.897-5.34 4.541-14.037 4.541s-14.038-2.644-14.038-4.54 5.34-4.54 14.038-4.54m14.037 37.87c0 2.326-6.005 4.928-14.042 4.928-8.032 0-14.033-2.602-14.033-4.928v-6.448c2.956 2.256 8.743 3.451 14.296 3.451 3.86 0 7.595-.549 10.51-1.546l-.644-1.91c-2.713.926-6.218 1.438-9.866 1.438-8.182 0-14.296-2.563-14.296-4.854v-8.094c2.948 2.252 8.71 3.445 14.238 3.445 5.924 0 11.005-1.228 13.837-3.172v3.028h2.006V25.613c0-4.26-8.265-6.559-16.043-6.559-7.461 0-15.351 2.121-15.98 6.054H11v33.834c0 4.511 8.263 6.946 16.038 6.946 7.78 0 16.048-2.435 16.048-6.946v-3.563H41.08z" />
          </g>
        </symbol>
        <symbol id={`${uid}-s8`} viewBox="0 0 80 80" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="80" height="80" fill="#c925d1" />
            <path fill="#fff" d="M51 61.555v-5.852c-2.534 1.637-7.096 2.41-11.444 2.41-4.74 0-8.435-.827-10.556-2.245v5.687C29 63.25 32.948 65 39.556 65 46.3 65 51 63.185 51 61.555M39.556 49.22c-4.74 0-8.435-.826-10.556-2.244v5.71c.031 1.688 3.973 3.427 10.556 3.427 6.723 0 11.413-1.804 11.444-3.43V46.81c-2.534 1.638-7.096 2.41-11.444 2.41M51 43.79v-6.76c-2.534 1.636-7.096 2.41-11.444 2.41-4.74 0-8.435-.827-10.556-2.245v6.6c.031 1.687 3.973 3.425 10.556 3.425 6.723 0 11.413-1.804 11.444-3.43m-22.003-9.797.001.009H29v.01c.031 1.688 3.973 3.427 10.556 3.427 7.342 0 11.413-2.022 11.444-3.43v-.007h.002l.001-.01c0-1.407-4.076-3.445-11.447-3.445-6.61 0-10.559 1.752-10.559 3.446M53 34.018v9.756h.003l-.003.025v8.868h.003l-.003.025v8.863C53 65.297 46.031 67 39.556 67 31.929 67 27 64.863 27 61.555v-8.857l-.003-.031H27v-8.862l-.003-.031H27v-9.75l-.003-.031c0-3.308 4.93-5.447 12.559-5.447 6.476 0 13.447 1.705 13.447 5.447zM67 21.12a1 1 0 0 0 1-1V15a1 1 0 0 0-1-1H13a1 1 0 0 0-1 1v5.12a1 1 0 0 0 1 1 2.21 2.21 0 0 1 2.214 2.2A2.21 2.21 0 0 1 13 25.522a1 1 0 0 0-1 1v20.482a1 1 0 0 0 1 1h10v-2h-5v-3h5v-2h-6a1 1 0 0 0-1 1v4h-2V27.401a4.21 4.21 0 0 0 3.214-4.08A4.21 4.21 0 0 0 14 19.239V16h52v3.24a4.21 4.21 0 0 0-3.214 4.08A4.21 4.21 0 0 0 66 27.402v18.602h-2v-4a1 1 0 0 0-1-1h-6v2h5v3h-5v2h10a1 1 0 0 0 1-1V26.521a1 1 0 0 0-1-1 2.21 2.21 0 0 1-2.214-2.2c0-1.213.993-2.2 2.214-2.2M28 28v-8a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v17.001a1 1 0 0 0 1 1h3v-2h-2v-15h4v7zm30 8.001h-1v2h2a1 1 0 0 0 1-1v-17a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v8h2v-7h4zm-8-9V20a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v6h2v-5h5v6zm-13-1V21h-5v6h-2v-7a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v6z" />
          </g>
        </symbol>
        <symbol id={`${uid}-s9`} viewBox="0 0 80 80" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="80" height="80" fill="#7aa116" />
            <path fill="#fff" d="m60.836 42.893.384-2.704c3.54 2.12 3.587 2.997 3.586 3.02-.006.006-.61.51-3.97-.316m-1.943-.54C52.773 40.5 44.25 36.59 40.8 34.96l.004-.041a2.406 2.406 0 0 0-2.404-2.403 2.406 2.406 0 0 0-2.402 2.403 2.406 2.406 0 0 0 2.402 2.403c.582 0 1.11-.217 1.527-.562 4.058 1.92 12.515 5.774 18.68 7.594L56.17 61.56a1 1 0 0 0-.01.14c0 1.516-6.707 4.299-17.666 4.299-11.075 0-17.853-2.783-17.853-4.298q0-.069-.01-.136l-5.093-37.207c4.409 3.035 13.892 4.64 22.962 4.64 9.056 0 18.523-1.6 22.94-4.625zM15 20.478C15.072 19.162 22.634 14 38.5 14c15.864 0 23.427 5.16 23.5 6.478v.449C61.13 23.877 51.33 27 38.5 27c-12.852 0-22.657-3.132-23.5-6.087zm49 .022c0-3.465-9.934-8.5-25.5-8.5S13 17.035 13 20.5l.094.754 5.548 40.524C18.775 66.31 30.86 68 38.494 68c9.472 0 19.535-2.178 19.665-6.22l2.396-16.896c1.333.319 2.43.482 3.31.482 1.184 0 1.984-.29 2.469-.867a1.95 1.95 0 0 0 .436-1.66c-.26-1.383-1.902-2.875-5.248-4.784l2.376-16.762z" />
          </g>
        </symbol>
      </defs>
      <rect width="1152" height="690" fill={`url(#${uid}-bg)`} />
      <rect width="1152" height="690" fill={`url(#${uid}-grid)`} />
      <rect width="1152" height="690" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          WEB APP ON AWS
        </tspan>
      </text>
      <text fontSize="11.5" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65.25">
          A container service behind a load balancer, with a database, a cache and file storage
        </tspan>
      </text>
      <g id={`${uid}-g-aws`}>
        <rect x="293" y="96" width="831" height="566" rx="2.62" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.31" />
        <g opacity="0">
          <rect x="293" y="96" width="831" height="566" rx="2.62" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.31" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0704;0.1067;0.9038;0.94;1" dur="4.969s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-region`}>
        <rect x="313" y="154" width="791" height="488" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.31" strokeDasharray="3.93 3.93" />
        <g opacity="0">
          <rect x="313" y="154" width="791" height="488" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.31" strokeDasharray="3.93 3.93" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0704;0.1067;0.9038;0.94;1" dur="4.969s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-vpc`}>
        <rect x="333" y="212" width="540" height="352" rx="2.62" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.31" />
        <g opacity="0">
          <rect x="333" y="212" width="540" height="352" rx="2.62" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.31" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0704;0.1067;0.9038;0.94;1" dur="4.969s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M76 443 L379.85 443" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.31" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M372.65 448.24 L380.5 443 L372.65 437.76" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.31" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M76 443 L379.85 443" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.57" 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.2516;0.3979;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="4.969s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2516;0.2878;0.9;0.9362;1" dur="4.969s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M372.65 448.24 L380.5 443 L372.65 437.76" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.31" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3979;0.4341;0.9;0.9362;1" dur="4.969s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M428.5 443 L564.35 443" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.31" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M557.15 448.24 L565 443 L557.15 437.76" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.31" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M428.5 443 L564.35 443" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.57" 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.4462;0.5267;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="4.969s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4462;0.4824;0.9;0.9362;1" dur="4.969s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M557.15 448.24 L565 443 L557.15 437.76" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.31" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5267;0.5629;0.9;0.9362;1" dur="4.969s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M613 443 L663 443 Q671 443 671 435 L671 302 Q671 294 679 294 L762.85 294" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.31" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M755.65 299.24 L763.5 294 L755.65 288.76" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.31" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M613 443 L663 443 Q671 443 671 435 L671 302 Q671 294 679 294 L762.85 294" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.57" 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.575;0.7189;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="4.969s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.575;0.6112;0.9;0.9362;1" dur="4.969s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M755.65 299.24 L763.5 294 L755.65 288.76" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.31" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7189;0.7551;0.9;0.9362;1" dur="4.969s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M613 443 L762.85 443" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.31" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M755.65 448.24 L763.5 443 L755.65 437.76" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.31" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M613 443 L663 443 Q671 443 671 451 L671 535 Q671 543 679 543 L993.85 543" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.31" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M986.65 548.24 L994.5 543 L986.65 537.76" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.31" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-el-e1`}>
        <rect x="150" y="417" width="51" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.31" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="175.79" y="430.87">
            HTTPS
          </tspan>
        </text>
        <g opacity="0">
          <rect x="150" y="417" width="51" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.31" />
          <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#60a5fa" textAnchor="middle">
            <tspan x="175.79" y="430.87">
              HTTPS
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2516;0.2878;0.9;0.9362;1" dur="4.969s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-gh-aws`}>
        <rect x="293" y="96" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s1`} x="298.38" y="101.38" width="29.24" height="29.24" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <rect x="293" y="96" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s1`} x="298.38" y="101.38" width="29.24" height="29.24" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0704;0.1067;0.9038;0.94;1" dur="4.969s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="341" y="119.91">
            AWS CLOUD
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-region`}>
        <rect x="313" y="154" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s2`} x="318.38" y="159.38" width="29.24" height="29.24" filter={`url(#${uid}-f3)`} />
        <g opacity="0">
          <rect x="313" y="154" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s2`} x="318.38" y="159.38" width="29.24" height="29.24" filter={`url(#${uid}-f4)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0704;0.1067;0.9038;0.94;1" dur="4.969s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="361" y="177.91">
            REGION
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-vpc`}>
        <rect x="333" y="212" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s3`} x="338.38" y="217.38" width="29.24" height="29.24" filter={`url(#${uid}-f3)`} />
        <g opacity="0">
          <rect x="333" y="212" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s3`} x="338.38" y="217.38" width="29.24" height="29.24" filter={`url(#${uid}-f4)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0704;0.1067;0.9038;0.94;1" dur="4.969s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="381" y="235.91">
            VPC
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-users`}>
        <rect x="28" y="419" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.31" />
        <g opacity="0">
          <rect x="28" y="419" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.31" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1409;0.1771;0.9038;0.94;1" dur="4.969s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s4`} x="37.6" y="428.6" width="28.8" height="28.8" />
        <text fontSize="11.25" fontWeight="700" letterSpacing="0.9" fill="#9d9fa0" textAnchor="middle">
          <tspan x="52.45" y="485.44">
            USERS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-alb`}>
        <rect x="380.5" y="419" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.31" />
        <g opacity="0">
          <rect x="380.5" y="419" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.31" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1409;0.1771;0.9038;0.94;1" dur="4.969s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="390.58" y="429.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="404.93" y="485.27">
            APPLICATION LOAD
          </tspan>
          <tspan x="404.93" y="502.17">
            BALANCER
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-app`}>
        <rect x="565" y="419" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.31" />
        <g opacity="0">
          <rect x="565" y="419" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.31" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1409;0.1771;0.9038;0.94;1" dur="4.969s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="568.36" y="422.36" width="41.28" height="41.28" filter={`url(#${uid}-f6)`} />
        <text fontSize="11.25" fontWeight="700" letterSpacing="0.9" fill="#9d9fa0" textAnchor="middle">
          <tspan x="589.45" y="485.44">
            WEB SERVICE
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="589" y="502.04">
            Amazon ECS on AWS
          </tspan>
          <tspan x="589" y="517.04">
            Fargate
          </tspan>
        </text>
        <rect x="599.98" y="412" width="22.05" height="16" rx="8" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.31" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="611.26" y="423.02">
            X3
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-db`}>
        <rect x="763.5" y="270" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.31" />
        <g opacity="0">
          <rect x="763.5" y="270" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.31" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1409;0.1771;0.9038;0.94;1" dur="4.969s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="766.86" y="273.36" width="41.28" height="41.28" filter={`url(#${uid}-f6)`} />
        <text fontSize="11.25" fontWeight="700" letterSpacing="0.9" fill="#9d9fa0" textAnchor="middle">
          <tspan x="787.95" y="336.44">
            ORDERS DATABASE
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="787.51" y="353.04">
            Amazon Aurora
          </tspan>
          <tspan x="787.51" y="368.04">
            PostgreSQL
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-cache`}>
        <rect x="763.5" y="419" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.31" />
        <g opacity="0">
          <rect x="763.5" y="419" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.31" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1409;0.1771;0.9038;0.94;1" dur="4.969s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="766.86" y="422.36" width="41.28" height="41.28" filter={`url(#${uid}-f6)`} />
        <text fontSize="11.25" fontWeight="700" letterSpacing="0.9" fill="#9d9fa0" textAnchor="middle">
          <tspan x="787.95" y="485.44">
            SESSION CACHE
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="787.5" y="502.04">
            Amazon ElastiCache for
          </tspan>
          <tspan x="787.5" y="517.04">
            Valkey
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-files`}>
        <rect x="994.5" y="519" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.31" />
        <g opacity="0">
          <rect x="994.5" y="519" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.31" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1409;0.1771;0.9038;0.94;1" dur="4.969s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="997.86" y="522.36" width="41.28" height="41.28" filter={`url(#${uid}-f6)`} />
        <text fontSize="11.25" fontWeight="700" letterSpacing="0.9" fill="#9d9fa0" textAnchor="middle">
          <tspan x="1018.95" y="585.44">
            UPLOADS
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="1018.5" y="602.04">
            Amazon Simple Storage
          </tspan>
          <tspan x="1018.5" y="617.04">
            Service
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <path d="M76 443 L379.85 443" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.14" pathLength="1" strokeDasharray="0.11 2" strokeDashoffset="0.11" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.11;0.11;-0.89;-1;-1" keyTimes="0;0.2516;0.3979;0.4143;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="4.969s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2516;0.2536;0.4143;0.4163;1" dur="4.969s" repeatCount="indefinite" />
        </path>
        <circle r="3.27" fill="#60a5fa" opacity="0">
          <animateMotion path="M76 443 L379.85 443" dur="4.969s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.2516;0.3979;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.2214;0.2516;0.4462;0.4764;1" dur="4.969s" repeatCount="indefinite" />
        </circle>
        <path d="M428.5 443 L564.35 443" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.14" pathLength="1" strokeDasharray="0.25 2" strokeDashoffset="0.25" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.25;0.25;-0.75;-1;-1" keyTimes="0;0.4462;0.5267;0.5468;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="4.969s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4462;0.4482;0.5468;0.5489;1" dur="4.969s" repeatCount="indefinite" />
        </path>
        <circle r="3.27" fill="#60a5fa" opacity="0">
          <animateMotion path="M428.5 443 L564.35 443" dur="4.969s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4462;0.5267;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.416;0.4462;0.575;0.6052;1" dur="4.969s" repeatCount="indefinite" />
        </circle>
        <path d="M613 443 L663 443 Q671 443 671 435 L671 302 Q671 294 679 294 L762.85 294" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.14" pathLength="1" strokeDasharray="0.11 2" strokeDashoffset="0.11" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.11;0.11;-0.89;-1;-1" keyTimes="0;0.575;0.7189;0.7353;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="4.969s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.575;0.577;0.7353;0.7373;1" dur="4.969s" repeatCount="indefinite" />
        </path>
        <circle r="3.27" fill="#60a5fa" opacity="0">
          <animateMotion path="M613 443 L663 443 Q671 443 671 435 L671 302 Q671 294 679 294 L762.85 294" dur="4.969s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.575;0.7189;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.5448;0.575;0.7189;0.7491;1" dur="4.969s" repeatCount="indefinite" />
        </circle>
        <circle r="2.62" fill="#60a5fa" opacity="0">
          <animateMotion path="M613 443 L762.85 443" dur="4.969s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4619;0.5424;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.4317;0.4619;0.5424;0.5725;1" dur="4.969s" repeatCount="indefinite" />
        </circle>
        <circle r="2.62" fill="#60a5fa" opacity="0">
          <animateMotion path="M613 443 L663 443 Q671 443 671 451 L671 535 Q671 543 679 543 L993.85 543" dur="4.969s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.602;0.8033;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.5719;0.602;0.8033;0.8335;1" dur="4.969s" repeatCount="indefinite" />
        </circle>
      </g>
    </svg>
  );
}
