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

export default function ContainerDiagramForAnOnlineStore(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="720" height="1360" viewBox="0 0 720 1360" 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`}>
        Container diagram for an online store
      </title>
      <desc id={`${uid}-sdw-desc`}>
        Container diagram for an online store. 8 components in 1 groups. Connections: Customer to Web application (Browses and buys products using [HTTPS]); Support staff to Back office (Manages orders using [HTTPS]); Web application to API application (Makes API calls to [JSON/HTTPS]); Back office to API application (Makes API calls to [JSON/HTTPS]); API application to Database (Reads and writes [SQL]); API application to Payment provider (Charges cards and issues refunds [HTTPS]); API application to Email service (Sends e-mail using [SMTP]); Customer to Email service (Sends receipts to [SMTP]).
      </desc>
      <defs>
        <linearGradient id={`${uid}-bg`} x1="0" y1="0" x2="0.34" y2="0.94">
          <stop offset="0" stopColor="#0e1a24" />
          <stop offset="0.6" stopColor="#0b1012" />
        </linearGradient>
        <pattern id={`${uid}-grid`} width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M0 0.5H20M0.5 0V20" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="390.5" cy="558" r="535.21">
          <stop offset="0" stopColor="#60a5fa" stopOpacity="0.12" />
          <stop offset="1" stopColor="#60a5fa" stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect width="720" height="1360" fill={`url(#${uid}-bg)`} />
      <rect width="720" height="1360" fill={`url(#${uid}-grid)`} />
      <rect width="720" height="1360" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          CONTAINER DIAGRAM FOR AN ONLINE STORE
        </tspan>
      </text>
      <text fontSize="11.25" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65.16">
          C4 model, level 2: the containers inside the system, and the people and external systems around it
        </tspan>
      </text>
      <g id={`${uid}-g-store`}>
        <rect x="225" y="370" width="465" height="656" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" strokeDasharray="3 3" />
        <g opacity="0">
          <rect x="225" y="370" width="465" height="656" fill="#60a5fa" fillOpacity="0.04" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" strokeDasharray="3 3" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0713;0.108;0.9033;0.94;1" dur="4.908s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M337 201 L337 421.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M333 416 L337 422 L341 416" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M337 201 L337 421.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.2547;0.3954;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="4.908s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2547;0.2913;0.9;0.9367;1" dur="4.908s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M333 416 L337 422 L341 416" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3954;0.432;0.9;0.9367;1" dur="4.908s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M553 201 L553 421.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M549 416 L553 422 L557 416" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M337 512 L337 675.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M333 670 L337 676 L341 670" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M337 512 L337 675.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.4443;0.5487;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="4.908s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4443;0.4809;0.9;0.9367;1" dur="4.908s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M333 670 L337 676 L341 670" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5487;0.5854;0.9;0.9367;1" dur="4.908s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M553 512 L553 624 Q553 632 545 632 L400 632 Q392 632 392 640 L392 675.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M388 670 L392 676 L396 670" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M406 766 L406 863 Q406 871 414 871 L436 871 Q444 871 444 879 L444 914.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M440 909 L444 915 L448 909" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M406 766 L406 863 Q406 871 414 871 L436 871 Q444 871 444 879 L444 914.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.5976;0.7166;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="4.908s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5976;0.6343;0.9;0.9367;1" dur="4.908s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M440 909 L444 915 L448 909" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7166;0.7533;0.9;0.9367;1" dur="4.908s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M365 766 L365 778 Q365 786 357 786 L342 786 Q334 786 334 794 L334 1194.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M330 1189 L334 1195 L338 1189" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M323 766 L323 1043 Q323 1051 315 1051 L163 1051 Q155 1051 155 1059 L155 1202" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M151 1196.5 L155 1202.5 L159 1196.5" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e8`}>
        <path d="M275 201.5 L275 213 Q275 221 267 221 L36 221 Q28 221 28 229 L28 1143 Q28 1151 36 1151 L95 1151 Q103 1151 103 1159 L103 1202.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M279 207 L275 201 L271 207" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-el-e1`}>
        <rect x="342" y="265" width="143" height="36" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="413.76" y="277.11">
            BROWSES AND BUYS
          </tspan>
          <tspan x="413.76" y="295.11">
            PRODUCTS USING [HTTPS]
          </tspan>
        </text>
        <g opacity="0">
          <rect x="342" y="265" width="143" height="36" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="413.76" y="277.11">
              BROWSES AND BUYS
            </tspan>
            <tspan x="413.76" y="295.11">
              PRODUCTS USING [HTTPS]
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2547;0.2913;0.9;0.9367;1" dur="4.908s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e2`}>
        <rect x="558" y="265" width="134" height="36" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="625.26" y="277.11">
            MANAGES ORDERS USING
          </tspan>
          <tspan x="625.26" y="295.11">
            [HTTPS]
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e3`}>
        <rect x="342" y="576" width="112" height="36" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="398.26" y="588.11">
            MAKES API CALLS TO
          </tspan>
          <tspan x="398.26" y="606.11">
            [JSON/HTTPS]
          </tspan>
        </text>
        <g opacity="0">
          <rect x="342" y="576" width="112" height="36" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="398.26" y="588.11">
              MAKES API CALLS TO
            </tspan>
            <tspan x="398.26" y="606.11">
              [JSON/HTTPS]
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4443;0.4809;0.9;0.9367;1" dur="4.908s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e4`}>
        <rect x="558" y="576" width="112" height="36" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="614.26" y="588.11">
            MAKES API CALLS TO
          </tspan>
          <tspan x="614.26" y="606.11">
            [JSON/HTTPS]
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e5`}>
        <rect x="411" y="830" width="140" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="481.26" y="843.61">
            READS AND WRITES [SQL]
          </tspan>
        </text>
        <g opacity="0">
          <rect x="411" y="830" width="140" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="481.26" y="843.61">
              READS AND WRITES [SQL]
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5976;0.6343;0.9;0.9367;1" dur="4.908s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e6`}>
        <rect x="339" y="1095" width="153" height="36" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="415.76" y="1107.11">
            CHARGES CARDS AND ISSUES
          </tspan>
          <tspan x="415.76" y="1125.11">
            REFUNDS [HTTPS]
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e7`}>
        <rect x="160" y="1102.5" width="161" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="240.76" y="1116.11">
            SENDS E-MAIL USING [SMTP]
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e8`}>
        <rect x="33" y="687.5" width="152" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="109.26" y="701.11">
            SENDS RECEIPTS TO [SMTP]
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-store`}>
        <rect x="339" y="379" width="237.9" height="18.9" rx="3" fill="#0b1012" />
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="343" y="392.35">
            ONLINE STORE [SOFTWARE SYSTEM]
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-customer`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <circle cx="306" cy="110" r="13" />
          <rect x="214" y="124" width="184" height="77" rx="16" />
        </g>
        <g opacity="0">
          <g fill="#08427b" fillOpacity="0.15" stroke="#08427b" strokeOpacity="0.65" strokeWidth="1">
            <circle cx="306" cy="110" r="13" />
            <rect x="214" y="124" width="184" height="77" rx="16" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1426;0.1793;0.9033;0.94;1" dur="4.908s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="306.44" y="151.41">
            CUSTOMER
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="306.01" y="168.09">
            [Person]
          </tspan>
          <tspan x="306.01" y="183.09">
            Browses and buys products
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-staff`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <circle cx="553" cy="110" r="13" />
          <rect x="461" y="124" width="184" height="77" rx="16" />
        </g>
        <g opacity="0">
          <g fill="#08427b" fillOpacity="0.15" stroke="#08427b" strokeOpacity="0.65" strokeWidth="1">
            <circle cx="553" cy="110" r="13" />
            <rect x="461" y="124" width="184" height="77" rx="16" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1426;0.1793;0.9033;0.94;1" dur="4.908s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="553.44" y="151.41">
            SUPPORT STAFF
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="553" y="168.09">
            [Person]
          </tspan>
          <tspan x="553" y="183.09">
            Handles orders and refunds
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-web`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="245" y="422" width="183" height="90" rx="4" />
        </g>
        <g opacity="0">
          <g fill="#438dd5" fillOpacity="0.15" stroke="#438dd5" strokeOpacity="0.65" strokeWidth="1">
            <rect x="245" y="422" width="183" height="90" rx="4" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1426;0.1793;0.9033;0.94;1" dur="4.908s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="336.95" y="447.41">
            WEB APPLICATION
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="336.5" y="464.09">
            [Container: React]
          </tspan>
          <tspan x="336.5" y="479.09">
            Lets customers browse and
          </tspan>
          <tspan x="336.5" y="494.09">
            check out
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-admin`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="468" y="422" width="169" height="90" rx="4" />
        </g>
        <g opacity="0">
          <g fill="#438dd5" fillOpacity="0.15" stroke="#438dd5" strokeOpacity="0.65" strokeWidth="1">
            <rect x="468" y="422" width="169" height="90" rx="4" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1426;0.1793;0.9033;0.94;1" dur="4.908s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="552.95" y="447.41">
            BACK OFFICE
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="552.5" y="464.09">
            [Container: React]
          </tspan>
          <tspan x="552.5" y="479.09">
            Lets staff manage orders
          </tspan>
          <tspan x="552.5" y="494.09">
            and refunds
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-api`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="282" y="676" width="165" height="90" rx="4" />
        </g>
        <g opacity="0">
          <g fill="#438dd5" fillOpacity="0.15" stroke="#438dd5" strokeOpacity="0.65" strokeWidth="1">
            <rect x="282" y="676" width="165" height="90" rx="4" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1426;0.1793;0.9033;0.94;1" dur="4.908s" repeatCount="indefinite" />
        </g>
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="364.92" y="701.23">
            API APPLICATION
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="364.5" y="718.09">
            [Container: Go]
          </tspan>
          <tspan x="364.5" y="733.09">
            Serves catalog, cart and
          </tspan>
          <tspan x="364.5" y="748.09">
            checkout
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-db`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <path d="M353 923 A91 8 0 0 1 535 923 V998 A91 8 0 0 1 353 998 Z" />
          <path d="M353 923 A91 8 0 0 0 535 923" fill="none" />
        </g>
        <g opacity="0">
          <g fill="#438dd5" fillOpacity="0.15" stroke="#438dd5" strokeOpacity="0.65" strokeWidth="1">
            <path d="M353 923 A91 8 0 0 1 535 923 V998 A91 8 0 0 1 353 998 Z" />
            <path d="M353 923 A91 8 0 0 0 535 923" fill="none" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1426;0.1793;0.9033;0.94;1" dur="4.908s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="444.44" y="953.41">
            DATABASE
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="444" y="970.09">
            [Container: PostgreSQL]
          </tspan>
          <tspan x="444" y="985.09">
            Stores products and orders
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-payments`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="247" y="1195" width="173" height="90" rx="4" />
        </g>
        <g opacity="0">
          <g fill="#999999" fillOpacity="0.15" stroke="#999999" strokeOpacity="0.65" strokeWidth="1">
            <rect x="247" y="1195" width="173" height="90" rx="4" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1426;0.1793;0.9033;0.94;1" dur="4.908s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="333.94" y="1220.41">
            PAYMENT PROVIDER
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="333.51" y="1237.09">
            [Software System]
          </tspan>
          <tspan x="333.51" y="1252.09">
            Takes card payments and
          </tspan>
          <tspan x="333.51" y="1267.09">
            refunds
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-email`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="51" y="1202.5" width="156" height="75" rx="4" />
        </g>
        <g opacity="0">
          <g fill="#999999" fillOpacity="0.15" stroke="#999999" strokeOpacity="0.65" strokeWidth="1">
            <rect x="51" y="1202.5" width="156" height="75" rx="4" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1426;0.1793;0.9033;0.94;1" dur="4.908s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="129.44" y="1227.91">
            EMAIL SERVICE
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="129" y="1244.59">
            [Software System]
          </tspan>
          <tspan x="129" y="1259.59">
            Delivers order receipts
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <path d="M337 201 L337 421.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.12 2" strokeDashoffset="0.12" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.12;0.12;-0.88;-1;-1" keyTimes="0;0.2547;0.3954;0.412;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="4.908s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2547;0.2567;0.412;0.414;1" dur="4.908s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M337 201 L337 421.5" dur="4.908s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.2547;0.3954;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.2241;0.2547;0.4443;0.4748;1" dur="4.908s" repeatCount="indefinite" />
        </circle>
        <path d="M337 512 L337 675.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.16 2" strokeDashoffset="0.16" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.16;0.16;-0.84;-1;-1" keyTimes="0;0.4443;0.5487;0.5653;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="4.908s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4443;0.4463;0.5653;0.5673;1" dur="4.908s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M337 512 L337 675.5" dur="4.908s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4443;0.5487;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.4137;0.4443;0.5976;0.6281;1" dur="4.908s" repeatCount="indefinite" />
        </circle>
        <circle r="2" fill="#60a5fa" opacity="0">
          <animateMotion path="M553 512 L553 624 Q553 632 545 632 L400 632 Q392 632 392 640 L392 675.5" dur="4.908s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4626;0.6663;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.432;0.4626;0.6663;0.6969;1" dur="4.908s" repeatCount="indefinite" />
        </circle>
        <path d="M406 766 L406 863 Q406 871 414 871 L436 871 Q444 871 444 879 L444 914.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" 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.5976;0.7166;0.7332;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="4.908s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5976;0.5996;0.7332;0.7353;1" dur="4.908s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M406 766 L406 863 Q406 871 414 871 L436 871 Q444 871 444 879 L444 914.5" dur="4.908s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5976;0.7166;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.567;0.5976;0.7166;0.7472;1" dur="4.908s" repeatCount="indefinite" />
        </circle>
        <circle r="2" fill="#60a5fa" opacity="0">
          <animateMotion path="M365 766 L365 778 Q365 786 357 786 L342 786 Q334 786 334 794 L334 1194.5" dur="4.908s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6011;0.8049;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.5706;0.6011;0.8049;0.8354;1" dur="4.908s" repeatCount="indefinite" />
        </circle>
      </g>
      <g id={`${uid}-legend`}>
        <rect x="497" y="1297" width="195" height="35" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <path d="M507 1314.5 H535" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" />
        <text fontSize="8.25" fontWeight="700" letterSpacing="0.5" fill="#9d9fa0">
          <tspan x="543" y="1317.43">
            RELATIONSHIP [TECHNOLOGY]
          </tspan>
        </text>
      </g>
    </svg>
  );
}