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

export default function EventDrivenOrderProcessingOnAWS(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="1000" height="1555" viewBox="0 0 1000 1555" 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`}>
        Event-driven order processing on AWS
      </title>
      <desc id={`${uid}-sdw-desc`}>
        Event-driven order processing on AWS. 12 components in 3 groups. Connections: Customers to Orders API; Orders API to Orders event bus (OrderPlaced); Orders event bus to AWS Step Functions workflow (fulfillment rule); Reserve stock to Charge payment; Charge payment to Create shipment; AWS Step Functions workflow to Orders table (order status); Orders event bus to Billing queue (billing rule); Billing queue to Invoice generator; Orders event bus to Order notifications (notification rule); Order notifications to Email subscription; Order notifications to Analytics queue.
      </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="22.73" height="22.73" patternUnits="userSpaceOnUse">
          <path d="M0 0.57H22.73M0.57 0V22.73" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1.14" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="425.5" cy="750.5" r="593.14">
          <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 80 80" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="80" height="80" fill="#e7157b" />
            <path fill="#fff" d="M45 44h21v-7H45zm22-9H44a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h23a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1M43.5 62.5c0 1.93-1.57 3.5-3.5 3.5s-3.5-1.57-3.5-3.5S38.07 59 40 59s3.5 1.57 3.5 3.5M14 47h18v-4H14zm0-10h18v-4H14zm22.5-19.5c0-1.93 1.57-3.5 3.5-3.5s3.5 1.57 3.5 3.5S41.93 21 40 21s-3.5-1.57-3.5-3.5M56 53H24v-4h9a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-9v-2h9a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-9v-3h32v4h2v-5a1 1 0 0 0-1-1H41v-3.096c2.556-.472 4.5-2.713 4.5-5.404 0-3.033-2.468-5.5-5.5-5.5a5.506 5.506 0 0 0-5.5 5.5c0 2.691 1.944 4.932 4.5 5.404V26H23a1 1 0 0 0-1 1v4h-9a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h9v2h-9a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h9v5a1 1 0 0 0 1 1h16v2.096c-2.556.472-4.5 2.713-4.5 5.404 0 3.033 2.468 5.5 5.5 5.5s5.5-2.467 5.5-5.5c0-2.691-1.944-4.932-4.5-5.404V55h16a1 1 0 0 0 1-1v-4.973h-2z" />
          </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 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>
        <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}-s6`} viewBox="0 0 48 48" overflow="visible">
          <path fill="#e7157b" fillRule="evenodd" d="m43.717 22.782-1.284-1.549-1.104.914 1.284 1.55zm-16.87 13.986-1.284-1.548-2.51 2.08-.478 1.703 1.762-.154zm.255-2.826 1.285 1.55 12.687-10.519-1.284-1.548zm18.662-10.259L25.373 40.588a1 1 0 0 1-.552.226l-3.512.307a1.002 1.002 0 0 1-1.05-1.266l.952-3.395a1 1 0 0 1 .324-.5l20.391-16.905a1 1 0 0 1 1.408.131l2.561 3.089a1 1 0 0 1-.131 1.408M31.1 6.91l-1.84-.785-2.587 6.065 1.84.785zm7.98 6.76-1.201-1.6-5.307 3.984 1.202 1.6zM13.466 43.154l1.84.785 2.587-6.065-1.84-.785zm-7.98-6.76 1.201 1.6 5.306-3.984-1.201-1.6zm3.118-10.639L2 26.591l.252 1.984 6.604-.836zm1.477-6.854L3.95 16.364l-.765 1.848 6.131 2.537zm4.751-5.213-4.015-5.229-1.586 1.219 4.015 5.229zm6.749-2.167L20.756 5l-1.984.252.825 6.521zM16.71 33.125l-4.707-8.153a1 1 0 0 1 0-1l4.707-8.152c.179-.309.509-.5.866-.5h9.413c.358 0 .688.191.867.5l4.707 8.152-1.733 1-4.418-7.652h-8.258l-4.13 7.152 4.13 7.153h3.879v2h-4.457c-.357 0-.687-.191-.866-.5" />
        </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}-s7`} viewBox="0 0 80 80" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="80" height="80" fill="#ed7100" />
            <path fill="#fff" d="M28.008 66H15.59l13.733-28.704 6.222 12.81zm2.212-31.447a1 1 0 0 0-.902-.564h-.003a1 1 0 0 0-.903.569L13.098 66.569A1 1 0 0 0 14.002 68h14.64c.388 0 .74-.223.906-.572l8.016-16.9a1 1 0 0 0-.005-.863zM64.995 66H52.66L32.867 24.57a1 1 0 0 0-.905-.57H23.89l.009-10h15.82L59.42 55.429c.166.348.519.571.906.571h4.67zm1.003-12H60.96l-19.7-41.429a1 1 0 0 0-.907-.571H22.898c-.553 0-1.002.447-1.003.999l-.01 12A1 1 0 0 0 22.886 26h8.442l19.793 41.43c.167.348.517.57.904.57h13.972A1 1 0 0 0 67 67V55a1 1 0 0 0-1.002-1" />
          </g>
        </symbol>
        <symbol id={`${uid}-s8`} 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>
        <symbol id={`${uid}-s9`} viewBox="0 0 48 48" overflow="visible">
          <path fill="#e7157b" fillRule="evenodd" d="M37.449 22.261v3.96l-2.423-2.014zm.361 6.86a1 1 0 0 0 1.639-.769v-8.176a1 1 0 0 0-1.626-.779l-5.004 4.017a1.002 1.002 0 0 0-.013 1.549zm-27.283-6.814 2.424 2.015-2.424 1.945zm-1.432 6.946a1 1 0 0 0 1.058-.121l5.005-4.017a1.002 1.002 0 0 0 .013-1.549l-5.005-4.159a1.001 1.001 0 0 0-1.639.769v8.176c0 .385.221.735.568.901m19.273 4.774h2v-19.28h-2zm-5.247 0h2v-19.28h-2zm-5.41 0h2v-19.28h-2zM3.999 35.773h39.978V13.001H3.999zM44.977 11H3a1 1 0 0 0-1 1v24.773a1 1 0 0 0 1 1h41.977a1 1 0 0 0 1-1V12a1 1 0 0 0-1-1" />
        </symbol>
        <symbol id={`${uid}-s10`} viewBox="0 0 48 48" overflow="visible">
          <path fill="#e7157b" fillRule="evenodd" d="M44 38.5h2v-2h-2zm2-5.5v1.5h-2V34h-.5v-2H45a1 1 0 0 1 1 1m-32.5 1h3v-2h-3zm24 0h3v-2h-3zm-18 0h3v-2h-3zm-12 0h3v-2h-3zm24 0h3v-2h-3zm-6 0h3v-2h-3zM3 32h1.5v2H4v.5H2V33a1 1 0 0 1 1-1m-1 6.5h2v-2H2zM4 41h.5v2H3a1 1 0 0 1-1-1v-1.5h2zm15.5 2h3v-2h-3zm12 0h3v-2h-3zm6 0h3v-2h-3zm-30 0h3v-2h-3zm18 0h3v-2h-3zm-12 0h3v-2h-3zM44 40.5h2V42a1 1 0 0 1-1 1h-1.5v-2h.5zm0-15h2v-2h-2zm2-5.5v1.5h-2V21h-.5v-2H45a1 1 0 0 1 1 1m-14.5 1h3v-2h-3zm-24 0h3v-2h-3zm30 0h3v-2h-3zm-24 0h3v-2h-3zm6 0h3v-2h-3zm6 0h3v-2h-3zM3 19h1.5v2H4v.5H2V20a1 1 0 0 1 1-1m-1 6.5h2v-2H2zM4 28h.5v2H3a1 1 0 0 1-1-1v-1.5h2zm15.5 2h3v-2h-3zm12 0h3v-2h-3zm-24 0h3v-2h-3zm6 0h3v-2h-3zm24 0h3v-2h-3zm-12 0h3v-2h-3zM44 27.5h2V29a1 1 0 0 1-1 1h-1.5v-2h.5zM4 15h40V7H4zM45 5H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h42a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1" />
        </symbol>
        <symbol id={`${uid}-s11`} viewBox="0 0 48 48" overflow="visible">
          <path fill="#e7157b" fillRule="evenodd" d="M28.194 17v-5.891h-.943l-1.896 3.613-1.904-3.613h-.969V17h.799v-4.641l1.666 3.136h.791l1.657-3.128V17zm2.439-2.219h1.981l-.994-2.889zm-.22.655L29.885 17h-.892l2.176-5.891h.935L34.28 17h-.901l-.544-1.564zm-9.035-3.629v-.698h-3.664V17h3.664v-.697h-2.797v-1.989h2.345v-.697h-2.345v-1.81zM35.113 17h.867v-5.891h-.867zm2.329-5.891V17h3.647v-.714h-2.78v-5.177zM4 8c0 2.206 1.794 4 4 4s4-1.794 4-4-1.794-4-4-4-4 1.794-4 4M2 8c0-3.309 2.691-6 6-6 3.308 0 6 2.691 6 6s-2.692 6-6 6c-3.309 0-6-2.691-6-6m42 33.5h2v-2h-2zm1-6.5h-1.5v2h.5v.5h2V36a1 1 0 0 0-1-1m-13.5 2h3v-2h-3zm-6 0h3v-2h-3zm12 0h3v-2h-3zm-24 0h3v-2h-3zm6 0h3v-2h-3zm-12 0h3v-2h-3zM2 36v1.5h2V37h.5v-2H3a1 1 0 0 0-1 1m0 5.5h2v-2H2zm2 2H2V45a1 1 0 0 0 1 1h1.5v-2H4zM37.5 46h3v-2h-3zm-12 0h3v-2h-3zm-12 0h3v-2h-3zm-6 0h3v-2h-3zm24 0h3v-2h-3zm-12 0h3v-2h-3zM44 44h-.5v2H45a1 1 0 0 0 1-1v-1.5h-2zm0-15.5h2v-2h-2zm1-6.5h-1.5v2h.5v.5h2V23a1 1 0 0 0-1-1m-13.5 2h3v-2h-3zm-12 0h3v-2h-3zm-12 0h3v-2h-3zm18 0h3v-2h-3zm-12 0h3v-2h-3zm24 0h3v-2h-3zM2 23v1.5h2V24h.5v-2H3a1 1 0 0 0-1 1m0 5.5h2v-2H2zm2 2H2V32a1 1 0 0 0 1 1h1.5v-2H4zM7.5 33h3v-2h-3zm12 0h3v-2h-3zm-6 0h3v-2h-3zm24 0h3v-2h-3zm-6 0h3v-2h-3zm-6 0h3v-2h-3zM44 31h-.5v2H45a1 1 0 0 0 1-1v-1.5h-2zm2-22v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-4h2v3h40v-8H16V8h29a1 1 0 0 1 1 1" />
        </symbol>
      </defs>
      <rect width="1000" height="1555" fill={`url(#${uid}-bg)`} />
      <rect width="1000" height="1555" fill={`url(#${uid}-grid)`} />
      <rect width="1000" height="1555" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          EVENT-DRIVEN ORDER PROCESSING ON AWS
        </tspan>
      </text>
      <text fontSize="11.5" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65.25">
          One Amazon EventBridge bus fans order events out to an AWS Step Functions workflow, an Amazon SQS billing queue and an Amazon SNS topic
        </tspan>
      </text>
      <g id={`${uid}-g-cloud`}>
        <rect x="28" y="333" width="944" height="1129" rx="2.27" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" />
        <g opacity="0">
          <rect x="28" y="333" width="944" height="1129" rx="2.27" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.14" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0556;0.0841;0.9114;0.94;1" dur="6.298s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-region`}>
        <rect x="48" y="391" width="904" height="1051" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" strokeDasharray="3.41 3.41" />
        <g opacity="0">
          <rect x="48" y="391" width="904" height="1051" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.14" strokeDasharray="3.41 3.41" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0556;0.0841;0.9114;0.94;1" dur="6.298s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-workflow`}>
        <rect x="68" y="952" width="413" height="166" rx="2.27" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" />
        <g opacity="0">
          <rect x="68" y="952" width="413" height="166" rx="2.27" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.14" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0556;0.0841;0.9114;0.94;1" dur="6.298s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M576 167 L576 448.43" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M571.45 442.18 L576 449 L580.55 442.18" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M576 167 L576 448.43" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.36" 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.1985;0.3216;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.298s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1985;0.227;0.9;0.9286;1" dur="6.298s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M571.45 442.18 L576 449 L580.55 442.18" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3216;0.3502;0.9;0.9286;1" dur="6.298s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M576 552 L576 707.43" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M571.45 701.18 L576 708 L580.55 701.18" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M576 552 L576 707.43" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.36" 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.3597;0.4278;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.298s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3597;0.3883;0.9;0.9286;1" dur="6.298s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M571.45 701.18 L576 708 L580.55 701.18" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4278;0.4564;0.9;0.9286;1" dur="6.298s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M548 796 L548 808 Q548 816 540 816 L283 816 Q275 816 275 824 L275 951.43" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M270.45 945.18 L275 952 L279.55 945.18" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M548 796 L548 808 Q548 816 540 816 L283 816 Q275 816 275 824 L275 951.43" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.36" 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.4659;0.6247;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.298s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4659;0.4945;0.9;0.9286;1" dur="6.298s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M270.45 945.18 L275 952 L279.55 945.18" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6247;0.6533;0.9;0.9286;1" dur="6.298s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M176 1054 L215.43 1054" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M209.18 1058.55 L216 1054 L209.18 1049.45" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M319 1054 L358.43 1054" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M352.18 1058.55 L359 1054 L352.18 1049.45" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M275 1118 L275 1333.43" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M270.45 1327.18 L275 1334 L279.55 1327.18" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M275 1118 L275 1333.43" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.36" 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.6628;0.7571;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.298s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6628;0.6914;0.9;0.9286;1" dur="6.298s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M270.45 1327.18 L275 1334 L279.55 1327.18" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7571;0.7857;0.9;0.9286;1" dur="6.298s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M576 796 L576 990.43" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.55 3.41" />
        <path d="M571.45 984.18 L576 991 L580.55 984.18" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e8`}>
        <path d="M576 1079 L576 1181.43" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.55 3.41" />
        <path d="M571.45 1175.18 L576 1182 L580.55 1175.18" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e9`}>
        <path d="M605 796 L605 808 Q605 816 613 816 L739 816 Q747 816 747 824 L747 990.43" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.55 3.41" />
        <path d="M742.45 984.18 L747 991 L751.55 984.18" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e10`}>
        <path d="M727 1079 L727 1189.93" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.55 3.41" />
        <path d="M722.45 1183.68 L727 1190.5 L731.55 1183.68" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e11`}>
        <path d="M766 1079 L766 1130 Q766 1138 774 1138 L870 1138 Q878 1138 878 1146 L878 1181.43" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.55 3.41" />
        <path d="M873.45 1175.18 L878 1182 L882.55 1175.18" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.14" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-el-e1`}>
        <circle cx="595" cy="245" r="14" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" />
        <text fontSize="13" fontWeight="700" fill="#9d9fa0" textAnchor="middle">
          <tspan x="595" y="249.62">
            1
          </tspan>
        </text>
        <g transform="translate(595 245)">
          <g opacity="0">
            <circle r="14" fill="#60a5fa" />
            <text fontSize="13" fontWeight="700" fill="#0b1012" textAnchor="middle">
              <tspan x="0" y="4.62">
                1
              </tspan>
            </text>
            <animate attributeName="opacity" values="0;0;1;1;1;0;0" keyTimes="0;0.1985;0.227;0.2556;0.9;0.94;1" dur="6.298s" repeatCount="indefinite" />
            <animateTransform attributeName="transform" type="scale" values="0.4;0.4;1.3;1;1;1;0.4" keyTimes="0;0.1985;0.227;0.2556;0.9;0.94;1" dur="6.298s" repeatCount="indefinite" />
          </g>
        </g>
      </g>
      <g id={`${uid}-el-e2`}>
        <rect x="613" y="616" width="81" height="28" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.14" />
        <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#979899" textAnchor="middle">
          <tspan x="653.73" y="632.75">
            ORDERPLACED
          </tspan>
        </text>
        <g opacity="0">
          <rect x="613" y="616" width="81" height="28" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.14" />
          <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#60a5fa" textAnchor="middle">
            <tspan x="653.73" y="632.75">
              ORDERPLACED
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3597;0.3883;0.9;0.9286;1" dur="6.298s" repeatCount="indefinite" />
        </g>
        <circle cx="595" cy="630" r="14" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" />
        <text fontSize="13" fontWeight="700" fill="#9d9fa0" textAnchor="middle">
          <tspan x="595" y="634.62">
            2
          </tspan>
        </text>
        <g transform="translate(595 630)">
          <g opacity="0">
            <circle r="14" fill="#60a5fa" />
            <text fontSize="13" fontWeight="700" fill="#0b1012" textAnchor="middle">
              <tspan x="0" y="4.62">
                2
              </tspan>
            </text>
            <animate attributeName="opacity" values="0;0;1;1;1;0;0" keyTimes="0;0.3597;0.3883;0.4169;0.9;0.94;1" dur="6.298s" repeatCount="indefinite" />
            <animateTransform attributeName="transform" type="scale" values="0.4;0.4;1.3;1;1;1;0.4" keyTimes="0;0.3597;0.3883;0.4169;0.9;0.94;1" dur="6.298s" repeatCount="indefinite" />
          </g>
        </g>
      </g>
      <g id={`${uid}-el-e3`}>
        <rect x="312" y="860" width="90" height="28" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.14" />
        <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#979899" textAnchor="middle">
          <tspan x="357.23" y="876.75">
            FULFILLMENT RULE
          </tspan>
        </text>
        <g opacity="0">
          <rect x="312" y="860" width="90" height="28" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.14" />
          <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#60a5fa" textAnchor="middle">
            <tspan x="357.23" y="876.75">
              FULFILLMENT RULE
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4659;0.4945;0.9;0.9286;1" dur="6.298s" repeatCount="indefinite" />
        </g>
        <circle cx="294" cy="874" r="14" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" />
        <text fontSize="13" fontWeight="700" fill="#9d9fa0" textAnchor="middle">
          <tspan x="294" y="878.62">
            3
          </tspan>
        </text>
        <g transform="translate(294 874)">
          <g opacity="0">
            <circle r="14" fill="#60a5fa" />
            <text fontSize="13" fontWeight="700" fill="#0b1012" textAnchor="middle">
              <tspan x="0" y="4.62">
                3
              </tspan>
            </text>
            <animate attributeName="opacity" values="0;0;1;1;1;0;0" keyTimes="0;0.4659;0.4945;0.5231;0.9;0.94;1" dur="6.298s" repeatCount="indefinite" />
            <animateTransform attributeName="transform" type="scale" values="0.4;0.4;1.3;1;1;1;0.4" keyTimes="0;0.4659;0.4945;0.5231;0.9;0.94;1" dur="6.298s" repeatCount="indefinite" />
          </g>
        </g>
      </g>
      <g id={`${uid}-el-e6`}>
        <rect x="312" y="1212" width="78" height="28" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.14" />
        <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#979899" textAnchor="middle">
          <tspan x="351.23" y="1228.75">
            ORDER STATUS
          </tspan>
        </text>
        <g opacity="0">
          <rect x="312" y="1212" width="78" height="28" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.14" />
          <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#60a5fa" textAnchor="middle">
            <tspan x="351.23" y="1228.75">
              ORDER STATUS
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6628;0.6914;0.9;0.9286;1" dur="6.298s" repeatCount="indefinite" />
        </g>
        <circle cx="294" cy="1226" r="14" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" />
        <text fontSize="13" fontWeight="700" fill="#9d9fa0" textAnchor="middle">
          <tspan x="294" y="1230.62">
            4
          </tspan>
        </text>
        <g transform="translate(294 1226)">
          <g opacity="0">
            <circle r="14" fill="#60a5fa" />
            <text fontSize="13" fontWeight="700" fill="#0b1012" textAnchor="middle">
              <tspan x="0" y="4.62">
                4
              </tspan>
            </text>
            <animate attributeName="opacity" values="0;0;1;1;1;0;0" keyTimes="0;0.6628;0.6914;0.72;0.9;0.94;1" dur="6.298s" repeatCount="indefinite" />
            <animateTransform attributeName="transform" type="scale" values="0.4;0.4;1.3;1;1;1;0.4" keyTimes="0;0.6628;0.6914;0.72;0.9;0.94;1" dur="6.298s" repeatCount="indefinite" />
          </g>
        </g>
      </g>
      <g id={`${uid}-el-e7`}>
        <rect x="581" y="863.5" width="68" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.14" />
        <text fontSize="7.5" fontWeight="700" letterSpacing="0.45" fill="#979899" textAnchor="middle">
          <tspan x="615.23" y="876.66">
            BILLING RULE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e9`}>
        <rect x="752" y="863.5" width="97" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.14" />
        <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#979899" textAnchor="middle">
          <tspan x="800.73" y="876.75">
            NOTIFICATION RULE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-cloud`}>
        <rect x="28" y="333" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s1`} x="33.38" y="338.38" width="29.24" height="29.24" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <rect x="28" y="333" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s1`} x="33.38" y="338.38" width="29.24" height="29.24" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0556;0.0841;0.9114;0.94;1" dur="6.298s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="76" y="356.91">
            AWS CLOUD
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-region`}>
        <rect x="48" y="391" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s2`} x="53.38" y="396.38" width="29.24" height="29.24" filter={`url(#${uid}-f3)`} />
        <g opacity="0">
          <rect x="48" y="391" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s2`} x="53.38" y="396.38" width="29.24" height="29.24" filter={`url(#${uid}-f4)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0556;0.0841;0.9114;0.94;1" dur="6.298s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="96" y="414.91">
            US-EAST-1
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-workflow`}>
        <rect x="68" y="952" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s3`} x="73.38" y="957.38" width="29.24" height="29.24" filter={`url(#${uid}-f3)`} />
        <g opacity="0">
          <rect x="68" y="952" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s3`} x="73.38" y="957.38" width="29.24" height="29.24" filter={`url(#${uid}-f4)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0556;0.0841;0.9114;0.94;1" dur="6.298s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="116" y="975.91">
            AWS STEP FUNCTIONS WORKFLOW
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-customers`}>
        <rect x="551.5" y="96" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" />
        <g opacity="0">
          <rect x="551.5" y="96" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.14" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1111;0.1397;0.9114;0.94;1" dur="6.298s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s4`} x="561.1" y="105.6" width="28.8" height="28.8" />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="575.92" y="162.18">
            CUSTOMERS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-api`}>
        <rect x="551.5" y="449" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" />
        <g opacity="0">
          <rect x="551.5" y="449" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.14" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1111;0.1397;0.9114;0.94;1" dur="6.298s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="554.86" y="452.36" width="41.28" height="41.28" filter={`url(#${uid}-f5)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="575.92" y="515.18">
            ORDERS API
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="575.51" y="532.7">
            Amazon API Gateway,
          </tspan>
          <tspan x="575.51" y="547.7">
            POST /orders
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-bus`}>
        <rect x="552" y="708" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" />
        <g opacity="0">
          <rect x="552" y="708" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.14" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1111;0.1397;0.9114;0.94;1" dur="6.298s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="562.08" y="718.08" width="27.84" height="27.84" filter={`url(#${uid}-f6)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="576.42" y="774.18">
            ORDERS EVENT BUS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="576.01" y="791.7">
            Amazon EventBridge
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-reserve`}>
        <rect x="108" y="1010" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" />
        <g opacity="0">
          <rect x="108" y="1010" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.14" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1111;0.1397;0.9114;0.94;1" dur="6.298s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="111.36" y="1013.36" width="41.28" height="41.28" filter={`url(#${uid}-f5)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="132.42" y="1076.18">
            RESERVE STOCK
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="132" y="1093.7">
            AWS Lambda
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-charge`}>
        <rect x="243.5" y="1010" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" />
        <g opacity="0">
          <rect x="243.5" y="1010" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.14" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1111;0.1397;0.9114;0.94;1" dur="6.298s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="246.86" y="1013.36" width="41.28" height="41.28" filter={`url(#${uid}-f5)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="267.92" y="1076.18">
            CHARGE PAYMENT
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="267.5" y="1093.7">
            AWS Lambda
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-ship`}>
        <rect x="386" y="1010" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" />
        <g opacity="0">
          <rect x="386" y="1010" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.14" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1111;0.1397;0.9114;0.94;1" dur="6.298s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="389.36" y="1013.36" width="41.28" height="41.28" filter={`url(#${uid}-f5)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="410.42" y="1076.18">
            CREATE SHIPMENT
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="410" y="1093.7">
            AWS Lambda
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-table`}>
        <rect x="250.5" y="1334" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" />
        <g opacity="0">
          <rect x="250.5" y="1334" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.14" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1111;0.1397;0.9114;0.94;1" dur="6.298s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="260.58" y="1344.08" width="27.84" height="27.84" filter={`url(#${uid}-f6)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="274.93" y="1400.18">
            ORDERS TABLE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="274.51" y="1417.7">
            Amazon DynamoDB
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-billing`}>
        <rect x="551.5" y="991" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" />
        <g opacity="0">
          <rect x="551.5" y="991" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.14" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1111;0.1397;0.9114;0.94;1" dur="6.298s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="561.58" y="1001.08" width="27.84" height="27.84" filter={`url(#${uid}-f6)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="575.92" y="1057.18">
            BILLING QUEUE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="575.5" y="1074.7">
            Amazon SQS queue
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-invoice`}>
        <rect x="551.5" y="1182" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" />
        <g opacity="0">
          <rect x="551.5" y="1182" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.14" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1111;0.1397;0.9114;0.94;1" dur="6.298s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="554.86" y="1185.36" width="41.28" height="41.28" filter={`url(#${uid}-f5)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="575.92" y="1248.18">
            INVOICE GENERATOR
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="575.5" y="1265.7">
            AWS Lambda
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-notices`}>
        <rect x="722.5" y="991" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" />
        <g opacity="0">
          <rect x="722.5" y="991" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.14" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1111;0.1397;0.9114;0.94;1" dur="6.298s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s10`} x="732.58" y="1001.08" width="27.84" height="27.84" filter={`url(#${uid}-f6)`} />
        <text fontSize="10" fontWeight="700" letterSpacing="0.8" fill="#9d9fa0" textAnchor="middle">
          <tspan x="746.91" y="1057">
            ORDER NOTIFICATIONS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="746.51" y="1074.7">
            Amazon SNS topic
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-email`}>
        <rect x="702.5" y="1190.5" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" />
        <g opacity="0">
          <rect x="702.5" y="1190.5" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.14" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1111;0.1397;0.9114;0.94;1" dur="6.298s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s11`} x="712.58" y="1200.58" width="27.84" height="27.84" filter={`url(#${uid}-f6)`} />
        <text fontSize="10.25" fontWeight="700" letterSpacing="0.82" fill="#9d9fa0" textAnchor="middle">
          <tspan x="726.9" y="1256.59">
            EMAIL SUBSCRIPTION
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-analytics`}>
        <rect x="853.5" y="1182" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.14" />
        <g opacity="0">
          <rect x="853.5" y="1182" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.14" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1111;0.1397;0.9114;0.94;1" dur="6.298s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="863.58" y="1192.08" width="27.84" height="27.84" filter={`url(#${uid}-f6)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="877.92" y="1248.18">
            ANALYTICS QUEUE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="877.5" y="1265.7">
            Amazon SQS queue
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <path d="M576 167 L576 448.43" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.73" pathLength="1" strokeDasharray="0.1 2" strokeDashoffset="0.1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.1;0.1;-0.9;-1;-1" keyTimes="0;0.1985;0.3216;0.3345;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.298s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1985;0.2001;0.3345;0.3361;1" dur="6.298s" repeatCount="indefinite" />
        </path>
        <circle r="2.84" fill="#60a5fa" opacity="0">
          <animateMotion path="M576 167 L576 448.43" dur="6.298s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.1985;0.3216;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.1746;0.1985;0.3597;0.3835;1" dur="6.298s" repeatCount="indefinite" />
        </circle>
        <path d="M576 552 L576 707.43" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.73" pathLength="1" strokeDasharray="0.19 2" strokeDashoffset="0.19" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.19;0.19;-0.81;-1;-1" keyTimes="0;0.3597;0.4278;0.4408;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.298s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3597;0.3613;0.4408;0.4423;1" dur="6.298s" repeatCount="indefinite" />
        </path>
        <circle r="2.84" fill="#60a5fa" opacity="0">
          <animateMotion path="M576 552 L576 707.43" dur="6.298s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3597;0.4278;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.3359;0.3597;0.4659;0.4897;1" dur="6.298s" repeatCount="indefinite" />
        </circle>
        <path d="M548 796 L548 808 Q548 816 540 816 L283 816 Q275 816 275 824 L275 951.43" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.73" pathLength="1" strokeDasharray="0.07 2" strokeDashoffset="0.07" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.07;0.07;-0.93;-1;-1" keyTimes="0;0.4659;0.6247;0.6356;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.298s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4659;0.4675;0.6356;0.6372;1" dur="6.298s" repeatCount="indefinite" />
        </path>
        <circle r="2.84" fill="#60a5fa" opacity="0">
          <animateMotion path="M548 796 L548 808 Q548 816 540 816 L283 816 Q275 816 275 824 L275 951.43" dur="6.298s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4659;0.6247;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.4421;0.4659;0.6628;0.6866;1" dur="6.298s" repeatCount="indefinite" />
        </circle>
        <path d="M275 1118 L275 1333.43" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.73" pathLength="1" strokeDasharray="0.14 2" strokeDashoffset="0.14" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.14;0.14;-0.86;-1;-1" keyTimes="0;0.6628;0.7571;0.77;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.298s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6628;0.6644;0.77;0.7716;1" dur="6.298s" repeatCount="indefinite" />
        </path>
        <circle r="2.84" fill="#60a5fa" opacity="0">
          <animateMotion path="M275 1118 L275 1333.43" dur="6.298s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6628;0.7571;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.639;0.6628;0.7571;0.7809;1" dur="6.298s" repeatCount="indefinite" />
        </circle>
        <circle r="2.27" fill="#60a5fa" opacity="0">
          <animateMotion path="M576 796 L576 990.43" dur="6.298s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4499;0.535;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.426;0.4499;0.535;0.5588;1" dur="6.298s" repeatCount="indefinite" />
        </circle>
        <circle r="2.27" fill="#60a5fa" opacity="0">
          <animateMotion path="M605 796 L605 808 Q605 816 613 816 L739 816 Q747 816 747 824 L747 990.43" dur="6.298s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6174;0.7646;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.5936;0.6174;0.7646;0.7884;1" dur="6.298s" repeatCount="indefinite" />
        </circle>
      </g>
      <g id={`${uid}-legend`}>
        <rect x="729" y="1474" width="243" height="53" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.14" />
        <path d="M739 1491.5 H767" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.14" strokeLinecap="round" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="775" y="1494.87">
            NUMBERED ORDER PATH
          </tspan>
        </text>
        <path d="M739 1509.5 H767" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.14" strokeLinecap="round" strokeDasharray="4.55 3.41" />
        <text fontSize="8.25" fontWeight="700" letterSpacing="0.5" fill="#9d9fa0">
          <tspan x="775" y="1512.43">
            OTHER RULE TARGETS AND SUBSCRIBERS
          </tspan>
        </text>
      </g>
    </svg>
  );
}
