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

export default function CICDFromGitHubActionsToAWS(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="673" height="1403" viewBox="0 0 673 1403" 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`}>
        CI/CD from GitHub Actions to AWS
      </title>
      <desc id={`${uid}-sdw-desc`}>
        CI/CD from GitHub Actions to AWS. 7 components in 4 groups. Connections: Developer to Pull request (open); Pull request to GitHub Actions (merge to main); GitHub Actions to Global service (assume role with OIDC); GitHub Actions to Amazon ECR (push image); GitHub Actions to AWS CloudFormation (deploy); AWS CloudFormation to Amazon ECS (update service); Amazon ECR to Amazon ECS (pull image).
      </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="282.5" cy="659.5" r="503.89">
          <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">
          <g fill="#919394">
            <path d="M10.226 17.284c-2.965-.36-5.054-2.493-5.054-5.256 0-1.123.404-2.336 1.078-3.144-.292-.741-.247-2.314.09-2.965.898-.112 2.111.36 2.83 1.01.853-.269 1.752-.404 2.853-.404 1.1 0 1.999.135 2.807.382.696-.629 1.932-1.1 2.83-.988.315.606.36 2.179.067 2.942.72.854 1.101 2 1.101 3.167 0 2.763-2.089 4.852-5.098 5.234.763.494 1.28 1.572 1.28 2.807v2.336c0 .674.561 1.056 1.235.786 4.066-1.55 7.255-5.615 7.255-10.646C23.5 6.188 18.334 1 11.978 1 5.62 1 .5 6.188.5 12.545c0 4.986 3.167 9.12 7.435 10.669.606.225 1.19-.18 1.19-.786V20.63a2.9 2.9 0 0 1-1.078.224c-1.483 0-2.359-.808-2.987-2.313-.247-.607-.517-.966-1.034-1.033-.27-.023-.359-.135-.359-.27 0-.27.45-.471.898-.471.652 0 1.213.404 1.797 1.235.45.651.921.943 1.483.943.561 0 .92-.202 1.437-.719.382-.381.674-.718.944-.943">
            </path>
          </g>
        </symbol>
        <symbol id={`${uid}-s2`} viewBox="0 0 24 24" overflow="visible">
          <g fill="#60a5fa">
            <path d="M10.226 17.284c-2.965-.36-5.054-2.493-5.054-5.256 0-1.123.404-2.336 1.078-3.144-.292-.741-.247-2.314.09-2.965.898-.112 2.111.36 2.83 1.01.853-.269 1.752-.404 2.853-.404 1.1 0 1.999.135 2.807.382.696-.629 1.932-1.1 2.83-.988.315.606.36 2.179.067 2.942.72.854 1.101 2 1.101 3.167 0 2.763-2.089 4.852-5.098 5.234.763.494 1.28 1.572 1.28 2.807v2.336c0 .674.561 1.056 1.235.786 4.066-1.55 7.255-5.615 7.255-10.646C23.5 6.188 18.334 1 11.978 1 5.62 1 .5 6.188.5 12.545c0 4.986 3.167 9.12 7.435 10.669.606.225 1.19-.18 1.19-.786V20.63a2.9 2.9 0 0 1-1.078.224c-1.483 0-2.359-.808-2.987-2.313-.247-.607-.517-.966-1.034-1.033-.27-.023-.359-.135-.359-.27 0-.27.45-.471.898-.471.652 0 1.213.404 1.797 1.235.45.651.921.943 1.483.943.561 0 .92-.202 1.437-.719.382-.381.674-.718.944-.943">
            </path>
          </g>
        </symbol>
        <symbol id={`${uid}-s3`} viewBox="0 0 40 40" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="40" height="40" fill="#fff" />
            <path fill="#232f3e" d="M32.698 23.9c.361.47-.4 2.4-.74 3.264-.105.262.117.365.35.168 1.512-1.284 1.904-3.975 1.593-4.363-.307-.386-2.95-.717-4.563.432-.249.177-.206.42.07.389.907-.112 2.93-.357 3.29.11m-.842 2.01c.518-.378.074-.941-.454-.72-3.513 1.464-7.327 2.173-10.8 2.173-5.143 0-10.127-1.39-14.156-3.695-.352-.202-.613.155-.319.414 3.733 3.316 8.67 5.309 14.147 5.309 3.91 0 8.451-1.208 11.582-3.481m-2.144-5.215a6.6 6.6 0 0 1-1.459-.161q-.714-.163-1.093-.373-.233-.128-.29-.258a.7.7 0 0 1-.059-.26v-.47q0-.29.216-.292.083.002.173.033.091.034.241.098.48.21 1.044.324.564.113 1.126.113.895 0 1.384-.308a.97.97 0 0 0 .49-.873.88.88 0 0 0-.258-.65q-.256-.258-.952-.484l-1.375-.421q-1.045-.325-1.517-.938a2.17 2.17 0 0 1-.472-1.347q0-.581.258-1.027.255-.445.676-.761.427-.314.99-.478a4.3 4.3 0 0 1 1.19-.162q.315 0 .64.04a6.3 6.3 0 0 1 1.15.252q.248.082.4.162a.9.9 0 0 1 .28.227.5.5 0 0 1 .083.308v.436q0 .291-.217.29-.114.002-.364-.111c-.54-.24-1.15-.356-1.82-.356q-.815 0-1.262.258-.448.26-.448.827 0 .388.283.655.281.267 1.044.51l1.342.423q1.028.322 1.466.888.441.568.441 1.295 0 .6-.25 1.078-.248.477-.689.817a3.1 3.1 0 0 1-1.05.518q-.615.179-1.343.178m-12.165-.244q-.248.002-.365-.087-.117-.09-.199-.365l-2.222-7.157a1.8 1.8 0 0 1-.082-.371q0-.227.233-.227h.927q.265 0 .374.09.106.086.19.364l1.59 6.12 1.477-6.12q.066-.278.181-.364.116-.09.38-.09h.765q.263 0 .38.09.116.086.182.364l1.493 6.2 1.64-6.2q.082-.278.19-.364.109-.09.373-.09h.878q.233 0 .233.227a1 1 0 0 1-.016.144 2 2 0 0 1-.068.227l-2.286 7.157q-.083.275-.2.365-.116.088-.364.087h-.813q-.264.001-.38-.094-.116-.099-.182-.373l-1.476-5.96-1.457 5.96q-.067.274-.183.373-.116.095-.38.094zM9.94 19.449q.465 0 .98-.17.513-.17.893-.592.232-.259.324-.591.09-.33.09-.801v-.388a8 8 0 0 0-1.757-.211q-.945 0-1.408.373-.464.37-.465 1.07 0 .645.35.978.347.332.993.332m3.846-1.408q0 .517.107.825.11.31.307.664a.4.4 0 0 1 .066.209q0 .148-.182.276l-.597.39a.5.5 0 0 1-.248.08.4.4 0 0 1-.282-.128 2 2 0 0 1-.339-.43 6 6 0 0 1-.29-.544q-1.112 1.28-2.785 1.28-1.194.001-1.89-.664-.696-.664-.696-1.78 0-1.182.863-1.903.86-.72 2.32-.721.48 0 1.002.073t1.084.203v-.68q.001-1.052-.446-1.482-.446-.428-1.54-.428a4.5 4.5 0 0 0-1.02.12 7.5 7.5 0 0 0-1.02.315 3 3 0 0 1-.33.122.7.7 0 0 1-.15.024q-.199.001-.2-.292v-.452q.001-.228.068-.323.066-.099.265-.195a6 6 0 0 1 1.192-.421 6 6 0 0 1 1.476-.18c1.126 0 1.952.254 2.477.754q.787.753.788 2.275z" />
          </g>
        </symbol>
        <filter id={`${uid}-f1`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -0.8504 -2.8608 -0.2888 0 2.4" result="a" />
          <feFlood floodColor="#b6b7b8" />
          <feComposite in2="a" operator="in" />
          <feComposite in2="SourceAlpha" operator="in" />
        </filter>
        <filter id={`${uid}-f2`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -0.8504 -2.8608 -0.2888 0 2.4" result="a" />
          <feFlood floodColor="#0b1012" />
          <feComposite in2="a" operator="in" />
          <feComposite in2="SourceAlpha" operator="in" />
        </filter>
        <symbol id={`${uid}-s4`} viewBox="0 0 40 40" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="40" height="40" fill="#00a4a6" />
            <path fill="#fff" d="M14 20.026v-9h15.293l-4.147 4.146a.5.5 0 0 0 0 .708l4.147 4.146zm12.207-4.5 4.647-4.646a.5.5 0 0 0-.354-.854H14V8.97A1.528 1.528 0 0 0 13.495 6c-.845 0-1.532.687-1.532 1.531 0 .67.435 1.235 1.037 1.442v24.053h-3v1h7v-1h-3v-12h16.5a.5.5 0 0 0 .354-.854z" />
          </g>
        </symbol>
        <filter id={`${uid}-f3`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.8929 3.0038 0.3032 0 -2.604" result="a" />
          <feFlood floodColor="#b6b7b8" />
          <feComposite in2="a" operator="in" />
        </filter>
        <filter id={`${uid}-f4`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.8929 3.0038 0.3032 0 -2.604" result="a" />
          <feFlood floodColor="#0b1012" />
          <feComposite in2="a" operator="in" />
        </filter>
        <symbol id={`${uid}-s5`} viewBox="0 0 24 24" overflow="visible">
          <g fill="#919394">
            <path d="M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1 1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0 1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z">
            </path>
          </g>
        </symbol>
        <symbol id={`${uid}-s6`} viewBox="0 0 24 24" overflow="visible">
          <g fill="#919394">
            <path d="M16 19.25a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0Zm-14.5 0a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0Zm0-14.5a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0ZM4.75 3a1.75 1.75 0 1 0 .001 3.501A1.75 1.75 0 0 0 4.75 3Zm0 14.5a1.75 1.75 0 1 0 .001 3.501A1.75 1.75 0 0 0 4.75 17.5Zm14.5 0a1.75 1.75 0 1 0 .001 3.501 1.75 1.75 0 0 0-.001-3.501Z">
            </path>
            <path d="M13.405 1.72a.75.75 0 0 1 0 1.06L12.185 4h4.065A3.75 3.75 0 0 1 20 7.75v8.75a.75.75 0 0 1-1.5 0V7.75a2.25 2.25 0 0 0-2.25-2.25h-4.064l1.22 1.22a.75.75 0 0 1-1.061 1.06l-2.5-2.5a.75.75 0 0 1 0-1.06l2.5-2.5a.75.75 0 0 1 1.06 0ZM4.75 7.25A.75.75 0 0 1 5.5 8v8A.75.75 0 0 1 4 16V8a.75.75 0 0 1 .75-.75Z">
            </path>
          </g>
        </symbol>
        <symbol id={`${uid}-s7`} viewBox="0 0 256 256" overflow="visible">
          <path fill="#4a7ebf" d="M53.604 0c29.604 0 53.604 23.992 53.604 53.59c0 29.09-23.189 52.75-52.093 53.553c0 2.461.109 7.111 1.501 9.92c1.933 3.893 13.525 11.144 24.892 11.144h4.084c2.567-18.271 18.257-32.332 37.24-32.332c18.906 0 34.55 13.946 37.211 32.11h21.13c2.661-18.164 18.304-32.11 37.21-32.11c20.775 0 37.617 16.837 37.617 37.607s-16.842 37.606-37.617 37.606c-18.906 0-34.55-13.948-37.21-32.11h-21.129c-2.66 18.162-18.305 32.11-37.212 32.11c-18.87 0-34.494-13.893-37.199-32.007l-4.515.135c-7.435-.056-15.29-2.042-21.598-6.328c-1.72-1.169-3.415-2.397-5.182-3.56v2.441c-.01.79-.153 12.657-.164 25.833v2.79c.005 8.641.073 17.545.277 24.04c.446 14.246 12.034 25.745 24.822 28.436c1.663.35 4.52.394 6.321.238c2.571-18.264 18.26-32.32 37.238-32.32c20.774 0 37.616 16.838 37.616 37.607c0 20.77-16.842 37.607-37.616 37.607c-18.769 0-34.323-13.744-37.153-31.714h-3.254c-24.436-1.334-39.628-23.746-39.363-41.923c.334-22.877.082-45.764.079-68.646v-7.565C18.546 101.286 0 79.606 0 53.591C0 23.992 23.999 0 53.604 0m69.228 191.78c-14.701 0-26.62 11.915-26.62 26.613s11.919 26.614 26.62 26.614s26.62-11.915 26.62-26.614c0-14.698-11.918-26.614-26.62-26.614m0-84.912c-14.701 0-26.62 11.915-26.62 26.614c0 14.697 11.919 26.613 26.62 26.613s26.62-11.916 26.62-26.613c0-14.699-11.918-26.614-26.62-26.614m95.551 0c-14.702 0-26.62 11.915-26.62 26.614c0 14.697 11.918 26.613 26.62 26.613s26.621-11.916 26.621-26.613c0-14.699-11.918-26.614-26.62-26.614m15.161 15.408a5.496 5.496 0 0 1 .17 7.606l-.16.168l-16.31 16.345a5.5 5.5 0 0 1-7.576.198l-.172-.163l-7.985-7.86a5.496 5.496 0 0 1-.06-7.773a5.5 5.5 0 0 1 7.606-.22l.168.16l4.092 4.027l12.452-12.477a5.5 5.5 0 0 1 7.775-.01m-95.99-.08a5.497 5.497 0 0 1 .17 7.606l-.16.168l-16.31 16.344a5.5 5.5 0 0 1-7.576.198l-.172-.163l-7.985-7.86a5.498 5.498 0 0 1 7.546-7.992l.168.16l4.093 4.027l12.451-12.478a5.5 5.5 0 0 1 7.775-.01M53.604 10.993c-23.532 0-42.608 19.07-42.608 42.598c0 23.525 19.076 42.597 42.608 42.597s42.608-19.072 42.608-42.597c0-23.527-19.076-42.598-42.608-42.598M49.171 28.13A744 744 0 0 1 75.7 44.841c7.308 4.82 7.29 13.563-.1 18.394a609 609 0 0 1-27.058 16.712c-7.455 4.34-15.8-.65-16.002-9.344c-.13-5.602-.024-11.21-.032-16.817c-.006-5.454-.113-10.911.019-16.363c.222-9.248 8.736-14.066 16.643-9.293m-5.91 8.872v3.868l-.001 5.674l-.001 3.71v5.482c0 4.23.002 8.394.01 12.557c.003 1.96 1.023 1.88 2.343 1.063q11.408-7.071 22.827-14.127c1.258-.776 1.294-1.587.06-2.365c-8.154-5.139-16.318-10.26-25.238-15.862" />
          <path fill="#85b3df" d="M133.227 223.88a5.497 5.497 0 1 0 .001-10.996a5.497 5.497 0 0 0 0 10.995m-21.049.001a5.497 5.497 0 1 0 0-10.996a5.497 5.497 0 0 0 0 10.995m106.205 21.128c-14.702 0-26.62-11.915-26.62-26.614c0-14.698 11.918-26.614 26.62-26.614c14.701 0 26.62 11.916 26.62 26.614s-11.919 26.614-26.62 26.614m0-64.22c-18.906 0-34.55 13.947-37.211 32.11h-6.153c-2.685 0-4.864 2.461-4.864 5.496s2.179 5.497 4.864 5.497h6.153c2.66 18.163 18.305 32.11 37.21 32.11C239.159 256 256 239.162 256 218.393c0-20.77-16.842-37.607-37.616-37.607" />
        </symbol>
        <filter id={`${uid}-f5`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feFlood floodColor="#919394" />
          <feComposite in2="SourceAlpha" operator="in" />
        </filter>
        <symbol id={`${uid}-s8`} viewBox="0 0 48 48" overflow="visible">
          <path fill="#dd344c" fillRule="evenodd" d="M44.083 32.581a73 73 0 0 0-2.082.191l-.168.018c-1.765.182-3.763.387-4.714.257-.594-.085-1.688-.56-2.848-1.063-1.966-.852-4.414-1.914-6.627-2.084-3.046-.234-8.31.34-11.703 1.931-1.962-.088-3.782-.616-5.196-1.488a46 46 0 0 1-.012-.649c0-4.136 1.938-8.015 5.32-10.65a15.2 15.2 0 0 1 7.66-2.052c6.12 0 11.553 3.617 13.672 8.942h-.813c-.814 0-1.496.576-1.663 1.34l-.412-.156c-2.03-.783-4.813-1.854-8.031-1.663-4.705.276-7.02.56-8.843 1.08l.549 1.924c1.668-.477 3.868-.74 8.41-1.008 2.785-.158 5.338.818 7.195 1.533.395.153.752.286 1.09.407v.205c0 .939.766 1.704 1.705 1.704h3.647c.937 0 1.7-.762 1.704-1.698l.354-.032a176 176 0 0 0 1.595-.151l.21-.021zM9.799 34.249c-2.65.363-4.742.039-5.608-.496.525-.371 1.71-.89 2.544-1.254a44 44 0 0 0 2.16-1.004c1.154.879 2.583 1.538 4.165 1.931-.915.368-2.048.658-3.261.823M36.868 29.3h3.055v-1.366h-3.055zM26.586 13c8.368 0 15.396 6.295 16.43 14.492q-.43.042-.912.086l-.185.016a1.704 1.704 0 0 0-1.7-1.66h-.711c-2.201-6.477-8.576-10.942-15.795-10.942-2.674 0-5.29.612-7.641 1.775l.046-.042A16.6 16.6 0 0 1 26.586 13m18.94 14.794a1.6 1.6 0 0 0-.497-.298C43.983 18.185 36.049 11 26.586 11a18.6 18.6 0 0 0-11.732 4.175 18.5 18.5 0 0 0-6.85 14.406l.004.123c-.667.335-1.372.655-2.073.962-2.136.934-3.68 1.608-3.91 2.826-.057.309-.067.914.52 1.502 1.038 1.037 3.028 1.409 5.05 1.409.842 0 1.688-.064 2.474-.172 1.339-.182 3.839-.673 5.536-1.915 2.678-1.941 8.733-2.667 11.886-2.422 1.879.145 4.155 1.132 5.985 1.925 1.396.607 2.5 1.085 3.366 1.208 1.19.163 3.136-.037 5.195-.248l.173-.017a63 63 0 0 1 1.592-.151c.215-.021.428-.036.712-.056.88-.062 1.569-.8 1.569-1.68v-3.829c0-.478-.202-.934-.556-1.252" />
        </symbol>
        <symbol id={`${uid}-s9`} viewBox="0 0 80 80" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="80" height="80" fill="#ed7100" />
            <path fill="#fff" d="M38.788 37.578a1.62 1.62 0 0 0-.802 1.396V66.72L16.999 54.984V27.708l23.558-13.65 20.928 10.37zM63.92 24.402c0-.574-.307-1.11-.86-1.427l-21.714-10.76a1.6 1.6 0 0 0-1.606 0l-23.938 13.87A1.62 1.62 0 0 0 15 27.48v27.736c0 .573.308 1.108.817 1.404l21.757 12.165a1.607 1.607 0 0 0 2.41-1.396V39.201l23.134-13.403c.495-.287.802-.821.802-1.396m.05 30.645L44.98 66.661v-10.4l9.901-6.388.068-.449c.018-.117.025-.117.025-.658l.03-12.406L64 31.148zm1.227-25.975a1.6 1.6 0 0 0-1.608 0l-9.575 5.546c-.3.164-1.006.548-1.006 1.34l-.032 12.76-9.125 5.888c-.545.325-.869.84-.869 1.383v11.32c0 .566.305 1.082.816 1.378.267.154.564.232.86.232.29 0 .581-.074.844-.227l19.666-12.028c.494-.288.8-.822.8-1.393L66 30.466c0-.573-.308-1.108-.803-1.394" />
          </g>
        </symbol>
        <filter id={`${uid}-f6`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.8929 3.0038 0.3032 0 -2.604" result="a" />
          <feFlood floodColor="#919394" />
          <feComposite in2="a" operator="in" />
        </filter>
        <symbol id={`${uid}-s10`} viewBox="0 0 80 80" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="80" height="80" fill="#e7157b" />
            <path fill="#fff" d="M53 39.963h5V37.96h-5zM28 51.982h5v-2.003h-5zm-10 0h7v-2.003h-7zm0-6.01h12V43.97H18zm0-12.018h9v-2.003h-9zm0 6.01h33V37.96H18zm19 22.033H14V27.945h23v8.012h2v-9.014a1 1 0 0 0-1-1.001H13a1 1 0 0 0-1 1.001v36.055A1 1 0 0 0 13 64h25c.552 0 1-.449 1-1.002v-20.03h-2zm31-25.038c0 6.472-5.827 8.723-8.908 9.01L43 45.971V43.97h16c.195-.023 7-.757 7-7.01 0-5.695-5.137-6.85-6.166-7.025a1 1 0 0 1-.825-1.126c-.055-3.218-2.028-4.223-2.883-4.508-1.596-.53-3.375-.023-4.316 1.24a1 1 0 0 1-1.742-.262c-.621-1.742-1.522-2.87-2.775-4.125-3.134-3.114-7.388-3.975-11.368-2.3-2.088.88-3.913 2.875-5.003 5.474l-1.844-.777c1.292-3.076 3.506-5.461 6.072-6.543 4.755-2.002 9.821-.981 13.554 2.727 1.07 1.073 1.956 2.117 2.646 3.47 1.493-1.106 3.507-1.437 5.407-.805 2.432.81 3.97 2.922 4.218 5.73 3.406.86 7.025 3.583 7.025 8.83" />
          </g>
        </symbol>
        <symbol id={`${uid}-s11`} viewBox="0 0 80 80" overflow="visible">
          <g fill="none" fillRule="evenodd">
            <rect width="80" height="80" fill="#ed7100" />
            <path fill="#fff" d="m64 48.234-8-4.801V32a1 1 0 0 0-.496-.864L44 24.426v-9.674l20 11.819zm1.509-23.095-22-13a1 1 0 0 0-1.005-.008c-.311.178-.504.51-.504.869v12c0 .355.189.684.496.864L54 32.574V44a1 1 0 0 0 .486.857l10 6A.997.997 0 0 0 66 50V26a1 1 0 0 0-.491-.861M40.445 66.863 17 54.399V26.571l20-11.819v9.699l-10.537 6.705A1 1 0 0 0 26 32v17a1 1 0 0 0 .538.887l13.453 7c.289.15.633.151.921.001l13.052-6.744 8.032 4.82zm24.07-12.721-10-6a1 1 0 0 0-.974-.03l-13.086 6.761L28 48.393V32.549l10.537-6.705c.288-.184.463-.502.463-.844V13a1 1 0 0 0-1.509-.861l-22 13A1 1 0 0 0 15 26v29c0 .369.204.709.53.883l24.454 13a1 1 0 0 0 .953-.008l23.547-13a1.002 1.002 0 0 0 .031-1.733" />
          </g>
        </symbol>
      </defs>
      <rect width="673" height="1403" fill={`url(#${uid}-bg)`} />
      <rect width="673" height="1403" fill={`url(#${uid}-grid)`} />
      <rect width="673" height="1403" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          CI/CD FROM GITHUB ACTIONS TO AWS
        </tspan>
      </text>
      <text fontSize="10.75" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65">
          A merge to main runs a workflow that assumes an IAM role, pushes the image and deploys the stack
        </tspan>
      </text>
      <g id={`${uid}-g-repo`}>
        <rect x="122" y="295" width="436" height="378" rx="2" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="122" y="295" width="436" height="378" rx="2" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0396;0.06;0.9196;0.94;1" dur="8.828s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-cloud`}>
        <rect x="28" y="809" width="585" height="501" rx="2" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="28" y="809" width="585" height="501" rx="2" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0396;0.06;0.9196;0.94;1" dur="8.828s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-global`}>
        <rect x="48" y="867" width="148" height="166" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" strokeDasharray="3 3" />
        <g opacity="0">
          <rect x="48" y="867" width="148" height="166" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" strokeDasharray="3 3" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0396;0.06;0.9196;0.94;1" dur="8.828s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-region`}>
        <rect x="226" y="867" width="367" height="423" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" strokeDasharray="3 3" />
        <g opacity="0">
          <rect x="226" y="867" width="367" height="423" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" strokeDasharray="3 3" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0396;0.06;0.9196;0.94;1" dur="8.828s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M303 167 L303 352.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M299 347 L303 353 L307 347" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M303 167 L303 352.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.1416;0.2074;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="8.828s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1416;0.162;0.9;0.9204;1" dur="8.828s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M299 347 L303 353 L307 347" 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.2074;0.2278;0.9;0.9204;1" dur="8.828s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M302.5 441 L302.5 564.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M298.5 559 L302.5 565 L306.5 559" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M302.5 441 L302.5 564.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.2346;0.2799;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="8.828s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2346;0.255;0.9;0.9204;1" dur="8.828s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M298.5 559 L302.5 565 L306.5 559" 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.2799;0.3003;0.9;0.9204;1" dur="8.828s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M277 653 L277 684 Q277 692 269 692 L130 692 Q122 692 122 700 L122 866.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M118 861 L122 867 L126 861" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M277 653 L277 684 Q277 692 269 692 L130 692 Q122 692 122 700 L122 866.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.3071;0.4204;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="8.828s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3071;0.3275;0.9;0.9204;1" dur="8.828s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M118 861 L122 867 L126 861" 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.4204;0.4408;0.9;0.9204;1" dur="8.828s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M303 653 L303 765 Q303 768 300 768 L300 768 Q297 768 297 771 L297 924.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M293 919 L297 925 L301 919" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M303 653 L303 765 Q303 768 300 768 L300 768 Q297 768 297 771 L297 924.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.4476;0.546;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="8.828s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4476;0.468;0.9;0.9204;1" dur="8.828s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M293 919 L297 925 L301 919" 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.546;0.5664;0.9;0.9204;1" dur="8.828s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M330 653 L330 684 Q330 692 338 692 L435 692 Q443 692 443 700 L443 932" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M439 926.5 L443 932.5 L447 926.5" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M330 653 L330 684 Q330 692 338 692 L435 692 Q443 692 443 700 L443 932" 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.5732;0.6864;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="8.828s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5732;0.5936;0.9;0.9204;1" dur="8.828s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M439 926.5 L443 932.5 L447 926.5" 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.6864;0.7068;0.9;0.9204;1" dur="8.828s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M443 1020.5 L443 1111 Q443 1119 435 1119 L344 1119 Q336 1119 336 1127 L336 1151.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M332 1146 L336 1152 L340 1146" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M443 1020.5 L443 1111 Q443 1119 435 1119 L344 1119 Q336 1119 336 1127 L336 1151.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.7136;0.7981;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="8.828s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7136;0.734;0.9;0.9204;1" dur="8.828s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M332 1146 L336 1152 L340 1146" 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.7981;0.8184;0.9;0.9204;1" dur="8.828s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M297 1028.5 L297 1152" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1 2.5" />
        <path d="M301 1034 L297 1028 L293 1034" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-el-e1`}>
        <rect x="340" y="215" width="40" height="28" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="360.28" y="232.28">
            OPEN
          </tspan>
        </text>
        <g opacity="0">
          <rect x="340" y="215" width="40" height="28" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#60a5fa" textAnchor="middle">
            <tspan x="360.28" y="232.28">
              OPEN
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1416;0.162;0.9;0.9204;1" dur="8.828s" repeatCount="indefinite" />
        </g>
        <circle cx="322" cy="229" r="14" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <text fontSize="13" fontWeight="700" fill="#9d9fa0" textAnchor="middle">
          <tspan x="322" y="233.62">
            1
          </tspan>
        </text>
        <g transform="translate(322 229)">
          <g opacity="0">
            <circle r="14" fill="#60a5fa" />
            <text fontSize="13" fontWeight="700" fill="#0b1012" textAnchor="middle">
              <tspan x="0" y="4.62">
                1
              </tspan>
            </text>
            <animate attributeName="opacity" values="0;0;1;1;1;0;0" keyTimes="0;0.1416;0.162;0.1824;0.9;0.94;1" dur="8.828s" repeatCount="indefinite" />
            <animateTransform attributeName="transform" type="scale" values="0.4;0.4;1.3;1;1;1;0.4" keyTimes="0;0.1416;0.162;0.1824;0.9;0.94;1" dur="8.828s" repeatCount="indefinite" />
          </g>
        </g>
      </g>
      <g id={`${uid}-el-e2`}>
        <rect x="339.5" y="489" width="91" height="28" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="385.28" y="506.28">
            MERGE TO MAIN
          </tspan>
        </text>
        <g opacity="0">
          <rect x="339.5" y="489" width="91" height="28" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#60a5fa" textAnchor="middle">
            <tspan x="385.28" y="506.28">
              MERGE TO MAIN
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2346;0.255;0.9;0.9204;1" dur="8.828s" repeatCount="indefinite" />
        </g>
        <circle cx="321.5" cy="503" r="14" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <text fontSize="13" fontWeight="700" fill="#9d9fa0" textAnchor="middle">
          <tspan x="321.5" y="507.62">
            2
          </tspan>
        </text>
        <g transform="translate(321.5 503)">
          <g opacity="0">
            <circle r="14" fill="#60a5fa" />
            <text fontSize="13" fontWeight="700" fill="#0b1012" textAnchor="middle">
              <tspan x="0" y="4.62">
                2
              </tspan>
            </text>
            <animate attributeName="opacity" values="0;0;1;1;1;0;0" keyTimes="0;0.2346;0.255;0.2754;0.9;0.94;1" dur="8.828s" repeatCount="indefinite" />
            <animateTransform attributeName="transform" type="scale" values="0.4;0.4;1.3;1;1;1;0.4" keyTimes="0;0.2346;0.255;0.2754;0.9;0.94;1" dur="8.828s" repeatCount="indefinite" />
          </g>
        </g>
      </g>
      <g id={`${uid}-el-e3`}>
        <rect x="159" y="725" width="136" height="28" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="227.28" y="742.28">
            ASSUME ROLE WITH OIDC
          </tspan>
        </text>
        <g opacity="0">
          <rect x="159" y="725" width="136" height="28" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#60a5fa" textAnchor="middle">
            <tspan x="227.28" y="742.28">
              ASSUME ROLE WITH OIDC
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3071;0.3275;0.9;0.9204;1" dur="8.828s" repeatCount="indefinite" />
        </g>
        <circle cx="141" cy="739" r="14" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <text fontSize="13" fontWeight="700" fill="#9d9fa0" textAnchor="middle">
          <tspan x="141" y="743.62">
            3
          </tspan>
        </text>
        <g transform="translate(141 739)">
          <g opacity="0">
            <circle r="14" fill="#60a5fa" />
            <text fontSize="13" fontWeight="700" fill="#0b1012" textAnchor="middle">
              <tspan x="0" y="4.62">
                3
              </tspan>
            </text>
            <animate attributeName="opacity" values="0;0;1;1;1;0;0" keyTimes="0;0.3071;0.3275;0.3479;0.9;0.94;1" dur="8.828s" repeatCount="indefinite" />
            <animateTransform attributeName="transform" type="scale" values="0.4;0.4;1.3;1;1;1;0.4" keyTimes="0;0.3071;0.3275;0.3479;0.9;0.94;1" dur="8.828s" repeatCount="indefinite" />
          </g>
        </g>
      </g>
      <g id={`${uid}-el-e4`}>
        <rect x="340" y="725" width="76" height="28" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="378.28" y="742.28">
            PUSH IMAGE
          </tspan>
        </text>
        <g opacity="0">
          <rect x="340" y="725" width="76" height="28" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#60a5fa" textAnchor="middle">
            <tspan x="378.28" y="742.28">
              PUSH IMAGE
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4476;0.468;0.9;0.9204;1" dur="8.828s" repeatCount="indefinite" />
        </g>
        <circle cx="322" cy="739" r="14" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <text fontSize="13" fontWeight="700" fill="#9d9fa0" textAnchor="middle">
          <tspan x="322" y="743.62">
            4
          </tspan>
        </text>
        <g transform="translate(322 739)">
          <g opacity="0">
            <circle r="14" fill="#60a5fa" />
            <text fontSize="13" fontWeight="700" fill="#0b1012" textAnchor="middle">
              <tspan x="0" y="4.62">
                4
              </tspan>
            </text>
            <animate attributeName="opacity" values="0;0;1;1;1;0;0" keyTimes="0;0.4476;0.468;0.4884;0.9;0.94;1" dur="8.828s" repeatCount="indefinite" />
            <animateTransform attributeName="transform" type="scale" values="0.4;0.4;1.3;1;1;1;0.4" keyTimes="0;0.4476;0.468;0.4884;0.9;0.94;1" dur="8.828s" repeatCount="indefinite" />
          </g>
        </g>
      </g>
      <g id={`${uid}-el-e5`}>
        <rect x="480" y="725" width="49" height="28" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="504.78" y="742.28">
            DEPLOY
          </tspan>
        </text>
        <g opacity="0">
          <rect x="480" y="725" width="49" height="28" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#60a5fa" textAnchor="middle">
            <tspan x="504.78" y="742.28">
              DEPLOY
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5732;0.5936;0.9;0.9204;1" dur="8.828s" repeatCount="indefinite" />
        </g>
        <circle cx="462" cy="739" r="14" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <text fontSize="13" fontWeight="700" fill="#9d9fa0" textAnchor="middle">
          <tspan x="462" y="743.62">
            5
          </tspan>
        </text>
        <g transform="translate(462 739)">
          <g opacity="0">
            <circle r="14" fill="#60a5fa" />
            <text fontSize="13" fontWeight="700" fill="#0b1012" textAnchor="middle">
              <tspan x="0" y="4.62">
                5
              </tspan>
            </text>
            <animate attributeName="opacity" values="0;0;1;1;1;0;0" keyTimes="0;0.5732;0.5936;0.6139;0.9;0.94;1" dur="8.828s" repeatCount="indefinite" />
            <animateTransform attributeName="transform" type="scale" values="0.4;0.4;1.3;1;1;1;0.4" keyTimes="0;0.5732;0.5936;0.6139;0.9;0.94;1" dur="8.828s" repeatCount="indefinite" />
          </g>
        </g>
      </g>
      <g id={`${uid}-el-e6`}>
        <rect x="480" y="1076" width="93" height="28" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="526.78" y="1093.28">
            UPDATE SERVICE
          </tspan>
        </text>
        <g opacity="0">
          <rect x="480" y="1076" width="93" height="28" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#60a5fa" textAnchor="middle">
            <tspan x="526.78" y="1093.28">
              UPDATE SERVICE
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7136;0.734;0.9;0.9204;1" dur="8.828s" repeatCount="indefinite" />
        </g>
        <circle cx="462" cy="1090" r="14" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <text fontSize="13" fontWeight="700" fill="#9d9fa0" textAnchor="middle">
          <tspan x="462" y="1094.62">
            6
          </tspan>
        </text>
        <g transform="translate(462 1090)">
          <g opacity="0">
            <circle r="14" fill="#60a5fa" />
            <text fontSize="13" fontWeight="700" fill="#0b1012" textAnchor="middle">
              <tspan x="0" y="4.62">
                6
              </tspan>
            </text>
            <animate attributeName="opacity" values="0;0;1;1;1;0;0" keyTimes="0;0.7136;0.734;0.7544;0.9;0.94;1" dur="8.828s" repeatCount="indefinite" />
            <animateTransform attributeName="transform" type="scale" values="0.4;0.4;1.3;1;1;1;0.4" keyTimes="0;0.7136;0.734;0.7544;0.9;0.94;1" dur="8.828s" repeatCount="indefinite" />
          </g>
        </g>
      </g>
      <g id={`${uid}-el-e7`}>
        <rect x="302" y="1079.5" width="68" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#979899" textAnchor="middle">
          <tspan x="336.27" y="1093.2">
            PULL IMAGE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-repo`}>
        <use href={`#${uid}-s1`} x="310" y="305" width="18" height="18" />
        <g opacity="0">
          <use href={`#${uid}-s2`} x="310" y="305" width="18" height="18" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0396;0.06;0.9196;0.94;1" dur="8.828s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="337" y="317.35">
            GITHUB REPOSITORY WEB-APP
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-cloud`}>
        <rect x="28" y="809" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s3`} x="33.38" y="814.38" width="29.24" height="29.24" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <rect x="28" y="809" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s3`} x="33.38" y="814.38" width="29.24" height="29.24" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0396;0.06;0.9196;0.94;1" dur="8.828s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="128" y="832.91">
            AWS CLOUD
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-global`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="77.2" y="885.36">
            GLOBAL SERVICE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-region`}>
        <rect x="226" y="867" width="40" height="40" fill="#ffffff" fillOpacity="0.16" />
        <use href={`#${uid}-s4`} x="231.38" y="872.38" width="29.24" height="29.24" filter={`url(#${uid}-f3)`} />
        <g opacity="0">
          <rect x="226" y="867" width="40" height="40" fill="#60a5fa" />
          <use href={`#${uid}-s4`} x="231.38" y="872.38" width="29.24" height="29.24" filter={`url(#${uid}-f4)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0396;0.06;0.9196;0.94;1" dur="8.828s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="303" y="890.91">
            US-EAST-1
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-dev`}>
        <rect x="279" y="96" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="279" y="96" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0793;0.0997;0.9196;0.94;1" dur="8.828s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="288.6" y="105.6" width="28.8" height="28.8" />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="303.46" y="162.53">
            DEVELOPER
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-pr`}>
        <rect x="278" y="353" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="278" y="353" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0793;0.0997;0.9196;0.94;1" dur="8.828s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="287.6" y="362.6" width="28.8" height="28.8" />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="302.46" y="419.53">
            PULL REQUEST
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="302" y="436.7">
            Checks and review
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-actions`}>
        <rect x="278.5" y="565" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="278.5" y="565" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0793;0.0997;0.9196;0.94;1" dur="8.828s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="288.58" y="575.08" width="27.84" height="27.84" filter={`url(#${uid}-f5)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="302.96" y="631.53">
            GITHUB ACTIONS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="302.5" y="648.7">
            deploy.yml on main
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-role`}>
        <rect x="98" y="925" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="98" y="925" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0793;0.0997;0.9196;0.94;1" dur="8.828s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="108.08" y="935.08" width="27.84" height="27.84" filter={`url(#${uid}-f5)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="122.46" y="991.53">
            IAM ROLE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="122" y="1008.7">
            Trusts GitHub OIDC
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-ecr`}>
        <rect x="272.5" y="925" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="272.5" y="925" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0793;0.0997;0.9196;0.94;1" dur="8.828s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="275.86" y="928.36" width="41.28" height="41.28" filter={`url(#${uid}-f6)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="296.96" y="991.53">
            AMAZON ECR
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="296.51" y="1008.7">
            Amazon Elastic
          </tspan>
          <tspan x="296.51" y="1023.7">
            Container Registry
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-stack`}>
        <rect x="419" y="932.5" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="419" y="932.5" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0793;0.0997;0.9196;0.94;1" dur="8.828s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s10`} x="422.36" y="935.86" width="41.28" height="41.28" filter={`url(#${uid}-f6)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="443.46" y="999.03">
            AWS CLOUDFORMATION
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="442.99" y="1016.2">
            App stack
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-service`}>
        <rect x="292.5" y="1152" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1" />
        <g opacity="0">
          <rect x="292.5" y="1152" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0793;0.0997;0.9196;0.94;1" dur="8.828s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s11`} x="295.86" y="1155.36" width="41.28" height="41.28" filter={`url(#${uid}-f6)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="316.96" y="1218.53">
            AMAZON ECS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="316.5" y="1235.7">
            Amazon Elastic
          </tspan>
          <tspan x="316.5" y="1250.7">
            Container Service on
          </tspan>
          <tspan x="316.5" y="1265.7">
            Fargate
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <path d="M303 167 L303 352.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.1416;0.2074;0.2167;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="8.828s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1416;0.1427;0.2167;0.2178;1" dur="8.828s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M303 167 L303 352.5" dur="8.828s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.1416;0.2074;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.1246;0.1416;0.2346;0.2516;1" dur="8.828s" repeatCount="indefinite" />
        </circle>
        <path d="M302.5 441 L302.5 564.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.21 2" strokeDashoffset="0.21" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.21;0.21;-0.79;-1;-1" keyTimes="0;0.2346;0.2799;0.2895;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="8.828s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2346;0.2358;0.2895;0.2906;1" dur="8.828s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M302.5 441 L302.5 564.5" dur="8.828s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.2346;0.2799;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.2176;0.2346;0.3071;0.3241;1" dur="8.828s" repeatCount="indefinite" />
        </circle>
        <path d="M277 653 L277 684 Q277 692 269 692 L130 692 Q122 692 122 700 L122 866.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.07 2" strokeDashoffset="0.07" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.07;0.07;-0.93;-1;-1" keyTimes="0;0.3071;0.4204;0.4284;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="8.828s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3071;0.3082;0.4284;0.4295;1" dur="8.828s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M277 653 L277 684 Q277 692 269 692 L130 692 Q122 692 122 700 L122 866.5" dur="8.828s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3071;0.4204;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.2901;0.3071;0.4476;0.4646;1" dur="8.828s" repeatCount="indefinite" />
        </circle>
        <path d="M303 653 L303 765 Q303 768 300 768 L300 768 Q297 768 297 771 L297 924.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.09 2" strokeDashoffset="0.09" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.09;0.09;-0.91;-1;-1" keyTimes="0;0.4476;0.546;0.5552;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="8.828s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4476;0.4487;0.5552;0.5563;1" dur="8.828s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M303 653 L303 765 Q303 768 300 768 L300 768 Q297 768 297 771 L297 924.5" dur="8.828s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4476;0.546;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.4306;0.4476;0.5732;0.5902;1" dur="8.828s" repeatCount="indefinite" />
        </circle>
        <path d="M330 653 L330 684 Q330 692 338 692 L435 692 Q443 692 443 700 L443 932" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.07 2" strokeDashoffset="0.07" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.07;0.07;-0.93;-1;-1" keyTimes="0;0.5732;0.6864;0.694;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="8.828s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5732;0.5743;0.694;0.6951;1" dur="8.828s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M330 653 L330 684 Q330 692 338 692 L435 692 Q443 692 443 700 L443 932" dur="8.828s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5732;0.6864;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.5562;0.5732;0.7136;0.7306;1" dur="8.828s" repeatCount="indefinite" />
        </circle>
        <path d="M443 1020.5 L443 1111 Q443 1119 435 1119 L344 1119 Q336 1119 336 1127 L336 1151.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.11 2" strokeDashoffset="0.11" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.11;0.11;-0.89;-1;-1" keyTimes="0;0.7136;0.7981;0.8073;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="8.828s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7136;0.7148;0.8073;0.8084;1" dur="8.828s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M443 1020.5 L443 1111 Q443 1119 435 1119 L344 1119 Q336 1119 336 1127 L336 1151.5" dur="8.828s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.7136;0.7981;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.6966;0.7136;0.7981;0.815;1" dur="8.828s" repeatCount="indefinite" />
        </circle>
        <circle r="2" fill="#60a5fa" opacity="0">
          <animateMotion path="M297 1028.5 L297 1152" dur="8.828s" repeatCount="indefinite" calcMode="spline" keyPoints="1;1;0;0" keyTimes="0;0.437;0.4823;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.42;0.437;0.4823;0.4993;1" dur="8.828s" repeatCount="indefinite" />
        </circle>
      </g>
      <g id={`${uid}-legend`}>
        <rect x="519" y="1322" width="126" height="53" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <path d="M529 1339.5 H557" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" />
        <text fontSize="8" fontWeight="700" letterSpacing="0.48" fill="#9d9fa0">
          <tspan x="565" y="1342.34">
            PIPELINE STEP
          </tspan>
        </text>
        <path d="M529 1357.5 H557" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeDasharray="1 2.5" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="565" y="1360.87">
            IMAGE PULL
          </tspan>
        </text>
      </g>
    </svg>
  );
}
