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

export default function WebApplicationOnRedHatOpenShiftOnIBMCloud(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="1067" height="1767" viewBox="0 0 1067 1767" 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 application on Red Hat OpenShift on IBM Cloud
      </title>
      <desc id={`${uid}-sdw-desc`}>
        Web application on Red Hat OpenShift on IBM Cloud. 20 components in 9 groups. Connections: Web browser to Cloud Internet Services (HTTPS 443); Mobile app to Cloud Internet Services (HTTPS 443); Mobile app to App ID (sign in); Cloud Internet Services to Cloud Object Storage (static content); Cloud Internet Services to VPC Load Balancer (API calls); VPC Load Balancer to Red Hat OpenShift on IBM Cloud (across 3 zones); Red Hat OpenShift on IBM Cloud to Virtual Private Endpoints; Virtual Private Endpoints to Container Registry (pull images); Virtual Private Endpoints to Databases for PostgreSQL (SQL); Virtual Private Endpoints to Cloud Object Storage (backups); Virtual Private Endpoints to Secrets Manager (certificates); Virtual Private Endpoints to Key Protect (keys); Virtual Private Endpoints to IBM Cloud Logs (logging agent); Virtual Private Endpoints to IBM Cloud Monitoring (monitoring agent); Operations team to Client VPN for VPC (OpenVPN); Client VPN for VPC to Bastion hosts (3) (SSH 22).
      </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="24.25" height="24.25" patternUnits="userSpaceOnUse">
          <path d="M0 0.61H24.25M0.61 0V24.25" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1.21" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="341" cy="869.25" r="692.74">
          <stop offset="0" stopColor="#60a5fa" stopOpacity="0.12" />
          <stop offset="1" stopColor="#60a5fa" stopOpacity="0" />
        </radialGradient>
        <symbol id={`${uid}-s1`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 21h18M9 8h1m-1 4h1m-1 4h1m4-8h1m-1 4h1m-1 4h1M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16" />
        </symbol>
        <symbol id={`${uid}-s2`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#60a5fa" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 21h18M9 8h1m-1 4h1m-1 4h1m4-8h1m-1 4h1m-1 4h1M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16" />
        </symbol>
        <symbol id={`${uid}-s3`} viewBox="0 0 24 24" overflow="visible">
          <g fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
            <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m.6-3h16.8M3.6 15h16.8" />
            <path d="M11.5 3a17 17 0 0 0 0 18m1-18a17 17 0 0 1 0 18" />
          </g>
        </symbol>
        <symbol id={`${uid}-s4`} viewBox="0 0 24 24" overflow="visible">
          <g fill="none" stroke="#60a5fa" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
            <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m.6-3h16.8M3.6 15h16.8" />
            <path d="M11.5 3a17 17 0 0 0 0 18m1-18a17 17 0 0 1 0 18" />
          </g>
        </symbol>
        <symbol id={`${uid}-s5`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M24.58 13.65a9.733 9.733 0 0 0-18.294 3.889A6.75 6.75 0 0 0 7 31h16a8.747 8.747 0 0 0 1.58-17.35M23 29.5H7a5.237 5.237 0 0 1-.7-10.43a9.7 9.7 0 0 0 1.104 3.785a.75.75 0 1 0 1.322-.71a8.25 8.25 0 0 1 14.026-8.632a8.75 8.75 0 0 0-6.315 2.95a.75.75 0 1 0 1.124.992A7.25 7.25 0 1 1 23 29.5m8.898-19.245a.76.76 0 0 0-1.036-.278l-3.02 1.744a.759.759 0 1 0 .758 1.314l3.02-1.744a.76.76 0 0 0 .278-1.036M22.676 7.87a.76.76 0 0 0 1.037-.278l1.744-3.02a.759.759 0 0 0-1.314-.758l-1.744 3.02a.76.76 0 0 0 .277 1.036M16 6.081a.76.76 0 0 0 .759-.759V1.835a.759.759 0 1 0-1.518 0v3.487a.76.76 0 0 0 .759.76m-7.713 1.51a.759.759 0 0 0 1.314-.759l-1.744-3.02a.759.759 0 1 0-1.314.76Zm-4.128 4.129l-3.02-1.744a.759.759 0 1 0-.76 1.314L3.4 13.035a.759.759 0 1 0 .759-1.314" />
        </symbol>
        <symbol id={`${uid}-s6`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#60a5fa" d="M24.58 13.65a9.733 9.733 0 0 0-18.294 3.889A6.75 6.75 0 0 0 7 31h16a8.747 8.747 0 0 0 1.58-17.35M23 29.5H7a5.237 5.237 0 0 1-.7-10.43a9.7 9.7 0 0 0 1.104 3.785a.75.75 0 1 0 1.322-.71a8.25 8.25 0 0 1 14.026-8.632a8.75 8.75 0 0 0-6.315 2.95a.75.75 0 1 0 1.124.992A7.25 7.25 0 1 1 23 29.5m8.898-19.245a.76.76 0 0 0-1.036-.278l-3.02 1.744a.759.759 0 1 0 .758 1.314l3.02-1.744a.76.76 0 0 0 .278-1.036M22.676 7.87a.76.76 0 0 0 1.037-.278l1.744-3.02a.759.759 0 0 0-1.314-.758l-1.744 3.02a.76.76 0 0 0 .277 1.036M16 6.081a.76.76 0 0 0 .759-.759V1.835a.759.759 0 1 0-1.518 0v3.487a.76.76 0 0 0 .759.76m-7.713 1.51a.759.759 0 0 0 1.314-.759l-1.744-3.02a.759.759 0 1 0-1.314.76Zm-4.128 4.129l-3.02-1.744a.759.759 0 1 0-.76 1.314L3.4 13.035a.759.759 0 1 0 .759-1.314" />
        </symbol>
        <symbol id={`${uid}-s7`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M20 20v-3a4 4 0 0 0-8 0v3a2.003 2.003 0 0 0-2 2v6a2.003 2.003 0 0 0 2 2h8a2.003 2.003 0 0 0 2-2v-6a2.003 2.003 0 0 0-2-2m-6-3a2 2 0 0 1 4 0v3h-4Zm-2 11v-6h8l.001 6Z" />
          <path fill="#919394" d="M25.829 10.115a10.01 10.01 0 0 0-7.939-7.933a10.003 10.003 0 0 0-11.72 7.933A7.502 7.502 0 0 0 7.491 25H8v-2h-.505a5.502 5.502 0 0 1-.97-10.916l1.35-.245l.259-1.345a8.01 8.01 0 0 1 15.731 0l.259 1.345l1.349.245A5.502 5.502 0 0 1 24.508 23H24v2h.508a7.502 7.502 0 0 0 1.32-14.885" />
        </symbol>
        <symbol id={`${uid}-s8`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#60a5fa" d="M20 20v-3a4 4 0 0 0-8 0v3a2.003 2.003 0 0 0-2 2v6a2.003 2.003 0 0 0 2 2h8a2.003 2.003 0 0 0 2-2v-6a2.003 2.003 0 0 0-2-2m-6-3a2 2 0 0 1 4 0v3h-4Zm-2 11v-6h8l.001 6Z" />
          <path fill="#60a5fa" d="M25.829 10.115a10.01 10.01 0 0 0-7.939-7.933a10.003 10.003 0 0 0-11.72 7.933A7.502 7.502 0 0 0 7.491 25H8v-2h-.505a5.502 5.502 0 0 1-.97-10.916l1.35-.245l.259-1.345a8.01 8.01 0 0 1 15.731 0l.259 1.345l1.349.245A5.502 5.502 0 0 1 24.508 23H24v2h.508a7.502 7.502 0 0 0 1.32-14.885" />
        </symbol>
        <symbol id={`${uid}-s9`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M26.461 15.797a12.1 12.1 0 0 0-1.179-4.317L29 10.13a12 12 0 0 0-1.028-1.738l-1.743.635a11.988 11.988 0 0 0-21.71 7.913l1.747-.642a12 12 0 0 0 .331 1.985l-3.713 1.355A12.2 12.2 0 0 0 4.757 23.7l1.966-.716l.002.004a11.9 11.9 0 0 0 4.67 3.89a12.013 12.013 0 0 0 15.945-5.804a11.9 11.9 0 0 0 1.08-5.992Zm-2.92 3.496a7.8 7.8 0 0 1-10.353 3.775a7.7 7.7 0 0 1-2.271-1.613l-1.985.724a7.84 7.84 0 0 1-2.074-3.99l3.725-1.357a7.8 7.8 0 0 1-.123-2.066l-1.752.637A7.773 7.773 0 0 1 19.765 8.94h.006a7.7 7.7 0 0 1 2.265 1.615l1.744-.634a7.8 7.8 0 0 1 1.229 1.656l-3.71 1.36a7.83 7.83 0 0 1 .977 4.388l1.968-.716a7.7 7.7 0 0 1-.703 2.685Z" />
        </symbol>
        <symbol id={`${uid}-s10`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#60a5fa" d="M26.461 15.797a12.1 12.1 0 0 0-1.179-4.317L29 10.13a12 12 0 0 0-1.028-1.738l-1.743.635a11.988 11.988 0 0 0-21.71 7.913l1.747-.642a12 12 0 0 0 .331 1.985l-3.713 1.355A12.2 12.2 0 0 0 4.757 23.7l1.966-.716l.002.004a11.9 11.9 0 0 0 4.67 3.89a12.013 12.013 0 0 0 15.945-5.804a11.9 11.9 0 0 0 1.08-5.992Zm-2.92 3.496a7.8 7.8 0 0 1-10.353 3.775a7.7 7.7 0 0 1-2.271-1.613l-1.985.724a7.84 7.84 0 0 1-2.074-3.99l3.725-1.357a7.8 7.8 0 0 1-.123-2.066l-1.752.637A7.773 7.773 0 0 1 19.765 8.94h.006a7.7 7.7 0 0 1 2.265 1.615l1.744-.634a7.8 7.8 0 0 1 1.229 1.656l-3.71 1.36a7.83 7.83 0 0 1 .977 4.388l1.968-.716a7.7 7.7 0 0 1-.703 2.685Z" />
        </symbol>
        <symbol id={`${uid}-s11`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M28 10h-5V6a2 2 0 0 0-2-2H11a2 2 0 0 0-2 2v4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V12a2 2 0 0 0-2-2M4 28V12h5v2H7v2h2v2H7v2h2v2H7v2h2v4Zm17 0H11V6h10Zm7 0h-5v-4h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h5Z" />
          <path fill="#919394" d="M14 8h4v2h-4zm0 4h4v2h-4zm0 4h4v2h-4z" />
        </symbol>
        <symbol id={`${uid}-s12`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#60a5fa" d="M28 10h-5V6a2 2 0 0 0-2-2H11a2 2 0 0 0-2 2v4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V12a2 2 0 0 0-2-2M4 28V12h5v2H7v2h2v2H7v2h2v2H7v2h2v4Zm17 0H11V6h10Zm7 0h-5v-4h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h5Z" />
          <path fill="#60a5fa" d="M14 8h4v2h-4zm0 4h4v2h-4zm0 4h4v2h-4z" />
        </symbol>
        <symbol id={`${uid}-s13`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M30 30h-2v-5a5.006 5.006 0 0 0-5-5v-2a7.01 7.01 0 0 1 7 7Zm-8 0h-2v-5a5.006 5.006 0 0 0-5-5H9a5.006 5.006 0 0 0-5 5v5H2v-5a7.01 7.01 0 0 1 7-7h6a7.01 7.01 0 0 1 7 7ZM20 2v2a5 5 0 0 1 0 10v2a7 7 0 0 0 0-14m-8 2a5 5 0 1 1-5 5a5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7a7 7 0 0 0-7-7" />
        </symbol>
        <symbol id={`${uid}-s14`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M26 2h4v4h-4zm0 6h4v4h-4zm-6-6h4v4h-4zm0 6h4v4h-4z" />
          <path fill="#919394" d="M28 16v6H4V6h12V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-6ZM18 28h-4v-4h4Z" />
        </symbol>
        <symbol id={`${uid}-s15`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M22 4H10a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h12a2.003 2.003 0 0 0 2-2V6a2 2 0 0 0-2-2m0 2v2H10V6ZM10 28V10h12v18Z" />
        </symbol>
        <symbol id={`${uid}-s16`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M27 22c-.7 0-1.4.3-1.9.7l-5.2-3.1c0-.2.1-.4.1-.6s0-.4-.1-.6l5.2-3.1c.5.4 1.2.7 1.9.7c1.7 0 3-1.3 3-3s-1.3-3-3-3s-3 1.3-3 3c0 .2 0 .4.1.6l-5.2 3.1c-.5-.4-1.2-.7-1.9-.7c-1.7 0-3 1.3-3 3s1.3 3 3 3c.7 0 1.4-.3 1.9-.7l5.2 3.1c0 .2-.1.4-.1.6c0 1.7 1.3 3 3 3s3-1.3 3-3s-1.3-3-3-3m0-10c.6 0 1 .4 1 1s-.4 1-1 1s-1-.4-1-1s.4-1 1-1m-10 8c-.6 0-1-.4-1-1s.4-1 1-1s1 .4 1 1s-.4 1-1 1m10 6c-.6 0-1-.4-1-1s.4-1 1-1s1 .4 1 1s-.4 1-1 1" />
          <path fill="#919394" d="M19 25H8.5c-3 0-5.5-2.5-5.5-5.5c0-2.7 1.9-4.9 4.5-5.4l1.3-.2l.3-1.3C9.9 8.7 13.2 6 17 6c.5 0 1 0 1.5.1c1.6.3 3 1.1 4.2 2.2l1.4-1.4c-1.4-1.4-3.2-2.4-5.2-2.7c-.6-.1-1.3-.2-1.9-.2c-4.7 0-8.9 3.3-9.8 8.1c-3.6.7-6.2 3.8-6.2 7.4C1 23.6 4.3 27 8.5 27H19z" />
        </symbol>
        <symbol id={`${uid}-s17`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M20 18h-6a3 3 0 0 0-3 3v2h2v-2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2h2v-2a3 3 0 0 0-3-3m-3-1a4 4 0 1 0 0-8a4 4 0 0 0 0 8m0-6a2 2 0 1 1 0 4a2 2 0 0 1 0-4" />
          <path fill="#919394" d="M17 30C9.28 30 3 23.72 3 16h2c0 6.617 5.383 12 12 12c5.226 0 9.816-3.338 11.421-8.307l1.904.614A13.96 13.96 0 0 1 17 30m14-14h-2c0-6.617-5.383-12-12-12V2c7.72 0 14 6.28 14 14M6 14l-2.139-1.013A5.02 5.02 0 0 1 1 8.467V2h10v6.468a5.02 5.02 0 0 1-2.861 4.52zM3 4v4.468a3.01 3.01 0 0 0 1.717 2.71L6 11.787l1.283-.607A3.01 3.01 0 0 0 9 8.468V4z" />
        </symbol>
        <symbol id={`${uid}-s18`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M28 20h-2v2h2v6H4v-6h10v-2H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2" />
          <circle cx="7" cy="25" r="1" fill="#919394" />
          <path fill="#919394" d="M30 8h-8v6h-6v8h8v-6h6Zm-8 12h-4v-4h4Zm6-6h-4v-4h4Zm-10-4h-8V2h8Zm-6-2h4V4h-4Z" />
        </symbol>
        <symbol id={`${uid}-s19`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M16 2C8.3 2 2 8.3 2 16s6.3 14 14 14h1V2zm-1 2v11h-5c.2-4.2 1.9-8.1 4.8-10.9h.2zm0 13v11h-.2c-2.9-2.8-4.6-6.7-4.8-10.9h5zM11.5 4.9C9.4 7.8 8.2 11.3 8 15H4c.4-4.6 3.4-8.5 7.5-10.1M4 17h4c.2 3.7 1.4 7.2 3.5 10.1C7.4 25.4 4.4 21.6 4 17m25 6h-1v-2c0-1.7-1.3-3-3-3s-3 1.3-3 3v2h-1c-.6 0-1 .4-1 1v5c0 .6.4 1 1 1h8c.6 0 1-.4 1-1v-5c0-.6-.4-1-1-1m-5-2c0-.6.4-1 1-1s1 .4 1 1v2h-2zm4 7h-6v-3h6zM25 8c1.7 0 3-1.3 3-3s-1.3-3-3-3s-3 1.3-3 3s1.3 3 3 3m0-4c.6 0 1 .4 1 1s-.4 1-1 1s-1-.4-1-1s.4-1 1-1m0 10c.6 0 1 .4 1 1s-.4 1-1 1s-1-.4-1-1s.4-1 1-1m0-4c.6 0 1 .4 1 1s-.4 1-1 1s-1-.4-1-1s.4-1 1-1" />
        </symbol>
        <symbol id={`${uid}-s20`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M8 30H2v-6h6Zm-4-2h2v-2H4Zm15 2h-6v-6h6Zm-4-2h2v-2h-2Zm15 2h-6v-6h6Zm-4-2h2v-2h-2ZM16 10a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4m0-6a2 2 0 1 0 2 2a2 2 0 0 0-2-2m10 12h-5a4.005 4.005 0 0 1-4-4h-2a4.005 4.005 0 0 1-4 4H6a2 2 0 0 0-2 2v4h2v-4h5a5.97 5.97 0 0 0 4-1.54V22h2v-5.54A5.97 5.97 0 0 0 21 18h5v4h2v-4a2 2 0 0 0-2-2" />
        </symbol>
        <symbol id={`${uid}-s21`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M27.527 2.709A2 2 0 0 0 26 2h-2.69a1.5 1.5 0 0 0-1.343.83L21.382 4H20v-.5A1.5 1.5 0 0 0 18.5 2h-5A1.5 1.5 0 0 0 12 3.5V4h-1.382l-.585-1.17A1.5 1.5 0 0 0 8.69 2H6a2 2 0 0 0-1.972 2.333L4.732 8.5A3 3 0 0 0 7.69 11H8v12a3.003 3.003 0 0 0-3 3v4h22v-4a3.003 3.003 0 0 0-3-3V11h.31a3 3 0 0 0 2.958-2.5l.704-4.167a2 2 0 0 0-.445-1.624M25 26v2H7v-2a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1m-3-3H10V11h12Zm3.296-14.833A1 1 0 0 1 24.31 9H7.69a1 1 0 0 1-.986-.833L6 4h2.382l1 2H14V4h4v2h4.617l1.001-2H26Z" />
        </symbol>
        <symbol id={`${uid}-s22`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M23 18v-2h-2.1c-.1-.6-.4-1.2-.7-1.8l1.5-1.5l-1.4-1.4l-1.5 1.5c-.5-.3-1.1-.6-1.8-.7V10h-2v2.1c-.6.1-1.2.4-1.8.7l-1.5-1.5l-1.4 1.4l1.5 1.5c-.3.5-.6 1.1-.7 1.8H9v2h2.1c.1.6.4 1.2.7 1.8l-1.5 1.5l1.4 1.4l1.5-1.5c.5.3 1.1.6 1.8.7V24h2v-2.1c.6-.1 1.2-.4 1.8-.7l1.5 1.5l1.4-1.4l-1.5-1.5c.3-.5.6-1.1.7-1.8zm-7 2c-1.7 0-3-1.3-3-3s1.3-3 3-3s3 1.3 3 3s-1.3 3-3 3" />
          <path fill="#919394" d="M29.948 18.99L27.355 7.803a2 2 0 0 0-1.124-1.37l-9.407-4.255a2 2 0 0 0-1.648 0L5.769 6.432a2 2 0 0 0-1.124 1.371L2.052 18.99a2 2 0 0 0 .39 1.705l6.886 8.559a2 2 0 0 0 1.558.746h10.228a2 2 0 0 0 1.558-.746l6.886-8.559a2 2 0 0 0 .39-1.705M21.114 28H10.886L4 19.441L6.593 8.254L16 4l9.407 4.255L28 19.44z" />
          <path fill="none" d="M0 0h32v32H0z" />
        </symbol>
        <symbol id={`${uid}-s23`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M20 27H7a2.006 2.006 0 0 1-2-2V12h2v13h13Z" />
          <path fill="#919394" d="m23.4 22l-4-4a3.6 3.6 0 0 0 .6-2a4.01 4.01 0 0 0-4-4a3.6 3.6 0 0 0-2 .6l-4-4V2H2v8h6.6l4 4a3.6 3.6 0 0 0-.6 2a4.01 4.01 0 0 0 4 4a3.6 3.6 0 0 0 2-.6l4 4V30h8v-8ZM8 8H4V4h4Zm8 10a2 2 0 1 1 2-2a2.006 2.006 0 0 1-2 2m12 10h-4v-4h4Z" />
          <path fill="#919394" d="M25 20h2V7a2.006 2.006 0 0 0-2-2H12v2h13Z" />
        </symbol>
        <symbol id={`${uid}-s24`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M17 13V6H8v16h16v-9Zm-7-5h5v5h-5Zm0 7h5v5h-5Zm12 5h-5v-5h5Z" />
          <path fill="#919394" d="M28 11h-9V2h9Zm-7-2h5V4h-5Zm7 11h-2v2h2v6H4v-6h2v-2H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2" />
          <circle cx="7" cy="25" r="1" fill="#919394" />
        </symbol>
        <symbol id={`${uid}-s25`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M21 3H11c-1.1 0-2 .9-2 2v22c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2M11 5h10v6H11zm0 8h10v6H11zm0 14v-6h10v6zM2 10v16c0 1.1.9 2 2 2h3v-2H4v-4h3v-2H4v-4h3v-2H4v-4h3V8H4c-1.1 0-2 .9-2 2m26-2h-3v2h3v4h-3v2h3v4h-3v2h3v4h-3v2h3c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2M14 9c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1m0 8c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1m0 8c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1" />
        </symbol>
        <symbol id={`${uid}-s26`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M20 16c0-.7-.2-1.4-.6-2l3.3-3.3l-1.4-1.4l-3.3 3.3c-.6-.4-1.3-.6-2-.6s-1.4.2-2 .6l-3.3-3.3l-1.4 1.4l3.3 3.3c-.4.6-.6 1.3-.6 2s.2 1.4.6 2l-3.3 3.3l1.4 1.4l3.3-3.3c.6.4 1.3.6 2 .6s1.4-.2 2-.6l3.3 3.3l1.4-1.4l-3.3-3.3c.4-.6.6-1.3.6-2m-4 2c-1.1 0-2-.9-2-2s.9-2 2-2s2 .9 2 2s-.9 2-2 2" />
          <path fill="#919394" d="M26 17h6v-2h-2.1C29.4 7.7 23.4 2 16 2C8.3 2 2 8.3 2 16s6.3 14 14 14c5.2 0 9.7-2.8 12.1-7l-1.7-1c-2.1 3.6-5.9 6-10.4 6c-6.6 0-12-5.4-12-12S9.4 4 16 4c6.3 0 11.4 4.9 11.9 11H26z" />
        </symbol>
        <symbol id={`${uid}-s27`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M26 14.1V2h-5v2h3v2h-3v2h3v6.1c-1.7.4-3 2-3 3.9c0 2.2 1.8 4 4 4s4-1.8 4-4c0-1.9-1.3-3.4-3-3.9M25 20c-1.1 0-2-.9-2-2s.9-2 2-2s2 .9 2 2s-.9 2-2 2" />
          <path fill="#919394" d="m15 31l-5.5-3.2c-3.4-2-5.5-5.6-5.5-9.5V4c0-1.1.9-2 2-2h12v2H6v14.3c0 3.2 1.7 6.2 4.5 7.8l4.5 2.7l4.5-2.7c1.1-.7 2.1-1.5 2.8-2.6l1.6 1.1c-.9 1.3-2.1 2.4-3.5 3.2z" />
        </symbol>
        <symbol id={`${uid}-s28`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M28 16v6H4V6h11V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-6ZM18 28h-4v-4h4Zm0-24h12v2H18z" />
          <path fill="#919394" d="M18 8h12v2H18zm0 4h6v2h-6z" />
        </symbol>
        <symbol id={`${uid}-s29`} viewBox="0 0 32 32" overflow="visible">
          <path fill="#919394" d="M28 16v6H4V6h7V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-6ZM18 28h-4v-4h4Z" />
          <path fill="#919394" d="M18 18h-.01a1 1 0 0 1-.951-.725L15.246 11H11V9h5a1 1 0 0 1 .962.725l1.074 3.76l3.009-9.78A1.01 1.01 0 0 1 22 3a.98.98 0 0 1 .949.684L24.72 9H30v2h-6a1 1 0 0 1-.949-.684l-1.013-3.04l-3.082 10.018A1 1 0 0 1 18 18" />
        </symbol>
      </defs>
      <rect width="1067" height="1767" fill={`url(#${uid}-bg)`} />
      <rect width="1067" height="1767" fill={`url(#${uid}-grid)`} />
      <rect width="1067" height="1767" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          WEB APPLICATION ON RED HAT OPENSHIFT ON IBM CLOUD
        </tspan>
      </text>
      <text fontSize="11.5" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65.25">
          Cloud Internet Services serves the static site from Object Storage and sends API calls to a three-zone OpenShift cluster in a VPC
        </tspan>
      </text>
      <g id={`${uid}-g-ops-net`}>
        <rect x="119" y="96" width="216" height="175" rx="2.43" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="119" y="96" width="216" height="175" rx="2.43" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.052;0.0787;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-public`}>
        <rect x="458" y="96" width="222" height="143" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" strokeDasharray="3.64 3.64" />
        <g opacity="0">
          <rect x="458" y="96" width="222" height="143" fill="#60a5fa" fillOpacity="0.04" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.21" strokeDasharray="3.64 3.64" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.052;0.0787;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-ibmcloud`}>
        <rect x="28" y="396" width="1011" height="1260" rx="2.43" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="28" y="396" width="1011" height="1260" rx="2.43" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.052;0.0787;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-vpc`}>
        <rect x="148" y="689" width="677" height="645" rx="2.43" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="148" y="689" width="677" height="645" rx="2.43" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.052;0.0787;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-services`}>
        <rect x="48" y="1459" width="930" height="177" rx="2.43" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="48" y="1459" width="930" height="177" rx="2.43" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.052;0.0787;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-cluster`}>
        <rect x="309" y="946" width="496" height="232" rx="2.43" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="309" y="946" width="496" height="232" rx="2.43" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.052;0.0787;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-zone-1`}>
        <rect x="329" y="998" width="132" height="160" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" strokeDasharray="3.64 3.64" />
        <g opacity="0">
          <rect x="329" y="998" width="132" height="160" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.21" strokeDasharray="3.64 3.64" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.052;0.0787;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-zone-2`}>
        <rect x="491" y="998" width="132" height="160" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" strokeDasharray="3.64 3.64" />
        <g opacity="0">
          <rect x="491" y="998" width="132" height="160" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.21" strokeDasharray="3.64 3.64" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.052;0.0787;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-zone-3`}>
        <rect x="653" y="998" width="132" height="160" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" strokeDasharray="3.64 3.64" />
        <g opacity="0">
          <rect x="653" y="998" width="132" height="160" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.21" strokeDasharray="3.64 3.64" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.052;0.0787;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M520 219 L520 351 Q520 359 528 359 L549 359 Q557 359 557 367 L557 447.39" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M552.15 440.73 L557 448 L561.85 440.73" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M520 219 L520 351 Q520 359 528 359 L549 359 Q557 359 557 367 L557 447.39" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.46" 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.1855;0.2873;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.737s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1855;0.2123;0.9;0.9267;1" dur="6.737s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M552.15 440.73 L557 448 L561.85 440.73" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2873;0.314;0.9;0.9267;1" dur="6.737s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M626 219 L626 282 Q626 290 618 290 L617 290 Q609 290 609 298 L609 351 Q609 359 601 359 L565 359 Q557 359 557 367 L557 447.39" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M552.15 440.73 L557 448 L561.85 440.73" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M626 219 L626 282 Q626 290 634 290 L690 290 Q698 290 698 298 L698 463.39" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M693.15 456.73 L698 464 L702.85 456.73" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M557 568 L557 575.5 Q557 583 564.5 583 L913 583 Q921 583 921 591 L921 966.89" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M916.15 960.23 L921 967.5 L925.85 960.23" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M557 568 L557 748.89" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M552.15 742.23 L557 749.5 L561.85 742.23" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M557 568 L557 748.89" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.46" 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.3229;0.3924;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.737s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3229;0.3496;0.9;0.9267;1" dur="6.737s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M552.15 742.23 L557 749.5 L561.85 742.23" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3924;0.4191;0.9;0.9267;1" dur="6.737s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M557 820.5 L557 945.39" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M552.15 938.73 L557 946 L561.85 938.73" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M557 820.5 L557 945.39" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.46" 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.428;0.4874;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.737s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.428;0.4547;0.9;0.9267;1" dur="6.737s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M552.15 938.73 L557 946 L561.85 938.73" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4874;0.5141;0.9;0.9267;1" dur="6.737s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M557 1178 L557 1225.39" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M552.15 1218.72 L557 1226 L561.85 1218.72" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M557 1178 L557 1225.39" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.46" 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.523;0.5824;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.737s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.523;0.5497;0.9;0.9267;1" dur="6.737s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M552.15 1218.72 L557 1226 L561.85 1218.72" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5824;0.6091;0.9;0.9267;1" dur="6.737s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e8`}>
        <path d="M543 1314 L543 1353 Q543 1361 535 1361 L133 1361 Q125 1361 125 1369 L125 1518.89" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M120.15 1512.23 L125 1519.5 L129.85 1512.23" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M543 1314 L543 1353 Q543 1361 535 1361 L133 1361 Q125 1361 125 1369 L125 1518.89" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.46" 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.618;0.7664;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.737s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.618;0.6447;0.9;0.9267;1" dur="6.737s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M120.15 1512.23 L125 1519.5 L129.85 1512.23" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7664;0.7931;0.9;0.9267;1" dur="6.737s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e9`}>
        <path d="M543 1314 L543 1353 Q543 1361 535 1361 L263 1361 Q255 1361 255 1369 L255 1510.39" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M250.15 1503.73 L255 1511 L259.85 1503.73" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e10`}>
        <path d="M543 1314 L543 1353 Q543 1361 535 1361 L402 1361 Q394 1361 394 1369 L394 1518.89" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M389.15 1512.23 L394 1519.5 L398.85 1512.23" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e11`}>
        <path d="M543 1314 L543 1518.89" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M538.15 1512.23 L543 1519.5 L547.85 1512.23" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e12`}>
        <path d="M543 1314 L543 1353 Q543 1361 551 1361 L654 1361 Q662 1361 662 1369 L662 1518.89" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M657.15 1512.23 L662 1519.5 L666.85 1512.23" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e13`}>
        <path d="M571 1314 L571 1345 Q571 1353 579 1353 L771 1353 Q779 1353 779 1361 L779 1518.89" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.21 3.03" />
        <path d="M774.15 1512.23 L779 1519.5 L783.85 1512.23" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e14`}>
        <path d="M571 1314 L571 1345 Q571 1353 579 1353 L901 1353 Q909 1353 909 1361 L909 1510.39" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.21 3.03" />
        <path d="M904.15 1503.73 L909 1511 L913.85 1503.73" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e15`}>
        <path d="M227 251 L227 740.39" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.85 3.64" />
        <path d="M222.15 733.73 L227 741 L231.85 733.73" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e16`}>
        <path d="M227 829 L227 1017.39" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.85 3.64" />
        <path d="M222.15 1010.73 L227 1018 L231.85 1010.73" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-el-e1`}>
        <rect x="525" y="323" width="76" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.21" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="563.26" y="336.61">
            HTTPS 443
          </tspan>
        </text>
        <g opacity="0">
          <rect x="525" y="323" width="76" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.21" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="563.26" y="336.61">
              HTTPS 443
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1855;0.2123;0.9;0.9267;1" dur="6.737s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e2`}>
        <rect x="614" y="323" width="76" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.21" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="652.26" y="336.61">
            HTTPS 443
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e3`}>
        <rect x="703" y="323" width="48" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.21" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="727.26" y="336.61">
            SIGN IN
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e4`}>
        <rect x="925.99" y="616" width="86.03" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.21" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="969.26" y="629.52">
            STATIC CONTENT
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e5`}>
        <rect x="562" y="616" width="59" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.21" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="591.76" y="629.52">
            API CALLS
          </tspan>
        </text>
        <g opacity="0">
          <rect x="562" y="616" width="59" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.21" />
          <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#60a5fa" textAnchor="middle">
            <tspan x="591.76" y="629.52">
              API CALLS
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3229;0.3496;0.9;0.9267;1" dur="6.737s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e6`}>
        <rect x="562" y="877" width="95" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.21" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="609.76" y="890.61">
            ACROSS 3 ZONES
          </tspan>
        </text>
        <g opacity="0">
          <rect x="562" y="877" width="95" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.21" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="609.76" y="890.61">
              ACROSS 3 ZONES
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.428;0.4547;0.9;0.9267;1" dur="6.737s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e8`}>
        <rect x="130" y="1386" width="74" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.21" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="167.26" y="1399.61">
            PULL IMAGES
          </tspan>
        </text>
        <g opacity="0">
          <rect x="130" y="1386" width="74" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.21" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="167.26" y="1399.61">
              PULL IMAGES
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.618;0.6447;0.9;0.9267;1" dur="6.737s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e9`}>
        <rect x="260" y="1386" width="35" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.21" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="277.76" y="1399.61">
            SQL
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e10`}>
        <rect x="399" y="1386" width="59" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.21" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="428.76" y="1399.61">
            BACKUPS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e11`}>
        <rect x="548" y="1386" width="73" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.21" />
        <text fontSize="8.25" fontWeight="700" letterSpacing="0.5" fill="#979899" textAnchor="middle">
          <tspan x="584.75" y="1399.43">
            CERTIFICATES
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e12`}>
        <rect x="667" y="1386" width="38" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.21" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="686.26" y="1399.61">
            KEYS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e13`}>
        <rect x="784" y="1386" width="87" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.21" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="827.76" y="1399.61">
            LOGGING AGENT
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e14`}>
        <rect x="914" y="1386" width="105" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.21" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="966.76" y="1399.61">
            MONITORING AGENT
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e15`}>
        <rect x="232" y="323" width="66" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.21" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="265.26" y="336.61">
            OPENVPN
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e16`}>
        <rect x="232" y="877" width="53" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.21" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="258.76" y="890.61">
            SSH 22
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-ops-net`}>
        <use href={`#${uid}-s1`} x="132" y="106" width="18" height="18" />
        <g opacity="0">
          <use href={`#${uid}-s2`} x="132" y="106" width="18" height="18" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.052;0.0787;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <text fontSize="10" fontWeight="700" letterSpacing="1" fill="#649adb">
          <tspan x="159" y="118">
            OPERATIONS TEAM NETWORK
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-public`}>
        <use href={`#${uid}-s3`} x="471" y="106" width="18" height="18" />
        <g opacity="0">
          <use href={`#${uid}-s4`} x="471" y="106" width="18" height="18" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.052;0.0787;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="498" y="118.36">
            PUBLIC NETWORK
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-ibmcloud`}>
        <use href={`#${uid}-s5`} x="41" y="406" width="18" height="18" />
        <g opacity="0">
          <use href={`#${uid}-s6`} x="41" y="406" width="18" height="18" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.052;0.0787;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="68" y="418.35">
            IBM CLOUD
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-vpc`}>
        <use href={`#${uid}-s7`} x="234" y="699" width="18" height="18" />
        <g opacity="0">
          <use href={`#${uid}-s8`} x="234" y="699" width="18" height="18" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.052;0.0787;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="261" y="711.36">
            PRODUCTION VPC
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-services`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="131" y="1481.36">
            CLOUD SERVICES
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-cluster`}>
        <use href={`#${uid}-s9`} x="322" y="956" width="18" height="18" />
        <g opacity="0">
          <use href={`#${uid}-s10`} x="322" y="956" width="18" height="18" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.052;0.0787;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="349" y="968.36">
            RED HAT OPENSHIFT ON IBM CLOUD
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-zone-1`}>
        <use href={`#${uid}-s11`} x="342" y="1008" width="18" height="18" />
        <g opacity="0">
          <use href={`#${uid}-s12`} x="342" y="1008" width="18" height="18" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.052;0.0787;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="369" y="1020.36">
            ZONE 1
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-zone-2`}>
        <use href={`#${uid}-s11`} x="504" y="1008" width="18" height="18" />
        <g opacity="0">
          <use href={`#${uid}-s12`} x="504" y="1008" width="18" height="18" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.052;0.0787;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="531" y="1020.36">
            ZONE 2
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-zone-3`}>
        <use href={`#${uid}-s11`} x="666" y="1008" width="18" height="18" />
        <g opacity="0">
          <use href={`#${uid}-s12`} x="666" y="1008" width="18" height="18" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.052;0.0787;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="693" y="1020.36">
            ZONE 3
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-ops`}>
        <rect x="203" y="148" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="203" y="148" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s13`} x="212.6" y="157.6" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="227.44" y="214.27">
            OPERATIONS TEAM
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="227" y="231.7">
            Admins, developers,
          </tspan>
          <tspan x="227" y="246.7">
            operators
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-web`}>
        <rect x="495.5" y="148" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="495.5" y="148" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s14`} x="505.1" y="157.6" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="519.93" y="214.27">
            WEB BROWSER
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-mobile`}>
        <rect x="601.5" y="148" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="601.5" y="148" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s15`} x="611.1" y="157.6" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="625.93" y="214.27">
            MOBILE APP
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-cis`}>
        <rect x="533" y="448" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="533" y="448" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s16`} x="542.6" y="457.6" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="557.42" y="514.27">
            CLOUD INTERNET
          </tspan>
          <tspan x="557.42" y="531.17">
            SERVICES
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="557" y="548.6">
            Global LB, CDN, WAF,
          </tspan>
          <tspan x="557" y="563.6">
            DDoS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-appid`}>
        <rect x="674" y="464" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="674" y="464" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s17`} x="683.6" y="473.6" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="698.43" y="530.27">
            APP ID
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="698" y="547.7">
            Mobile app sign-in
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-site`}>
        <rect x="897" y="967.5" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="897" y="967.5" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s18`} x="906.6" y="977.1" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="921.43" y="1033.77">
            CLOUD OBJECT STORAGE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="921.01" y="1051.2">
            Static website
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-vpn`}>
        <rect x="203" y="741" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="203" y="741" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s19`} x="212.6" y="750.6" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="227.44" y="807.27">
            CLIENT VPN FOR VPC
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="227.01" y="824.7">
            Client-to-site
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-lb`}>
        <rect x="532.5" y="749.5" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="532.5" y="749.5" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s20`} x="542.1" y="759.1" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="556.93" y="815.77">
            VPC LOAD BALANCER
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-bastion`}>
        <rect x="203" y="1018" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="203" y="1018" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s21`} x="212.6" y="1027.6" width="28.8" height="28.8" />
        <text fontSize="10.25" fontWeight="700" letterSpacing="0.82" fill="#9d9fa0" textAnchor="middle">
          <tspan x="227.42" y="1084.09">
            BASTION HOSTS (3)
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="227" y="1101.7">
            One per zone
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-w1`}>
        <rect x="371" y="1050" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="371" y="1050" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s22`} x="380.6" y="1059.6" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="395.43" y="1116.27">
            WORKER NODES
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="395" y="1133.7">
            Router, API pods
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-w2`}>
        <rect x="533" y="1050" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="533" y="1050" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s22`} x="542.6" y="1059.6" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="557.43" y="1116.27">
            WORKER NODES
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="557" y="1133.7">
            Router, API pods
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-w3`}>
        <rect x="695" y="1050" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="695" y="1050" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s22`} x="704.6" y="1059.6" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="719.43" y="1116.27">
            WORKER NODES
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="719" y="1133.7">
            Router, API pods
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-vpe`}>
        <rect x="533" y="1226" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="533" y="1226" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s23`} x="542.6" y="1235.6" width="28.8" height="28.8" />
        <text fontSize="9.75" fontWeight="700" letterSpacing="0.78" fill="#9d9fa0" textAnchor="middle">
          <tspan x="557.39" y="1291.91">
            VIRTUAL PRIVATE
          </tspan>
          <tspan x="557.39" y="1308.81">
            ENDPOINTS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-registry`}>
        <rect x="101" y="1519.5" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="101" y="1519.5" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s24`} x="110.6" y="1529.1" width="28.8" height="28.8" />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="125.42" y="1585.68">
            CONTAINER REGISTRY
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="125" y="1603.2">
            Private images
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-db`}>
        <rect x="231" y="1511" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="231" y="1511" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s25`} x="240.6" y="1520.6" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="255.43" y="1577.27">
            DATABASES FOR
          </tspan>
          <tspan x="255.43" y="1594.17">
            POSTGRESQL
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="255" y="1611.6">
            Multizone
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-cos`}>
        <rect x="370" y="1519.5" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="370" y="1519.5" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s18`} x="379.6" y="1529.1" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="394.43" y="1585.77">
            CLOUD OBJECT STORAGE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="394" y="1603.2">
            Backups and logs
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-secrets`}>
        <rect x="519" y="1519.5" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="519" y="1519.5" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s26`} x="528.6" y="1529.1" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="543.43" y="1585.77">
            SECRETS MANAGER
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="543" y="1603.2">
            Credentials
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-kp`}>
        <rect x="638" y="1519.5" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="638" y="1519.5" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s27`} x="647.6" y="1529.1" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="662.43" y="1585.77">
            KEY PROTECT
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="662.01" y="1603.2">
            HSM-backed
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-logs`}>
        <rect x="755" y="1519.5" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="755" y="1519.5" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s28`} x="764.6" y="1529.1" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="779.43" y="1585.77">
            IBM CLOUD LOGS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="779" y="1603.2">
            App and audit logs
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-mon`}>
        <rect x="885" y="1511" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.21" />
        <g opacity="0">
          <rect x="885" y="1511" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.21" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1039;0.1306;0.9133;0.94;1" dur="6.737s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s29`} x="894.6" y="1520.6" width="28.8" height="28.8" />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="909.43" y="1577.27">
            IBM CLOUD
          </tspan>
          <tspan x="909.43" y="1594.17">
            MONITORING
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="909" y="1611.6">
            Metrics and alerts
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <path d="M520 219 L520 351 Q520 359 528 359 L549 359 Q557 359 557 367 L557 447.39" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.91" 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.1855;0.2873;0.2994;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.737s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1855;0.187;0.2994;0.3009;1" dur="6.737s" repeatCount="indefinite" />
        </path>
        <circle r="3.03" fill="#60a5fa" opacity="0">
          <animateMotion path="M520 219 L520 351 Q520 359 528 359 L549 359 Q557 359 557 367 L557 447.39" dur="6.737s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.1855;0.2873;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.1633;0.1855;0.3229;0.3452;1" dur="6.737s" repeatCount="indefinite" />
        </circle>
        <circle r="2.43" fill="#60a5fa" opacity="0">
          <animateMotion path="M626 219 L626 282 Q626 290 618 290 L617 290 Q609 290 609 298 L609 351 Q609 359 601 359 L565 359 Q557 359 557 367 L557 447.39" dur="6.737s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4469;0.5609;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.4247;0.4469;0.5609;0.5832;1" dur="6.737s" repeatCount="indefinite" />
        </circle>
        <circle r="2.43" fill="#60a5fa" opacity="0">
          <animateMotion path="M557 568 L557 575.5 Q557 583 564.5 583 L913 583 Q921 583 921 591 L921 966.89" dur="6.737s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6212;0.7696;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.5989;0.6212;0.7696;0.7919;1" dur="6.737s" repeatCount="indefinite" />
        </circle>
        <path d="M557 568 L557 748.89" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.91" pathLength="1" strokeDasharray="0.17 2" strokeDashoffset="0.17" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.17;0.17;-0.83;-1;-1" keyTimes="0;0.3229;0.3924;0.4045;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.737s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3229;0.3244;0.4045;0.4059;1" dur="6.737s" repeatCount="indefinite" />
        </path>
        <circle r="3.03" fill="#60a5fa" opacity="0">
          <animateMotion path="M557 568 L557 748.89" dur="6.737s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3229;0.3924;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.3007;0.3229;0.428;0.4502;1" dur="6.737s" repeatCount="indefinite" />
        </circle>
        <path d="M557 820.5 L557 945.39" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.91" 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.428;0.4874;0.5023;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.737s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.428;0.4295;0.5023;0.5038;1" dur="6.737s" repeatCount="indefinite" />
        </path>
        <circle r="3.03" fill="#60a5fa" opacity="0">
          <animateMotion path="M557 820.5 L557 945.39" dur="6.737s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.428;0.4874;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.4057;0.428;0.523;0.5452;1" dur="6.737s" repeatCount="indefinite" />
        </circle>
        <path d="M557 1178 L557 1225.39" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.91" pathLength="1" strokeDasharray="0.5 2" strokeDashoffset="0.5" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.5;0.5;-0.5;-1;-1" keyTimes="0;0.523;0.5824;0.612;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.737s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.523;0.5245;0.612;0.6135;1" dur="6.737s" repeatCount="indefinite" />
        </path>
        <circle r="3.03" fill="#60a5fa" opacity="0">
          <animateMotion path="M557 1178 L557 1225.39" dur="6.737s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.523;0.5824;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.5007;0.523;0.618;0.6402;1" dur="6.737s" repeatCount="indefinite" />
        </circle>
        <path d="M543 1314 L543 1353 Q543 1361 535 1361 L133 1361 Q125 1361 125 1369 L125 1518.89" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.91" pathLength="1" strokeDasharray="0.05 2" strokeDashoffset="0.05" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.05;0.05;-0.95;-1;-1" keyTimes="0;0.618;0.7664;0.7739;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.737s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.618;0.6195;0.7739;0.7754;1" dur="6.737s" repeatCount="indefinite" />
        </path>
        <circle r="3.03" fill="#60a5fa" opacity="0">
          <animateMotion path="M543 1314 L543 1353 Q543 1361 535 1361 L133 1361 Q125 1361 125 1369 L125 1518.89" dur="6.737s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.618;0.7664;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.5957;0.618;0.7664;0.7887;1" dur="6.737s" repeatCount="indefinite" />
        </circle>
      </g>
      <g id={`${uid}-legend`}>
        <rect x="840" y="1668" width="199" height="71" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.21" />
        <path d="M850 1685.5 H878" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" />
        <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#9d9fa0">
          <tspan x="886" y="1688.7">
            REQUESTS AND DATA ACCESS
          </tspan>
        </text>
        <path d="M850 1703.5 H878" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" strokeDasharray="4.85 3.64" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="886" y="1706.87">
            OPERATOR ACCESS
          </tspan>
        </text>
        <path d="M850 1721.5 H878" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.21" strokeLinecap="round" strokeDasharray="1.21 3.03" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="886" y="1724.87">
            LOGS AND METRICS
          </tspan>
        </text>
      </g>
    </svg>
  );
}