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

export default function KubernetesWebWorkload(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="1346" height="681" viewBox="0 0 1346 681" 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`}>
        Kubernetes web workload
      </title>
      <desc id={`${uid}-sdw-desc`}>
        Kubernetes web workload. 11 components in 2 groups. Connections: Users to Ingress (HTTPS); Ingress to Service; Service to Pods; HorizontalPodAutoscaler to Deployment (scales); Deployment to ReplicaSet; ReplicaSet to Pods; Pods to ConfigMap; Pods to Secret; Pods to PersistentVolumeClaim; PersistentVolumeClaim to PersistentVolume (bound).
      </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="30.59" height="30.59" patternUnits="userSpaceOnUse">
          <path d="M0 0.76H30.59M0.76 0V30.59" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1.53" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="648" cy="345.5" r="467.3">
          <stop offset="0" stopColor="#60a5fa" stopOpacity="0.12" />
          <stop offset="1" stopColor="#60a5fa" stopOpacity="0" />
        </radialGradient>
        <symbol id={`${uid}-s1`} viewBox="0 0 777 753.918" overflow="visible">
          <path fill="#326ce5" d="M385.808.067a51.655 51.233 0 0 0-19.795 5.01L95.888 134.144a51.655 51.233 0 0 0-27.95 34.753L1.299 458.82A51.655 51.233 0 0 0 8.31 498.1a51.655 51.233 0 0 0 2.937 4.078l186.97 232.468a51.655 51.233 0 0 0 40.386 19.277l299.835-.069a51.655 51.233 0 0 0 40.385-19.243l186.9-232.503a51.655 51.233 0 0 0 9.985-43.357l-66.746-289.92a51.655 51.233 0 0 0-27.948-34.754l-270.16-129a51.655 51.233 0 0 0-25.046-5.01" />
          <path fill="#fff" d="M389.467 272.057c-8.458 0-15.316 7.62-15.315 17.017 0 .144.03.282.033.425-.013 1.277-.074 2.815-.033 3.927.202 5.42 1.383 9.569 2.094 14.563 1.289 10.688 2.368 19.548 1.702 27.783-.648 3.105-2.935 5.945-4.974 7.92l-.36 6.479a199 199 0 0 0-27.685 4.254c-39.767 9.03-74.005 29.513-100.072 57.17a257 257 0 0 1-5.531-3.927c-2.734.37-5.498 1.213-9.097-.883-6.854-4.614-13.097-10.982-20.65-18.653-3.46-3.67-5.967-7.164-10.079-10.701-.934-.804-2.359-1.89-3.403-2.717-3.215-2.563-7.007-3.9-10.669-4.025-4.708-.16-9.24 1.68-12.206 5.4-5.273 6.613-3.585 16.721 3.763 22.58.075.06.154.105.23.164 1.01.818 2.246 1.867 3.174 2.552 4.363 3.222 8.35 4.871 12.697 7.429 9.16 5.656 16.753 10.347 22.776 16.002 2.352 2.507 2.763 6.925 3.077 8.836l4.908 4.385c-26.277 39.546-38.439 88.393-31.252 138.164l-6.414 1.865c-1.69 2.183-4.08 5.618-6.578 6.643-7.88 2.482-16.749 3.394-27.456 4.516-5.027.418-9.364.169-14.693 1.178-1.173.223-2.807.648-4.09.95-.045.008-.087.022-.132.032-.07.016-.161.05-.229.065-9.027 2.182-14.826 10.479-12.959 18.654s10.685 13.149 19.766 11.191c.066-.015.16-.017.23-.032.102-.024.192-.073.294-.098 1.266-.278 2.852-.587 3.96-.884 5.239-1.403 9.033-3.464 13.744-5.269 10.133-3.634 18.526-6.67 26.703-7.854 3.415-.267 7.013 2.108 8.803 3.11l6.676-1.146c15.362 47.63 47.557 86.126 88.324 110.282l-2.782 6.676c1.003 2.592 2.109 6.1 1.362 8.66-2.973 7.708-8.064 15.845-13.862 24.916-2.808 4.19-5.68 7.443-8.214 12.239-.607 1.148-1.379 2.91-1.964 4.123-3.936 8.422-1.049 18.122 6.512 21.762 7.61 3.663 17.053-.2 21.14-8.64.007-.011.028-.02.033-.032.004-.009-.004-.023 0-.033.583-1.196 1.407-2.769 1.898-3.894 2.17-4.97 2.892-9.23 4.418-14.039 4.052-10.179 6.279-20.859 11.857-27.514 1.528-1.822 4.018-2.523 6.6-3.214l3.469-6.283c35.54 13.641 75.32 17.302 115.06 8.279a199 199 0 0 0 26.278-7.92c.975 1.73 2.787 5.054 3.273 5.891 2.623.854 5.487 1.294 7.82 4.745 4.174 7.13 7.028 15.566 10.505 25.754 1.527 4.808 2.28 9.068 4.451 14.04.495 1.132 1.315 2.727 1.898 3.926 4.079 8.467 13.553 12.343 21.173 8.672 7.56-3.642 10.45-13.34 6.512-21.762-.585-1.212-1.39-2.975-1.996-4.123-2.534-4.796-5.406-8.016-8.214-12.206-5.798-9.07-10.608-16.606-13.58-24.315-1.244-3.975.209-6.448 1.177-9.032-.58-.664-1.82-4.419-2.552-6.185 42.366-25.015 73.616-64.948 88.291-111.068 1.982.312 5.426.921 6.545 1.146 2.304-1.52 4.421-3.501 8.574-3.174 8.177 1.182 16.57 4.22 26.703 7.853 4.71 1.805 8.505 3.9 13.745 5.302 1.107.296 2.694.573 3.96.85.101.026.192.076.294.099.068.015.164.018.23.033 9.08 1.955 17.9-3.015 19.765-11.192s-3.932-16.475-12.96-18.653c-1.312-.299-3.174-.806-4.45-1.048-5.329-1.009-9.666-.76-14.693-1.178-10.707-1.122-19.576-2.034-27.456-4.516-3.213-1.246-5.499-5.07-6.61-6.643l-6.186-1.8c3.207-23.2 2.343-47.345-3.207-71.503-5.6-24.384-15.498-46.685-28.7-66.333 1.587-1.443 4.583-4.096 5.433-4.876.248-2.748.035-5.63 2.88-8.672 6.023-5.656 13.617-10.346 22.776-16.003 4.348-2.558 8.367-4.206 12.73-7.428.987-.729 2.334-1.883 3.37-2.717 7.347-5.86 9.039-15.968 3.764-22.58-5.274-6.612-15.495-7.235-22.842-1.374-1.045.828-2.464 1.908-3.403 2.716-4.112 3.537-6.651 7.031-10.112 10.701-7.553 7.672-13.796 14.072-20.65 18.686-2.97 1.729-7.32 1.13-9.293 1.014l-5.825 4.156c-33.216-34.83-78.44-57.098-127.136-61.424-.136-2.04-.314-5.73-.36-6.84-1.993-1.907-4.401-3.536-5.007-7.657-.666-8.235.447-17.095 1.735-27.783.711-4.994 1.893-9.143 2.094-14.563.046-1.232-.027-3.02-.032-4.352-.001-9.398-6.858-17.018-15.316-17.017m-19.176 118.79-4.55 80.34-.326.164c-.306 7.187-6.22 12.926-13.483 12.926-2.975 0-5.72-.955-7.952-2.585l-.131.065-65.875-46.698c20.246-19.908 46.142-34.62 75.987-41.397a161 161 0 0 1 16.33-2.814m38.386 0c34.843 4.286 67.067 20.064 91.76 44.245l-65.45 46.403-.229-.098c-5.809 4.243-13.994 3.19-18.522-2.487a13.4 13.4 0 0 1-2.945-7.821l-.066-.033zm-154.592 74.22 60.148 53.8-.065.327c5.429 4.72 6.23 12.91 1.701 18.588a13.5 13.5 0 0 1-7.003 4.614l-.065.262-77.1 22.253c-3.924-35.882 4.533-70.763 22.384-99.844m270.34.033c8.936 14.486 15.703 30.664 19.732 48.204 3.98 17.329 4.98 34.627 3.338 51.345l-77.492-22.318-.065-.328c-6.94-1.896-11.204-8.955-9.589-16.035a13.4 13.4 0 0 1 4.287-7.166l-.033-.164zM377.13 523.023h24.642l15.315 19.144-5.498 23.89-22.122 10.635-22.187-10.669-5.498-23.889zm78.998 65.515c1.047-.053 2.09.041 3.108.229l.131-.164 79.75 13.483c-11.67 32.79-34.005 61.198-63.845 80.208l-30.958-74.776.098-.13c-2.844-6.608.002-14.357 6.545-17.508a13.5 13.5 0 0 1 5.17-1.342m-133.943.327c6.086.086 11.545 4.31 12.96 10.505.661 2.9.339 5.774-.753 8.312l.229.294L303.99 682c-28.639-18.377-51.449-45.892-63.65-79.652l79.063-13.417.13.163a13.7 13.7 0 0 1 2.651-.229m66.791 32.43c2.12-.077 4.272.358 6.316 1.342 2.68 1.29 4.751 3.323 6.054 5.76h.295l38.975 70.423a162 162 0 0 1-15.577 4.353c-29.808 6.768-59.52 4.717-86.426-4.45l38.877-70.293h.065a13.52 13.52 0 0 1 11.421-7.134" color="#000" fontFamily="Sans" fontWeight="400" overflow="visible" style={{ "lineHeight": "normal", "textIndent": "0", "textAlign": "start", "textDecorationLine": "none", "textTransform": "none", "marker": "none" }} transform="translate(-22.672 -188.477)scale(1.05569)" />
        </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.8929 3.0038 0.3032 0 -2.604" result="a" />
          <feFlood floodColor="#919394" />
          <feComposite in2="a" 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.8929 3.0038 0.3032 0 -2.604" result="a" />
          <feFlood floodColor="#60a5fa" />
          <feComposite in2="a" operator="in" />
        </filter>
        <symbol id={`${uid}-s2`} viewBox="0 0 18.035 17.5" overflow="visible">
          <g transform="translate(-.993 -1.174)">
            <path fill="#326ce5" d="M9.95 1.637a1.137 1.127 0 0 0-.434.11l-5.94 2.838a1.137 1.127 0 0 0-.615.764l-1.465 6.376a1.137 1.127 0 0 0 .154.862 1.137 1.127 0 0 0 .065.09l4.11 5.113a1.137 1.127 0 0 0 .89.423l6.592-.001a1.137 1.127 0 0 0 .888-.423l4.11-5.113a1.137 1.127 0 0 0 .219-.953l-1.468-6.374a1.137 1.127 0 0 0-.614-.764l-5.94-2.839a1.137 1.127 0 0 0-.551-.11" />
            <path fill="#fff" d="M-6.852 3.818a1.181 1.172 0 0 0-.452.115l-6.18 2.951a1.181 1.172 0 0 0-.638.795l-1.524 6.63a1.181 1.172 0 0 0 .16.9 1.181 1.172 0 0 0 .067.093l4.276 5.317a1.181 1.172 0 0 0 .924.44h6.858a1.181 1.172 0 0 0 .923-.44L1.837 15.3a1.181 1.172 0 0 0 .228-.99L.54 7.677a1.181 1.172 0 0 0-.64-.795l-6.178-2.95a1.181 1.172 0 0 0-.573-.115m.003.455a1.12 1.11 0 0 1 .542.108l5.853 2.795a1.12 1.11 0 0 1 .606.753l1.446 6.281a1.12 1.11 0 0 1-.216.94l-4.05 5.037a1.12 1.11 0 0 1-.875.417l-6.496.001a1.12 1.11 0 0 1-.875-.417l-4.05-5.037a1.12 1.11 0 0 1-.064-.088 1.12 1.11 0 0 1-.152-.851l1.444-6.281a1.12 1.11 0 0 1 .605-.753l5.853-2.797a1.12 1.11 0 0 1 .429-.108" color="#000" fontFamily="Sans" fontWeight="400" overflow="visible" style={{ "lineHeight": "normal", "textIndent": "0", "textAlign": "start", "textDecorationLine": "none", "textTransform": "none", "marker": "none" }} transform="translate(16.902 -2.699)scale(1.01489)" />
            <rect width="7.674" height="6.69" x="6.173" y="6.579" fill="none" stroke="#fff" strokeDasharray=".80000001,.4" strokeDashoffset="3.44" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth=".4" />
          </g>
        </symbol>
        <symbol id={`${uid}-s3`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.91" d="M5 7a4 4 0 1 0 8 0a4 4 0 1 0-8 0M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-17.87a4 4 0 0 1 0 7.75M21 21v-2a4 4 0 0 0-3-3.85" />
        </symbol>
        <symbol id={`${uid}-s4`} viewBox="0 0 18.035 17.5" overflow="visible">
          <path fill="#326ce5" d="M8.958.463a1.137 1.127 0 0 0-.434.11l-5.94 2.838a1.137 1.127 0 0 0-.615.764L.504 10.551a1.137 1.127 0 0 0 .154.862 1.137 1.127 0 0 0 .065.09l4.11 5.113a1.137 1.127 0 0 0 .89.423l6.592-.001a1.137 1.127 0 0 0 .888-.423l4.11-5.113a1.137 1.127 0 0 0 .219-.953l-1.468-6.374a1.137 1.127 0 0 0-.614-.764L9.51.572a1.137 1.127 0 0 0-.551-.11" />
          <path fill="#fff" d="M-6.852 3.818a1.181 1.172 0 0 0-.452.115l-6.18 2.951a1.181 1.172 0 0 0-.638.795l-1.524 6.63a1.181 1.172 0 0 0 .16.9 1.181 1.172 0 0 0 .067.093l4.276 5.317a1.181 1.172 0 0 0 .924.44h6.858a1.181 1.172 0 0 0 .923-.44L1.837 15.3a1.181 1.172 0 0 0 .228-.99L.54 7.677a1.181 1.172 0 0 0-.64-.795l-6.178-2.95a1.181 1.172 0 0 0-.573-.115m.003.455a1.12 1.11 0 0 1 .542.108l5.853 2.795a1.12 1.11 0 0 1 .606.753l1.446 6.281a1.12 1.11 0 0 1-.216.94l-4.05 5.037a1.12 1.11 0 0 1-.875.417l-6.496.001a1.12 1.11 0 0 1-.875-.417l-4.05-5.037a1.12 1.11 0 0 1-.064-.088 1.12 1.11 0 0 1-.152-.851l1.444-6.281a1.12 1.11 0 0 1 .605-.753l5.853-2.797a1.12 1.11 0 0 1 .429-.108" color="#000" fontFamily="Sans" fontWeight="400" overflow="visible" style={{ "lineHeight": "normal", "textIndent": "0", "textAlign": "start", "textDecorationLine": "none", "textTransform": "none", "marker": "none" }} transform="translate(15.91 -3.873)scale(1.01489)" />
          <path fill="#fff" d="M11.765 12.823h-2.27L4.572 6.667H3.15V4.652h2.314l4.923 6.156h1.378V9.216l3.12 2.6-3.12 2.602zM9.289 8.068l1.098-1.376h1.378v1.594l3.12-2.6-3.12-2.602v1.594h-2.27L8.037 6.502zM5.691 9.433l-1.118 1.4H3.15v2.015h2.314l1.479-1.849z" pointerEvents="none" />
        </symbol>
        <symbol id={`${uid}-s5`} viewBox="0 0 18.035 17.5" overflow="visible">
          <path fill="#326ce5" d="M8.958.463a1.137 1.127 0 0 0-.434.11l-5.94 2.838a1.137 1.127 0 0 0-.615.764L.504 10.551a1.137 1.127 0 0 0 .154.862 1.137 1.127 0 0 0 .065.09l4.11 5.113a1.137 1.127 0 0 0 .89.423l6.592-.001a1.137 1.127 0 0 0 .888-.423l4.11-5.113a1.137 1.127 0 0 0 .219-.953l-1.468-6.374a1.137 1.127 0 0 0-.614-.764L9.51.572a1.137 1.127 0 0 0-.551-.11" />
          <path fill="#fff" d="M-6.852 3.818a1.181 1.172 0 0 0-.452.115l-6.18 2.951a1.181 1.172 0 0 0-.638.795l-1.524 6.63a1.181 1.172 0 0 0 .16.9 1.181 1.172 0 0 0 .067.093l4.276 5.317a1.181 1.172 0 0 0 .924.44h6.858a1.181 1.172 0 0 0 .923-.44L1.837 15.3a1.181 1.172 0 0 0 .228-.99L.54 7.677a1.181 1.172 0 0 0-.64-.795l-6.178-2.95a1.181 1.172 0 0 0-.573-.115m.003.455a1.12 1.11 0 0 1 .542.108l5.853 2.795a1.12 1.11 0 0 1 .606.753l1.446 6.281a1.12 1.11 0 0 1-.216.94l-4.05 5.037a1.12 1.11 0 0 1-.875.417l-6.496.001a1.12 1.11 0 0 1-.875-.417l-4.05-5.037a1.12 1.11 0 0 1-.064-.088 1.12 1.11 0 0 1-.152-.851l1.444-6.281a1.12 1.11 0 0 1 .605-.753l5.853-2.797a1.12 1.11 0 0 1 .429-.108" color="#000" fontFamily="Sans" fontWeight="400" overflow="visible" style={{ "lineHeight": "normal", "textIndent": "0", "textAlign": "start", "textDecorationLine": "none", "textTransform": "none", "marker": "none" }} transform="translate(15.91 -3.873)scale(1.01489)" />
          <path fill="#fff" fillRule="evenodd" d="M3.595 10.755h2.908v2.042H3.595zm3.969 0h2.908v2.042H7.564zm3.968 0h2.909v2.042h-2.909zM6.714 4.703h4.608v2.042H6.714z" />
          <path fill="none" stroke="#fff" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth=".529" d="M9.018 6.745V8.75H5.05v2.003m3.968-4.008V8.75h3.967v2.003" />
          <path fill="none" stroke="#fff" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth=".529" d="M9.01 6.746v2.006h.016v2.003" />
        </symbol>
        <symbol id={`${uid}-s6`} viewBox="0 0 18.035 17.5" overflow="visible">
          <path fill="#326ce5" d="M8.958.463a1.137 1.127 0 0 0-.434.11l-5.94 2.838a1.137 1.127 0 0 0-.615.764L.504 10.551a1.137 1.127 0 0 0 .154.862 1.137 1.127 0 0 0 .065.09l4.11 5.113a1.137 1.127 0 0 0 .89.423l6.592-.001a1.137 1.127 0 0 0 .888-.423l4.11-5.113a1.137 1.127 0 0 0 .219-.953l-1.468-6.374a1.137 1.127 0 0 0-.614-.764L9.51.572a1.137 1.127 0 0 0-.551-.11" />
          <path fill="#fff" d="M-6.852 3.818a1.181 1.172 0 0 0-.452.115l-6.18 2.951a1.181 1.172 0 0 0-.638.795l-1.524 6.63a1.181 1.172 0 0 0 .16.9 1.181 1.172 0 0 0 .067.093l4.276 5.317a1.181 1.172 0 0 0 .924.44h6.858a1.181 1.172 0 0 0 .923-.44L1.837 15.3a1.181 1.172 0 0 0 .228-.99L.54 7.677a1.181 1.172 0 0 0-.64-.795l-6.178-2.95a1.181 1.172 0 0 0-.573-.115m.003.455a1.12 1.11 0 0 1 .542.108l5.853 2.795a1.12 1.11 0 0 1 .606.753l1.446 6.281a1.12 1.11 0 0 1-.216.94l-4.05 5.037a1.12 1.11 0 0 1-.875.417l-6.496.001a1.12 1.11 0 0 1-.875-.417l-4.05-5.037a1.12 1.11 0 0 1-.064-.088 1.12 1.11 0 0 1-.152-.851l1.444-6.281a1.12 1.11 0 0 1 .605-.753l5.853-2.797a1.12 1.11 0 0 1 .429-.108" color="#000" fontFamily="Sans" fontWeight="400" overflow="visible" style={{ "lineHeight": "normal", "textIndent": "0", "textAlign": "start", "textDecorationLine": "none", "textTransform": "none", "marker": "none" }} transform="translate(15.91 -3.873)scale(1.01489)" />
          <path fill="#fff" fillRule="evenodd" d="m1.994 8.75 2.068-2v1h.761v-3h8.388v3h.76v-1l2.07 2-2.068 2v-1h-.761v3H4.823v-3h-.761v1z" />
          <path fill="#326ce5" fillRule="evenodd" d="m5.803 6.573 3.214-.9 3.214.9-3.214.903Zm0 .345v3.307l2.995 1.603.014-4.045zm6.428 0v3.307l-2.994 1.603-.015-4.045z" />
        </symbol>
        <symbol id={`${uid}-s7`} viewBox="0 0 18.035 17.5" overflow="visible">
          <path fill="#326ce5" d="M8.958.463a1.137 1.127 0 0 0-.434.11l-5.94 2.838a1.137 1.127 0 0 0-.615.764L.504 10.551a1.137 1.127 0 0 0 .154.862 1.137 1.127 0 0 0 .065.09l4.11 5.113a1.137 1.127 0 0 0 .89.423l6.592-.001a1.137 1.127 0 0 0 .888-.423l4.11-5.113a1.137 1.127 0 0 0 .219-.953l-1.468-6.374a1.137 1.127 0 0 0-.614-.764L9.51.572a1.137 1.127 0 0 0-.551-.11" />
          <path fill="#fff" d="M-6.852 3.818a1.181 1.172 0 0 0-.452.115l-6.18 2.951a1.181 1.172 0 0 0-.638.795l-1.524 6.63a1.181 1.172 0 0 0 .16.9 1.181 1.172 0 0 0 .067.093l4.276 5.317a1.181 1.172 0 0 0 .924.44h6.858a1.181 1.172 0 0 0 .923-.44L1.837 15.3a1.181 1.172 0 0 0 .228-.99L.54 7.677a1.181 1.172 0 0 0-.64-.795l-6.178-2.95a1.181 1.172 0 0 0-.573-.115m.003.455a1.12 1.11 0 0 1 .542.108l5.853 2.795a1.12 1.11 0 0 1 .606.753l1.446 6.281a1.12 1.11 0 0 1-.216.94l-4.05 5.037a1.12 1.11 0 0 1-.875.417l-6.496.001a1.12 1.11 0 0 1-.875-.417l-4.05-5.037a1.12 1.11 0 0 1-.064-.088 1.12 1.11 0 0 1-.152-.851l1.444-6.281a1.12 1.11 0 0 1 .605-.753l5.853-2.797a1.12 1.11 0 0 1 .429-.108" color="#000" fontFamily="Sans" fontWeight="400" overflow="visible" style={{ "lineHeight": "normal", "textIndent": "0", "textAlign": "start", "textDecorationLine": "none", "textTransform": "none", "marker": "none" }} transform="translate(15.91 -3.873)scale(1.01489)" />
          <path fill="#fff" fillRule="evenodd" d="M8.579 13.192a4.446 4.446 0 1 1 4.227-4.728l-1.757.113a2.685 2.685 0 1 0-2.553 2.856z" />
          <path fill="#fff" fillRule="evenodd" d="m9.49 8.469 1.397 3.42 3.226-3.42z" />
        </symbol>
        <symbol id={`${uid}-s8`} viewBox="0 0 18.035 17.5" overflow="visible">
          <path fill="#326ce5" d="M8.958.463a1.137 1.127 0 0 0-.434.11l-5.94 2.838a1.137 1.127 0 0 0-.615.764L.504 10.551a1.137 1.127 0 0 0 .154.862 1.137 1.127 0 0 0 .065.09l4.11 5.113a1.137 1.127 0 0 0 .89.423l6.592-.001a1.137 1.127 0 0 0 .888-.423l4.11-5.113a1.137 1.127 0 0 0 .219-.953l-1.468-6.374a1.137 1.127 0 0 0-.614-.764L9.51.572a1.137 1.127 0 0 0-.551-.11" />
          <path fill="#fff" d="M-6.852 3.818a1.181 1.172 0 0 0-.452.115l-6.18 2.951a1.181 1.172 0 0 0-.638.795l-1.524 6.63a1.181 1.172 0 0 0 .16.9 1.181 1.172 0 0 0 .067.093l4.276 5.317a1.181 1.172 0 0 0 .924.44h6.858a1.181 1.172 0 0 0 .923-.44L1.837 15.3a1.181 1.172 0 0 0 .228-.99L.54 7.677a1.181 1.172 0 0 0-.64-.795l-6.178-2.95a1.181 1.172 0 0 0-.573-.115m.003.455a1.12 1.11 0 0 1 .542.108l5.853 2.795a1.12 1.11 0 0 1 .606.753l1.446 6.281a1.12 1.11 0 0 1-.216.94l-4.05 5.037a1.12 1.11 0 0 1-.875.417l-6.496.001a1.12 1.11 0 0 1-.875-.417l-4.05-5.037a1.12 1.11 0 0 1-.064-.088 1.12 1.11 0 0 1-.152-.851l1.444-6.281a1.12 1.11 0 0 1 .605-.753l5.853-2.797a1.12 1.11 0 0 1 .429-.108" color="#000" fontFamily="Sans" fontWeight="400" overflow="visible" style={{ "lineHeight": "normal", "textIndent": "0", "textAlign": "start", "textDecorationLine": "none", "textTransform": "none", "marker": "none" }} transform="translate(15.91 -3.873)scale(1.01489)" />
          <path fill="#326ce5" fillRule="evenodd" stroke="#fff" strokeDasharray="1.58700001,1.58700001" strokeDashoffset="3.666" strokeLinecap="square" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth=".529" d="M7.294 5.047h6.525v4.584H7.294z" />
          <path fill="#326ce5" fillRule="evenodd" stroke="#fff" strokeDasharray="1.58743756,1.58743756" strokeDashoffset="3.879" strokeLinecap="square" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth=".529" d="M5.755 6.459h6.525v4.583H5.755z" />
          <path fill="#fff" fillRule="evenodd" d="M4.216 7.87h6.525v4.583H4.216z" />
          <path fill="none" stroke="#fff" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth=".529" d="M4.216 7.87h6.525v4.583H4.216z" />
        </symbol>
        <symbol id={`${uid}-s9`} viewBox="0 0 18.035 17.5" overflow="visible">
          <path fill="#326ce5" d="M8.958.463a1.137 1.127 0 0 0-.434.11l-5.94 2.838a1.137 1.127 0 0 0-.615.764L.504 10.551a1.137 1.127 0 0 0 .154.862 1.137 1.127 0 0 0 .065.09l4.11 5.113a1.137 1.127 0 0 0 .89.423l6.592-.001a1.137 1.127 0 0 0 .888-.423l4.11-5.113a1.137 1.127 0 0 0 .219-.953l-1.468-6.374a1.137 1.127 0 0 0-.614-.764L9.51.572a1.137 1.127 0 0 0-.551-.11" />
          <path fill="#fff" d="M-6.852 3.818a1.181 1.172 0 0 0-.452.115l-6.18 2.951a1.181 1.172 0 0 0-.638.795l-1.524 6.63a1.181 1.172 0 0 0 .16.9 1.181 1.172 0 0 0 .067.093l4.276 5.317a1.181 1.172 0 0 0 .924.44h6.858a1.181 1.172 0 0 0 .923-.44L1.837 15.3a1.181 1.172 0 0 0 .228-.99L.54 7.677a1.181 1.172 0 0 0-.64-.795l-6.178-2.95a1.181 1.172 0 0 0-.573-.115m.003.455a1.12 1.11 0 0 1 .542.108l5.853 2.795a1.12 1.11 0 0 1 .606.753l1.446 6.281a1.12 1.11 0 0 1-.216.94l-4.05 5.037a1.12 1.11 0 0 1-.875.417l-6.496.001a1.12 1.11 0 0 1-.875-.417l-4.05-5.037a1.12 1.11 0 0 1-.064-.088 1.12 1.11 0 0 1-.152-.851l1.444-6.281a1.12 1.11 0 0 1 .605-.753l5.853-2.797a1.12 1.11 0 0 1 .429-.108" color="#000" fontFamily="Sans" fontWeight="400" overflow="visible" style={{ "lineHeight": "normal", "textIndent": "0", "textAlign": "start", "textDecorationLine": "none", "textTransform": "none", "marker": "none" }} transform="translate(15.91 -3.873)scale(1.01489)" />
          <path fill="#fff" fillRule="evenodd" d="m5.397 6.213 3.62-1.05 3.621 1.05-3.62 1.05Zm0 .402v3.853l3.373 1.869.017-4.713zm7.241 0v3.853l-3.373 1.869-.017-4.713z" />
        </symbol>
        <symbol id={`${uid}-s10`} viewBox="0 0 18.035 17.5" overflow="visible">
          <path fill="#326ce5" d="M8.958.463a1.137 1.127 0 0 0-.434.11l-5.94 2.838a1.137 1.127 0 0 0-.615.764L.504 10.551a1.137 1.127 0 0 0 .154.862 1.137 1.127 0 0 0 .065.09l4.11 5.113a1.137 1.127 0 0 0 .89.423l6.592-.001a1.137 1.127 0 0 0 .888-.423l4.11-5.113a1.137 1.127 0 0 0 .219-.953l-1.468-6.374a1.137 1.127 0 0 0-.614-.764L9.51.572a1.137 1.127 0 0 0-.551-.11" />
          <path fill="#fff" d="M-6.852 3.818a1.181 1.172 0 0 0-.452.115l-6.18 2.951a1.181 1.172 0 0 0-.638.795l-1.524 6.63a1.181 1.172 0 0 0 .16.9 1.181 1.172 0 0 0 .067.093l4.276 5.317a1.181 1.172 0 0 0 .924.44h6.858a1.181 1.172 0 0 0 .923-.44L1.837 15.3a1.181 1.172 0 0 0 .228-.99L.54 7.677a1.181 1.172 0 0 0-.64-.795l-6.178-2.95a1.181 1.172 0 0 0-.573-.115m.003.455a1.12 1.11 0 0 1 .542.108l5.853 2.795a1.12 1.11 0 0 1 .606.753l1.446 6.281a1.12 1.11 0 0 1-.216.94l-4.05 5.037a1.12 1.11 0 0 1-.875.417l-6.496.001a1.12 1.11 0 0 1-.875-.417l-4.05-5.037a1.12 1.11 0 0 1-.064-.088 1.12 1.11 0 0 1-.152-.851l1.444-6.281a1.12 1.11 0 0 1 .605-.753l5.853-2.797a1.12 1.11 0 0 1 .429-.108" color="#000" fontFamily="Sans" fontWeight="400" overflow="visible" style={{ "lineHeight": "normal", "textIndent": "0", "textAlign": "start", "textDecorationLine": "none", "textTransform": "none", "marker": "none" }} transform="translate(15.91 -3.873)scale(1.01489)" />
          <g transform="translate(-.875 -.716)">
            <path fill="none" stroke="#fff" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth=".794" d="M8.237 6.291h5.825m-8.339 0h1.458" />
            <a>
              <path fill="none" stroke="#fff" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth=".794" d="M10.354 8.408h3.708" />
            </a>
            <path fill="none" stroke="#fff" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth=".794" d="M7.84 8.408h1.458m1.056 2.117h3.708m-6.222 0h1.458m-1.061 2.116h5.825m-8.339 0h1.458" />
          </g>
        </symbol>
        <symbol id={`${uid}-s11`} viewBox="0 0 18.035 17.5" overflow="visible">
          <path fill="#326ce5" d="M8.958.463a1.137 1.127 0 0 0-.434.11l-5.94 2.838a1.137 1.127 0 0 0-.615.764L.504 10.551a1.137 1.127 0 0 0 .154.862 1.137 1.127 0 0 0 .065.09l4.11 5.113a1.137 1.127 0 0 0 .89.423l6.592-.001a1.137 1.127 0 0 0 .888-.423l4.11-5.113a1.137 1.127 0 0 0 .219-.953l-1.468-6.374a1.137 1.127 0 0 0-.614-.764L9.51.572a1.137 1.127 0 0 0-.551-.11" />
          <path fill="#fff" d="M-6.852 3.818a1.181 1.172 0 0 0-.452.115l-6.18 2.951a1.181 1.172 0 0 0-.638.795l-1.524 6.63a1.181 1.172 0 0 0 .16.9 1.181 1.172 0 0 0 .067.093l4.276 5.317a1.181 1.172 0 0 0 .924.44h6.858a1.181 1.172 0 0 0 .923-.44L1.837 15.3a1.181 1.172 0 0 0 .228-.99L.54 7.677a1.181 1.172 0 0 0-.64-.795l-6.178-2.95a1.181 1.172 0 0 0-.573-.115m.003.455a1.12 1.11 0 0 1 .542.108l5.853 2.795a1.12 1.11 0 0 1 .606.753l1.446 6.281a1.12 1.11 0 0 1-.216.94l-4.05 5.037a1.12 1.11 0 0 1-.875.417l-6.496.001a1.12 1.11 0 0 1-.875-.417l-4.05-5.037a1.12 1.11 0 0 1-.064-.088 1.12 1.11 0 0 1-.152-.851l1.444-6.281a1.12 1.11 0 0 1 .605-.753l5.853-2.797a1.12 1.11 0 0 1 .429-.108" color="#000" fontFamily="Sans" fontWeight="400" overflow="visible" style={{ "lineHeight": "normal", "textIndent": "0", "textAlign": "start", "textDecorationLine": "none", "textTransform": "none", "marker": "none" }} transform="translate(15.91 -3.873)scale(1.01489)" />
          <g transform="translate(-.936 -.4)">
            <path fill="none" stroke="#fff" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth=".794" d="M10.414 8.091h3.709M8.298 5.975h5.825m-8.339 0h1.458" />
            <path fill="#fff" fillRule="evenodd" stroke="#326ce5" strokeLinecap="square" strokeMiterlimit="10" strokeWidth=".265" d="M7.718 8.432h0c0-1.167 1.011-2.112 2.259-2.112s2.258.945 2.258 2.112h-1.056c0-.583-.538-1.056-1.202-1.056s-1.202.473-1.202 1.056z" />
            <path fill="none" stroke="#fff" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth=".794" d="M10.414 10.208h3.709m-5.825 2.117h5.825m-8.339 0h1.458" />
            <path fill="#fff" fillRule="evenodd" stroke="#326ce5" strokeLinecap="square" strokeMiterlimit="10" strokeWidth=".265" d="M7.162 8.37h5.617v3.657H7.162z" />
            <circle cx="9.971" cy="10.198" r=".555" fill="#326ce5" />
          </g>
        </symbol>
        <symbol id={`${uid}-s12`} viewBox="0 0 18.035 17.5" overflow="visible">
          <path fill="#326ce5" d="M8.958.463a1.137 1.127 0 0 0-.434.11l-5.94 2.838a1.137 1.127 0 0 0-.615.764L.504 10.551a1.137 1.127 0 0 0 .154.862 1.137 1.127 0 0 0 .065.09l4.11 5.113a1.137 1.127 0 0 0 .89.423l6.592-.001a1.137 1.127 0 0 0 .888-.423l4.11-5.113a1.137 1.127 0 0 0 .219-.953l-1.468-6.374a1.137 1.127 0 0 0-.614-.764L9.51.572a1.137 1.127 0 0 0-.551-.11" />
          <path fill="#fff" d="M-6.852 3.818a1.181 1.172 0 0 0-.452.115l-6.18 2.951a1.181 1.172 0 0 0-.638.795l-1.524 6.63a1.181 1.172 0 0 0 .16.9 1.181 1.172 0 0 0 .067.093l4.276 5.317a1.181 1.172 0 0 0 .924.44h6.858a1.181 1.172 0 0 0 .923-.44L1.837 15.3a1.181 1.172 0 0 0 .228-.99L.54 7.677a1.181 1.172 0 0 0-.64-.795l-6.178-2.95a1.181 1.172 0 0 0-.573-.115m.003.455a1.12 1.11 0 0 1 .542.108l5.853 2.795a1.12 1.11 0 0 1 .606.753l1.446 6.281a1.12 1.11 0 0 1-.216.94l-4.05 5.037a1.12 1.11 0 0 1-.875.417l-6.496.001a1.12 1.11 0 0 1-.875-.417l-4.05-5.037a1.12 1.11 0 0 1-.064-.088 1.12 1.11 0 0 1-.152-.851l1.444-6.281a1.12 1.11 0 0 1 .605-.753l5.853-2.797a1.12 1.11 0 0 1 .429-.108" color="#000" fontFamily="Sans" fontWeight="400" overflow="visible" style={{ "lineHeight": "normal", "textIndent": "0", "textAlign": "start", "textDecorationLine": "none", "textTransform": "none", "marker": "none" }} transform="translate(15.91 -3.873)scale(1.01489)" />
          <path fill="none" stroke="#fff" strokeDasharray="2.11666669,.52916668" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth=".529" d="M13.647 7.229c0 .621-2.073 1.125-4.63 1.125S4.388 7.85 4.388 7.229c0-.62 2.073-1.124 4.63-1.124s4.628.503 4.628 1.124v3.043c0 .62-2.072 1.124-4.629 1.124s-4.629-.503-4.629-1.124V7.229" />
        </symbol>
        <symbol id={`${uid}-s13`} viewBox="0 0 18.035 17.5" overflow="visible">
          <path fill="#326ce5" d="M8.958.463a1.137 1.127 0 0 0-.434.11l-5.94 2.838a1.137 1.127 0 0 0-.615.764L.504 10.551a1.137 1.127 0 0 0 .154.862 1.137 1.127 0 0 0 .065.09l4.11 5.113a1.137 1.127 0 0 0 .89.423l6.592-.001a1.137 1.127 0 0 0 .888-.423l4.11-5.113a1.137 1.127 0 0 0 .219-.953l-1.468-6.374a1.137 1.127 0 0 0-.614-.764L9.51.572a1.137 1.127 0 0 0-.551-.11" />
          <path fill="#fff" d="M-6.852 3.818a1.181 1.172 0 0 0-.452.115l-6.18 2.951a1.181 1.172 0 0 0-.638.795l-1.524 6.63a1.181 1.172 0 0 0 .16.9 1.181 1.172 0 0 0 .067.093l4.276 5.317a1.181 1.172 0 0 0 .924.44h6.858a1.181 1.172 0 0 0 .923-.44L1.837 15.3a1.181 1.172 0 0 0 .228-.99L.54 7.677a1.181 1.172 0 0 0-.64-.795l-6.178-2.95a1.181 1.172 0 0 0-.573-.115m.003.455a1.12 1.11 0 0 1 .542.108l5.853 2.795a1.12 1.11 0 0 1 .606.753l1.446 6.281a1.12 1.11 0 0 1-.216.94l-4.05 5.037a1.12 1.11 0 0 1-.875.417l-6.496.001a1.12 1.11 0 0 1-.875-.417l-4.05-5.037a1.12 1.11 0 0 1-.064-.088 1.12 1.11 0 0 1-.152-.851l1.444-6.281a1.12 1.11 0 0 1 .605-.753l5.853-2.797a1.12 1.11 0 0 1 .429-.108" color="#000" fontFamily="Sans" fontWeight="400" overflow="visible" style={{ "lineHeight": "normal", "textIndent": "0", "textAlign": "start", "textDecorationLine": "none", "textTransform": "none", "marker": "none" }} transform="translate(15.91 -3.873)scale(1.01489)" />
          <path fill="#fff" fillRule="evenodd" d="M4.389 7.228c0 .622 2.073 1.125 4.63 1.125s4.628-.503 4.628-1.124v3.042c0 .621-2.072 1.125-4.629 1.125s-4.629-.504-4.629-1.125z" />
          <path fill="#fff" fillRule="evenodd" d="M4.389 7.228c0-.62 2.073-1.124 4.63-1.124s4.628.503 4.628 1.125c0 .62-2.072 1.124-4.629 1.124S4.389 7.85 4.389 7.229" />
          <path fill="none" stroke="#326ce5" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth=".265" d="M13.648 7.228c0 .622-2.073 1.125-4.63 1.125S4.389 7.85 4.389 7.229s2.073-1.125 4.63-1.125 4.628.503 4.628 1.125v3.042c0 .621-2.072 1.125-4.629 1.125s-4.629-.504-4.629-1.125V7.229" />
        </symbol>
      </defs>
      <rect width="1346" height="681" fill={`url(#${uid}-bg)`} />
      <rect width="1346" height="681" fill={`url(#${uid}-grid)`} />
      <rect width="1346" height="681" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          KUBERNETES WEB WORKLOAD
        </tspan>
      </text>
      <text fontSize="11.5" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65.25">
          Traffic reaches the pods through an Ingress and a Service; a Deployment creates them, an autoscaler scales it, and they use a ConfigMap, a Secret and a volume claim
        </tspan>
      </text>
      <g id={`${uid}-g-cluster`}>
        <rect x="231" y="96" width="1087" height="492" rx="3.06" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.53" />
        <g opacity="0">
          <rect x="231" y="96" width="1087" height="492" rx="3.06" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.53" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0554;0.0839;0.9115;0.94;1" dur="6.321s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-ns`}>
        <rect x="251" y="148" width="792" height="420" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.53" strokeDasharray="4.59 4.59" />
        <g opacity="0">
          <rect x="251" y="148" width="792" height="420" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.53" strokeDasharray="4.59 4.59" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0554;0.0839;0.9115;0.94;1" dur="6.321s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M76 224 L307.24 224" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M298.82 230.12 L308 224 L298.82 217.88" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M76 224 L307.24 224" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.84" 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.1978;0.2728;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.321s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1978;0.2262;0.9;0.9285;1" dur="6.321s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M298.82 230.12 L308 224 L298.82 217.88" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2728;0.3012;0.9;0.9285;1" dur="6.321s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M356 224 L401.5 224 Q408 224 408 230.5 L408 230.5 Q408 237 414.5 237 L462.74 237" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M454.32 243.12 L463.5 237 L454.32 230.88" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M356 224 L401.5 224 Q408 224 408 230.5 L408 230.5 Q408 237 414.5 237 L462.74 237" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.84" 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.3107;0.374;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.321s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3107;0.3392;0.9;0.9285;1" dur="6.321s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M454.32 243.12 L463.5 237 L454.32 230.88" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.374;0.4025;0.9;0.9285;1" dur="6.321s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M511.5 237 L541 237 Q549 237 549 245 L549 310 Q549 318 557 318 L778 318 Q786 318 786 326 L786 333 Q786 341 794 341 L818.24 341" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M809.82 347.12 L819 341 L809.82 334.88" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M511.5 237 L541 237 Q549 237 549 245 L549 310 Q549 318 557 318 L778 318 Q786 318 786 326 L786 333 Q786 341 794 341 L818.24 341" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.84" 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.412;0.545;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.321s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.412;0.4405;0.9;0.9285;1" dur="6.321s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M809.82 347.12 L819 341 L809.82 334.88" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.545;0.5735;0.9;0.9285;1" dur="6.321s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M356 357 L594.74 357" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M586.32 363.12 L595.5 357 L586.32 350.88" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M643.5 357 L713.24 357" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="6.12 4.59" />
        <path d="M704.82 363.12 L714 357 L704.82 350.88" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M762 357 L818.24 357" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="6.12 4.59" />
        <path d="M809.82 363.12 L819 357 L809.82 350.88" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M867 337 L874.5 337 Q882 337 882 329.5 L882 239 Q882 231 890 231 L944.24 231" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M935.82 237.12 L945 231 L935.82 224.88" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e8`}>
        <path d="M867 349 L944.24 349" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M935.82 355.12 L945 349 L935.82 342.88" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e9`}>
        <path d="M867 361 L874.5 361 Q882 361 882 368.5 L882 459 Q882 467 890 467 L944.24 467" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M935.82 473.12 L945 467 L935.82 460.88" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M867 361 L874.5 361 Q882 361 882 368.5 L882 459 Q882 467 890 467 L944.24 467" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.84" 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.583;0.6463;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.321s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.583;0.6115;0.9;0.9285;1" dur="6.321s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M935.82 473.12 L945 467 L935.82 460.88" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6463;0.6747;0.9;0.9285;1" dur="6.321s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e10`}>
        <path d="M993 467 L1219.24 467" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M1210.82 473.12 L1220 467 L1210.82 460.88" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M993 467 L1219.24 467" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.84" 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.6842;0.7576;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="6.321s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6842;0.7127;0.9;0.9285;1" dur="6.321s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M1210.82 473.12 L1220 467 L1210.82 460.88" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.53" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7576;0.7861;0.9;0.9285;1" dur="6.321s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e1`}>
        <rect x="124" y="198" width="51" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.53" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="149.79" y="211.87">
            HTTPS
          </tspan>
        </text>
        <g opacity="0">
          <rect x="124" y="198" width="51" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.53" />
          <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#60a5fa" textAnchor="middle">
            <tspan x="149.79" y="211.87">
              HTTPS
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1978;0.2262;0.9;0.9285;1" dur="6.321s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e4`}>
        <rect x="464" y="331" width="47" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.53" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="487.79" y="344.87">
            SCALES
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e10`}>
        <rect x="1095" y="441" width="47" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.53" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="1118.79" y="454.87">
            BOUND
          </tspan>
        </text>
        <g opacity="0">
          <rect x="1095" y="441" width="47" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.53" />
          <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#60a5fa" textAnchor="middle">
            <tspan x="1118.79" y="454.87">
              BOUND
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6842;0.7127;0.9;0.9285;1" dur="6.321s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-gh-cluster`}>
        <use href={`#${uid}-s1`} x="240.1" y="102.1" width="25.8" height="25.8" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <use href={`#${uid}-s1`} x="240.1" y="102.1" width="25.8" height="25.8" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0554;0.0839;0.9115;0.94;1" dur="6.321s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="271" y="118.36">
            KUBERNETES CLUSTER
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-ns`}>
        <use href={`#${uid}-s2`} x="260.1" y="154.1" width="25.8" height="25.8" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <use href={`#${uid}-s2`} x="260.1" y="154.1" width="25.8" height="25.8" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0554;0.0839;0.9115;0.94;1" dur="6.321s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="291" y="170.36">
            NAMESPACE SHOP
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-users`}>
        <rect x="28" y="200" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.53" />
        <g opacity="0">
          <rect x="28" y="200" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.53" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1107;0.1392;0.9115;0.94;1" dur="6.321s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s3`} x="37.6" y="209.6" width="28.8" height="28.8" />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="52.46" y="266.53">
            USERS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-ing`}>
        <rect x="308" y="200" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.53" />
        <g opacity="0">
          <rect x="308" y="200" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.53" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1107;0.1392;0.9115;0.94;1" dur="6.321s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s4`} x="311.36" y="203.36" width="41.28" height="41.28" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="332.46" y="266.53">
            INGRESS
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="332" y="283.04">
            shop.example.com via
          </tspan>
          <tspan x="332" y="298.04">
            ingress-nginx
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-svc`}>
        <rect x="463.5" y="213" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.53" />
        <g opacity="0">
          <rect x="463.5" y="213" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.53" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1107;0.1392;0.9115;0.94;1" dur="6.321s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="466.86" y="216.36" width="41.28" height="41.28" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="487.96" y="279.53">
            SERVICE
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="487.5" y="296.04">
            ClusterIP port 80
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-hpa`}>
        <rect x="308" y="333" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.53" />
        <g opacity="0">
          <rect x="308" y="333" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.53" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1107;0.1392;0.9115;0.94;1" dur="6.321s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="311.36" y="336.36" width="41.28" height="41.28" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="332.46" y="399.53">
            HORIZONTALPOD
          </tspan>
          <tspan x="332.46" y="416.43">
            AUTOSCALER
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="332" y="432.94">
            3 to 10 replicas
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-deploy`}>
        <rect x="595.5" y="333" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.53" />
        <g opacity="0">
          <rect x="595.5" y="333" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.53" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1107;0.1392;0.9115;0.94;1" dur="6.321s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="598.86" y="336.36" width="41.28" height="41.28" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="619.96" y="399.53">
            DEPLOYMENT
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="619.5" y="416.04">
            web
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-rs`}>
        <rect x="714" y="333" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.53" />
        <g opacity="0">
          <rect x="714" y="333" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.53" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1107;0.1392;0.9115;0.94;1" dur="6.321s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="717.36" y="336.36" width="41.28" height="41.28" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="738.46" y="399.53">
            REPLICASET
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="738" y="416.04">
            web-7c9d
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-pods`}>
        <rect x="819" y="325" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.53" />
        <g opacity="0">
          <rect x="819" y="325" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.53" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1107;0.1392;0.9115;0.94;1" dur="6.321s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="822.36" y="328.36" width="41.28" height="41.28" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="843.46" y="391.53">
            PODS
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="843" y="408.04">
            web x3
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-config`}>
        <rect x="945" y="207" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.53" />
        <g opacity="0">
          <rect x="945" y="207" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.53" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1107;0.1392;0.9115;0.94;1" dur="6.321s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s10`} x="948.36" y="210.36" width="41.28" height="41.28" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="969.47" y="273.53">
            CONFIGMAP
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="969" y="290.04">
            web-config
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-secret`}>
        <rect x="945" y="325" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.53" />
        <g opacity="0">
          <rect x="945" y="325" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.53" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1107;0.1392;0.9115;0.94;1" dur="6.321s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s11`} x="948.36" y="328.36" width="41.28" height="41.28" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="969.46" y="391.53">
            SECRET
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="969" y="408.04">
            db-credentials
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-pvc`}>
        <rect x="945" y="443" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.53" />
        <g opacity="0">
          <rect x="945" y="443" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.53" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1107;0.1392;0.9115;0.94;1" dur="6.321s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s12`} x="948.36" y="446.36" width="41.28" height="41.28" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.25" fontWeight="700" letterSpacing="0.9" fill="#9d9fa0" textAnchor="middle">
          <tspan x="969.45" y="509.44">
            PERSISTENTVOLUME
          </tspan>
          <tspan x="969.45" y="526.34">
            CLAIM
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="969" y="542.94">
            uploads 20Gi
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-pv`}>
        <rect x="1220" y="443" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.53" />
        <g opacity="0">
          <rect x="1220" y="443" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.53" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1107;0.1392;0.9115;0.94;1" dur="6.321s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s13`} x="1223.36" y="446.36" width="41.28" height="41.28" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.25" fontWeight="700" letterSpacing="0.9" fill="#9d9fa0" textAnchor="middle">
          <tspan x="1244.45" y="509.44">
            PERSISTENTVOLUME
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="1244" y="526.04">
            Cluster scoped
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <path d="M76 224 L307.24 224" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.67" 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.1978;0.2728;0.2857;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.321s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1978;0.1993;0.2857;0.2872;1" dur="6.321s" repeatCount="indefinite" />
        </path>
        <circle r="3.82" fill="#60a5fa" opacity="0">
          <animateMotion path="M76 224 L307.24 224" dur="6.321s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.1978;0.2728;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.174;0.1978;0.3107;0.3345;1" dur="6.321s" repeatCount="indefinite" />
        </circle>
        <path d="M356 224 L401.5 224 Q408 224 408 230.5 L408 230.5 Q408 237 414.5 237 L462.74 237" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.67" pathLength="1" strokeDasharray="0.33 2" strokeDashoffset="0.33" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.33;0.33;-0.67;-1;-1" keyTimes="0;0.3107;0.374;0.395;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.321s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3107;0.3123;0.395;0.3966;1" dur="6.321s" repeatCount="indefinite" />
        </path>
        <circle r="3.82" fill="#60a5fa" opacity="0">
          <animateMotion path="M356 224 L401.5 224 Q408 224 408 230.5 L408 230.5 Q408 237 414.5 237 L462.74 237" dur="6.321s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3107;0.374;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.287;0.3107;0.412;0.4357;1" dur="6.321s" repeatCount="indefinite" />
        </circle>
        <path d="M511.5 237 L541 237 Q549 237 549 245 L549 310 Q549 318 557 318 L778 318 Q786 318 786 326 L786 333 Q786 341 794 341 L818.24 341" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.67" pathLength="1" strokeDasharray="0.1 2" strokeDashoffset="0.1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.1;0.1;-0.9;-1;-1" keyTimes="0;0.412;0.545;0.5579;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.321s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.412;0.4136;0.5579;0.5595;1" dur="6.321s" repeatCount="indefinite" />
        </path>
        <circle r="3.82" fill="#60a5fa" opacity="0">
          <animateMotion path="M511.5 237 L541 237 Q549 237 549 245 L549 310 Q549 318 557 318 L778 318 Q786 318 786 326 L786 333 Q786 341 794 341 L818.24 341" dur="6.321s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.412;0.545;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.3883;0.412;0.583;0.6067;1" dur="6.321s" repeatCount="indefinite" />
        </circle>
        <circle r="3.06" fill="#60a5fa" opacity="0">
          <animateMotion path="M762 357 L818.24 357" dur="6.321s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4497;0.513;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.426;0.4497;0.513;0.5367;1" dur="6.321s" repeatCount="indefinite" />
        </circle>
        <circle r="3.06" fill="#60a5fa" opacity="0">
          <animateMotion path="M867 337 L874.5 337 Q882 337 882 329.5 L882 239 Q882 231 890 231 L944.24 231" dur="6.321s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6176;0.6809;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.5939;0.6176;0.6809;0.7047;1" dur="6.321s" repeatCount="indefinite" />
        </circle>
        <path d="M867 361 L874.5 361 Q882 361 882 368.5 L882 459 Q882 467 890 467 L944.24 467" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.67" pathLength="1" strokeDasharray="0.22 2" strokeDashoffset="0.22" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.22;0.22;-0.78;-1;-1" keyTimes="0;0.583;0.6463;0.66;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.321s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.583;0.5846;0.66;0.6616;1" dur="6.321s" repeatCount="indefinite" />
        </path>
        <circle r="3.82" fill="#60a5fa" opacity="0">
          <animateMotion path="M867 361 L874.5 361 Q882 361 882 368.5 L882 459 Q882 467 890 467 L944.24 467" dur="6.321s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.583;0.6463;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.5592;0.583;0.6842;0.708;1" dur="6.321s" repeatCount="indefinite" />
        </circle>
        <path d="M993 467 L1219.24 467" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.67" pathLength="1" strokeDasharray="0.18 2" strokeDashoffset="0.18" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.18;0.18;-0.82;-1;-1" keyTimes="0;0.6842;0.7576;0.7705;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="6.321s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6842;0.6858;0.7705;0.7721;1" dur="6.321s" repeatCount="indefinite" />
        </path>
        <circle r="3.82" fill="#60a5fa" opacity="0">
          <animateMotion path="M993 467 L1219.24 467" dur="6.321s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6842;0.7576;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.6605;0.6842;0.7576;0.7813;1" dur="6.321s" repeatCount="indefinite" />
        </circle>
      </g>
      <g id={`${uid}-legend`}>
        <rect x="1139" y="600" width="179" height="53" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.53" />
        <path d="M1149 617.5 H1177" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.53" strokeLinecap="round" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#9d9fa0">
          <tspan x="1185" y="620.52">
            TRAFFIC AND REFERENCES
          </tspan>
        </text>
        <path d="M1149 635.5 H1177" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.53" strokeLinecap="round" strokeDasharray="6.12 4.59" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="1185" y="638.87">
            CREATES
          </tspan>
        </text>
      </g>
    </svg>
  );
}
