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

export default function VideoStreamingSystemDesign(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="1047" height="1243" viewBox="0 0 1047 1243" 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`}>
        Video streaming system design
      </title>
      <desc id={`${uid}-sdw-desc`}>
        Video streaming system design. 14 components. Connections: Clients to API gateway (HTTPS API); API gateway to Upload service (get upload URL); Upload service to Metadata service (create video); Clients to Raw uploads (PUT pre-signed URL); Raw uploads to Transcode jobs (upload complete); Raw uploads to Transcoding workers (source file); Transcode jobs to Transcoding workers (poll); Transcoding workers to Processed storage (HLS/DASH renditions); Transcoding workers to Metadata service (ready); API gateway to Metadata service (watch page); Metadata service to Redis (lookup); Metadata service to Metadata DB (on miss); Metadata service to Search (index); API gateway to Search (query); API gateway to Recommendations (home feed); API gateway to view-events (produce); view-events to Recommendations (watch history); Clients to CDN edge (HLS segments); CDN edge to Processed storage (cache miss).
      </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="23.8" height="23.8" patternUnits="userSpaceOnUse">
          <path d="M0 0.59H23.8M0.59 0V23.8" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1.19" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="605.5" cy="614" r="523.85">
          <stop offset="0" stopColor="#60a5fa" stopOpacity="0.12" />
          <stop offset="1" stopColor="#60a5fa" stopOpacity="0" />
        </radialGradient>
        <mask id={`${uid}-m-e5`} maskUnits="userSpaceOnUse" x="0" y="0" width="1047" height="1243">
          <path d="M699 421 L699 583.41" fill="none" stroke="#ffffff" strokeWidth="8.57" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1">
            <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.3175;0.3894;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.952s" repeatCount="indefinite" />
          </path>
        </mask>
        <mask id={`${uid}-m-e7`} maskUnits="userSpaceOnUse" x="0" y="0" width="1047" height="1243">
          <path d="M699 644 L699 755 Q699 763 707 763 L730 763 Q738 763 738 771 L738 816.41" fill="none" stroke="#ffffff" strokeWidth="8.57" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1">
            <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.4298;0.5233;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.952s" repeatCount="indefinite" />
          </path>
        </mask>
        <mask id={`${uid}-m-e9`} maskUnits="userSpaceOnUse" x="0" y="0" width="1047" height="1243">
          <path d="M670 851 L553.59 851" fill="none" stroke="#ffffff" strokeWidth="8.57" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1">
            <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.5636;0.6308;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.952s" repeatCount="indefinite" />
          </path>
        </mask>
        <symbol id={`${uid}-s1`} viewBox="0 0 24 24" overflow="visible">
          <g fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.49">
            <path d="M13 9a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1z" />
            <path d="M18 8V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h9m3-9h2" />
          </g>
        </symbol>
        <symbol id={`${uid}-s2`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.49" d="M4 13h5m3 3V8h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-3m8-5v8M9 16v-5.5a2.5 2.5 0 0 0-5 0V16" />
        </symbol>
        <symbol id={`${uid}-s3`} viewBox="0 0 256 413" overflow="visible">
          <g fill="#919394">
            <path fill="#919394" d="M87.932 36.714c-4.55-4.571-10.896-7.394-17.951-7.394c-7.029 0-13.326 2.823-17.822 7.394h-.13c-4.535 4.55-7.358 10.9-7.358 17.93c0 7.055 2.823 13.352 7.359 17.875l.129.102c4.496 4.55 10.793 7.346 17.822 7.346c7.055 0 13.402-2.797 17.951-7.346L88 72.52c4.558-4.523 7.354-10.82 7.354-17.876c0-7.029-2.796-13.38-7.354-17.929zm-17.951 346.64a25.5 25.5 0 0 0 17.951-7.368l.067-.134c4.558-4.487 7.354-10.838 7.354-17.817c0-7.056-2.796-13.38-7.354-17.952h-.067c-4.55-4.625-10.896-7.42-17.951-7.42c-7.029 0-13.326 2.795-17.822 7.42h-.13c-4.535 4.572-7.358 10.896-7.358 17.952c0 6.98 2.823 13.33 7.359 17.817l.129.134a25.15 25.15 0 0 0 17.822 7.368m137.972-76.72c6.275-1.646 11.957-5.673 15.423-11.761l.468-.887c3.082-5.776 3.644-12.44 1.998-18.344c-1.659-6.324-5.735-11.917-11.81-15.418l-.352-.237c-5.918-3.242-12.662-3.947-18.857-2.274c-6.297 1.57-11.952 5.775-15.4 11.814c-3.492 5.981-4.223 12.88-2.55 19.231c1.725 6.244 5.761 11.89 11.796 15.418h.04c6.047 3.475 12.898 4.104 19.244 2.458M95.97 180.387c-6.654-6.637-15.824-10.794-25.988-10.794c-10.124 0-19.272 4.157-25.912 10.794c-6.61 6.614-10.686 15.76-10.686 25.898c0 10.165 4.076 19.339 10.686 26.029c6.64 6.582 15.788 10.712 25.912 10.712c10.164 0 19.334-4.13 25.988-10.712c6.623-6.69 10.7-15.864 10.7-26.029c0-10.137-4.077-19.284-10.7-25.898m-14.61-43.164c14.726 2.426 27.976 9.482 38.087 19.673h.08a72 72 0 0 1 4.625 5.147l25.284-14.629c-3.399-10.271-3.555-21.01-.826-31.072c3.609-13.487 12.35-25.56 25.453-33.137l.433-.26c12.96-7.345 27.696-8.861 41-5.253a54.52 54.52 0 0 1 33.186 25.48v.026c7.529 13.015 9.059 27.96 5.464 41.393c-3.581 13.478-12.363 25.631-25.453 33.155l-3.452 2.043h-.352c-12.109 5.771-25.426 6.663-37.655 3.447c-10.044-2.667-19.258-8.26-26.47-16.23l-25.243 14.585a69.7 69.7 0 0 1 4.509 24.694a70.7 70.7 0 0 1-4.51 24.824l25.244 14.53c7.212-8.072 16.426-13.562 26.47-16.229c13.469-3.684 28.405-2.114 41.46 5.49l.833.393v.053c12.613 7.627 21.078 19.441 24.619 32.767a54.43 54.43 0 0 1-5.464 41.344l-.454.914l-.054-.08c-7.564 12.573-19.48 21.091-32.638 24.695c-13.5 3.554-28.432 2.038-41.473-5.46v-.106c-13.103-7.578-21.844-19.678-25.453-33.133c-2.729-10.035-2.573-20.779.826-31.046l-25.284-14.584c-1.45 1.78-3.02 3.452-4.625 5.071l-.08.076c-10.11 10.142-23.361 17.198-38.088 19.548v29.217c10.494 2.194 19.9 7.448 27.273 14.816l.035.08c9.88 9.825 15.994 23.517 15.994 38.57c0 15.003-6.115 28.61-15.994 38.489l-.035.156c-9.946 9.879-23.598 15.993-38.65 15.993c-14.972 0-28.642-6.114-38.56-15.993h-.036v-.156c-9.893-9.879-16.02-23.486-16.02-38.49a54.26 54.26 0 0 1 16.02-38.569v-.08h.035c7.36-7.368 16.779-12.622 27.246-14.816v-29.217c-14.74-2.35-27.95-9.406-38.048-19.548l-.107-.076C7.89 243.053 0 225.624 0 206.285c0-19.284 7.89-36.714 20.511-49.389h.107c10.098-10.19 23.308-17.247 38.048-19.673v-29.087A55.34 55.34 0 0 1 31.42 93.293h-.035v-.08c-9.893-9.928-16.02-23.518-16.02-38.57c0-14.976 6.127-28.695 16.02-38.574l.035-.049C41.34 6.115 55.01 0 69.98 0c15.053 0 28.705 6.115 38.65 16.02v.05h.036c9.88 9.878 15.994 23.597 15.994 38.573c0 15.052-6.115 28.642-15.994 38.57l-.035.08c-7.373 7.319-16.779 12.568-27.273 14.843zm142.017-19.392l-.21-.312c-3.492-5.882-9.058-9.803-15.213-11.502c-6.346-1.672-13.197-.963-19.284 2.511h.04c-6.075 3.448-10.138 9.094-11.837 15.418a25.3 25.3 0 0 0 2.551 19.231l.116.16a25 25 0 0 0 15.284 11.57a24.83 24.83 0 0 0 19.21-2.48l.325-.156c5.905-3.528 9.838-9.094 11.484-15.208c1.673-6.298 1.008-13.197-2.466-19.232" />
          </g>
        </symbol>
        <symbol id={`${uid}-s4`} viewBox="0 0 24 24" overflow="visible">
          <g fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.49">
            <path d="M15.5 13a3.5 3.5 0 0 0-3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1-7 0v-1.8" />
            <path d="M17.5 16a3.5 3.5 0 0 0 0-7H17" />
            <path d="M19 9.3V6.5a3.5 3.5 0 0 0-7 0M6.5 16a3.5 3.5 0 0 1 0-7H7" />
            <path d="M5 9.3V6.5a3.5 3.5 0 0 1 7 0v10" />
          </g>
        </symbol>
        <symbol id={`${uid}-s5`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.49" d="M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm0 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm4-7v.01M7 16v.01M11 8h6m-6 8h6" />
        </symbol>
        <symbol id={`${uid}-s6`} viewBox="0 0 256 288" overflow="visible">
          <path fill="#343741" d="M0 143.82c0 12.44 1.744 24.441 4.71 35.956h175.067c19.856 0 35.955-16.1 35.955-35.956c0-19.865-16.1-35.955-35.955-35.955H4.71C1.744 119.371 0 131.38 0 143.82" />
          <path fill="#fec514" d="M242.013 68.863c5.025-4.629 9.7-9.6 13.987-14.93C229.636 21.079 189.213 0 143.82 0C87 0 38.101 33.052 14.775 80.9h196.559c11.38 0 22.319-4.324 30.678-12.037" />
          <path fill="#00bfb3" d="M211.334 206.742H14.774c23.336 47.839 72.226 80.9 129.045 80.9c45.393 0 85.816-21.088 112.18-53.933a136.6 136.6 0 0 0-13.987-14.94c-8.36-7.721-19.299-12.027-30.678-12.027" />
        </symbol>
        <filter id={`${uid}-f1`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feFlood floodColor="#919394" />
          <feComposite in2="SourceAlpha" operator="in" />
        </filter>
        <symbol id={`${uid}-s7`} viewBox="0 0 256 220" overflow="visible">
          <path fill="#912626" d="M245.97 168.943c-13.662 7.121-84.434 36.22-99.501 44.075s-23.437 7.78-35.34 2.09c-11.902-5.69-87.216-36.112-100.783-42.597C3.566 169.271 0 166.535 0 163.951v-25.876s98.05-21.345 113.879-27.024c15.828-5.679 21.32-5.884 34.79-.95c13.472 4.936 94.018 19.468 107.331 24.344l-.006 25.51c.002 2.558-3.07 5.364-10.024 8.988" />
          <path fill="#c6302b" d="M245.965 143.22c-13.661 7.118-84.431 36.218-99.498 44.072c-15.066 7.857-23.436 7.78-35.338 2.09c-11.903-5.686-87.214-36.113-100.78-42.594c-13.566-6.485-13.85-10.948-.524-16.166c13.326-5.22 88.224-34.605 104.055-40.284c15.828-5.677 21.319-5.884 34.789-.948c13.471 4.934 83.819 32.935 97.13 37.81c13.316 4.881 13.827 8.9.166 16.02" />
          <path fill="#912626" d="M245.97 127.074c-13.662 7.122-84.434 36.22-99.501 44.078c-15.067 7.853-23.437 7.777-35.34 2.087c-11.903-5.687-87.216-36.112-100.783-42.597C3.566 127.402 0 124.67 0 122.085V96.206s98.05-21.344 113.879-27.023c15.828-5.679 21.32-5.885 34.79-.95C162.142 73.168 242.688 87.697 256 92.574l-.006 25.513c.002 2.557-3.07 5.363-10.024 8.987" />
          <path fill="#c6302b" d="M245.965 101.351c-13.661 7.12-84.431 36.218-99.498 44.075c-15.066 7.854-23.436 7.777-35.338 2.087c-11.903-5.686-87.214-36.112-100.78-42.594c-13.566-6.483-13.85-10.947-.524-16.167C23.151 83.535 98.05 54.148 113.88 48.47c15.828-5.678 21.319-5.884 34.789-.949c13.471 4.934 83.819 32.933 97.13 37.81c13.316 4.88 13.827 8.9.166 16.02" />
          <path fill="#912626" d="M245.97 83.653c-13.662 7.12-84.434 36.22-99.501 44.078c-15.067 7.854-23.437 7.777-35.34 2.087c-11.903-5.687-87.216-36.113-100.783-42.595C3.566 83.98 0 81.247 0 78.665v-25.88s98.05-21.343 113.879-27.021c15.828-5.68 21.32-5.884 34.79-.95C162.142 29.749 242.688 44.278 256 49.155l-.006 25.512c.002 2.555-3.07 5.361-10.024 8.986" />
          <path fill="#c6302b" d="M245.965 57.93c-13.661 7.12-84.431 36.22-99.498 44.074c-15.066 7.854-23.436 7.777-35.338 2.09C99.227 98.404 23.915 67.98 10.35 61.497S-3.5 50.55 9.825 45.331C23.151 40.113 98.05 10.73 113.88 5.05c15.828-5.679 21.319-5.883 34.789-.948s83.819 32.934 97.13 37.811c13.316 4.876 13.827 8.897.166 16.017" />
          <path fill="#fff" d="m159.283 32.757l-22.01 2.285l-4.927 11.856l-7.958-13.23l-25.415-2.284l18.964-6.839l-5.69-10.498l17.755 6.944l16.738-5.48l-4.524 10.855zm-28.251 57.518L89.955 73.238l58.86-9.035zm-56.95-50.928c17.375 0 31.46 5.46 31.46 12.194c0 6.736-14.085 12.195-31.46 12.195s-31.46-5.46-31.46-12.195c0-6.734 14.085-12.194 31.46-12.194" />
          <path fill="#621b1c" d="m185.295 35.998l34.836 13.766l-34.806 13.753z" />
          <path fill="#9a2928" d="m146.755 51.243l38.54-15.245l.03 27.519l-3.779 1.478z" />
        </symbol>
        <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="#919394" floodOpacity="0.4" />
          <feComposite in2="SourceAlpha" operator="in" result="base" />
          <feFlood floodColor="#919394" />
          <feComposite in2="a" operator="in" result="hi" />
          <feMerge>
            <feMergeNode in="base" />
            <feMergeNode in="hi" />
          </feMerge>
        </filter>
        <symbol id={`${uid}-s8`} viewBox="0 0 256 233" overflow="visible">
          <path fill="#f16938" d="M0 0h51.35l25.818 47.193l10.363 19.092l20.064 37.037l11.55 21.306l8.706 16.003l6.374-11.731l18.688-34.412l16.799-30.412l9.139-16.557L204.866 0H256l-22.951 41.618l-29.088 52.762l-26.626 48.111l-50.341 91.192l46.368-84.004l-46.376 84.01l-24.255-44.436l-21.452-39.573l-4.165-7.678l-25.647-47.079l-2.412-4.408l-4.536-8.271z" />
          <path d="m44.525 82.237l-.006.007z" />
          <path fill="#284e64" d="m144.694 142.654l.024-.124l8.204-48.032zm59.255-48.269l-26.625 48.118l-50.332 91.176l.002.004l50.341-91.192l26.626-48.111l29.088-52.762zm.91-94.379l-8.547 15.618l8.55-15.618zM44.525 82.237l32.64-35.029zm6.948 12.686L87.52 66.29zm0 0l-2.418-4.408l2.412 4.408l25.647 47.079l4.165 7.678l-4.168-7.688z" />
          <path fill="#284e64" d="m60.466 78.223l16.7-31.015L87.518 66.29l20.076 37.032L87.53 66.285L77.168 47.193L51.358.006h-.005l25.812 47.202zm75.13 76.647l.118.218l4.833 8.885zm34.116-90.794l-16.8 30.412l-18.687 34.412l18.697-34.402z" />
          <path fill="#f16827" d="m102.731 189.253l24.255 44.436l13.349-68.627z" />
          <path fill="#f48029" d="m140.547 163.973l-4.833-8.885l-16.569-30.46l-16.414 64.625l37.604-24.191z" />
          <path fill="#f89a2e" d="m77.111 141.992l4.168 7.688l21.452 39.573l16.414-64.625z" />
          <path fill="#f16827" d="m77.111 141.992l42.034-17.364l-11.55-21.306L87.519 66.29z" />
          <path fill="#f89921" d="m144.694 142.654l8.228-48.156l-18.697 34.402l-6.374 11.731l7.745 14.239l4.951 9.103z" />
          <path fill="#f89a2e" d="m51.473 94.923l25.638 47.069L87.519 66.29z" />
          <path fill="#f48029" d="m177.324 142.503l26.625-48.118l-59.231 48.145z" />
          <path fill="#f4ae5c" d="m77.165 47.208l-16.7 31.015l-8.992 16.7L87.52 66.29zm67.553 95.322l34.133-95.011l-9.139 16.557l-16.79 30.422z" />
          <path fill="#cd4e27" d="m51.473 94.923l8.993-16.7l16.699-31.015l-32.64 35.029l-.006.007l4.536 8.271z" />
          <path fill="#f16938" d="m203.949 94.385l-25.098-46.866l-34.133 95.01zM44.525 82.237l32.64-35.029L51.353.006L51.35 0l-6.831 82.244z" />
          <path fill="#f89a2e" d="m203.949 94.385l.917-94.379V0l-.003.006l-8.55 15.618l-17.462 31.895zM51.349 0H0l44.519 82.244z" />
          <path fill="#cd4e27" d="M204.866 0v.006l-.917 94.379l29.1-52.767L256 0zm-60.148 142.53l-.024.124l-4.147 21.319l-.212 1.089l-13.349 68.627l.006-.01l50.332-91.176z" />
        </symbol>
        <symbol id={`${uid}-s9`} viewBox="0 0 24 24" overflow="visible">
          <g fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.49">
            <path d="M4 7a8 4 0 1 0 16 0A8 4 0 1 0 4 7" />
            <path d="M4 7c0 .664.088 1.324.263 1.965L7 19c.5 1.5 2.239 2 5 2s4.5-.5 5-2q.5-1.5 2.737-10.035A7.5 7.5 0 0 0 20 7" />
          </g>
        </symbol>
        <symbol id={`${uid}-s10`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4L4 8l8 4l8-4zm-8 8l8 4l8-4M4 16l8 4l8-4" />
        </symbol>
        <symbol id={`${uid}-s11`} viewBox="0 0 256 244" overflow="visible">
          <defs>
            <radialGradient id={`${uid}-s11-_SVGK18OLd2s`} cx="19.932%" cy="18.852%" r="50.648%" fx="19.932%" fy="18.852%" gradientTransform="matrix(.96523 0 0 1 .007 0)">
              <stop offset="0%" stopColor="#fff" />
              <stop offset="100%" stopColor="#007808" />
            </radialGradient>
          </defs>
          <path fill="#0b4819" d="M2.132 51.591V21.189l20.409 7.031v28.283zm16.457 124.986V63.534l19.508 4.127v105.06z" />
          <path fill="#105c80" d="m114.003 21.139l-50.135 57.5v24.469l74.357-83.843L256 10.148L82.762 190.718l23.062 1.214L231.652 63.233v121.639l-13.978 13.14l35.451 1.915v33.666l-111.203-8.613l56.687-54.992v-27.102l-81.043 80.208l-97.04-7.503L176.18 48.195l-25.616 1.385L38.097 172.721V67.661L48.75 55.084l-26.209 1.419V28.22z" />
          <path fill="#0b4819" d="m18.589 63.534l11.283-13.582l18.878 5.132l-10.653 12.577z" />
          <path fill="#084010" d="m45.917 75.272l17.951 3.367v24.469l-17.951-1.469z" />
          <path fill="#0c541e" d="m66.012 196.142l16.75-5.424l23.062 1.214l-15.218 5.629z" />
          <path fill="#1a5c34" d="m99.344 12.96l14.659 8.179l-50.135 57.5l-17.951-3.367z" />
          <path fill="#0b4819" d="m45.917 101.639l79.356-90.873l12.952 8.499l-74.357 83.843z" />
          <path fill="#1a5c34" d="m138.513 43.53l12.051 6.05L38.097 172.721l-19.508 3.856z" />
          <path fill="#0b4819" d="M0 222.589L166.066 41.902l10.114 6.293L20.526 215.591z" />
          <path fill="#1a5c34" d="m190.263 144.697l8.346-1.811l-81.043 80.208l-14.412 8.229z" />
          <path fill="#0b4819" d="M190.263 174.156v-29.459l8.346-1.811v27.102z" />
          <path fill="#0b4819" d="m129.241 233.526l61.022-59.37l8.346-4.168l-56.687 54.992z" />
          <path fill="#13802d" d="m226.027 190.476l-15.147 14.233l6.794-6.697l13.978-13.14z" />
          <path fill="#0b4819" d="m90.606 197.561l135.421-139.56l5.625 5.232l-125.828 128.699z" />
          <path fill="#084010" d="m226.027 58.001l5.625 5.232v121.639l-5.625 5.604zm23.33 148.982l3.768-7.056v33.666l-3.768 10.106z" />
          <path fill="#1a5c34" d="M252.478 0L256 10.148L82.762 190.718l-16.75 5.424z" />
          <path fill={`url(#${uid}-s11-_SVGK18OLd2s)`} d="M99.344 12.96L45.917 75.272v26.367l79.356-90.873L252.478 0L66.012 196.142l24.594 1.419l135.421-139.56v132.475l-15.147 14.233l38.477 2.274v36.716l-120.116-10.173l61.022-59.37v-29.459l-87.109 86.626L0 222.589L166.066 41.902l-27.553 1.628L18.589 176.577V63.534l11.283-13.582l-27.74 1.639V21.189z" />
        </symbol>
        <symbol id={`${uid}-s12`} viewBox="0 0 24 24" overflow="visible">
          <g fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.49">
            <path d="M20.985 12.52a9 9 0 1 0-7.52 8.36M3.6 9h16.8M3.6 15h10.9" />
            <path d="M11.5 3a17 17 0 0 0 0 18m1-18c2.313 3.706 3.07 7.856 2.27 12M19 16l-2 3h4l-2 3" />
          </g>
        </symbol>
      </defs>
      <rect width="1047" height="1243" fill={`url(#${uid}-bg)`} />
      <rect width="1047" height="1243" fill={`url(#${uid}-grid)`} />
      <rect width="1047" height="1243" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          VIDEO STREAMING SYSTEM DESIGN
        </tspan>
      </text>
      <text fontSize="11.5" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65.25">
          Uploads go straight to object storage; workers transcode a bitrate ladder that viewers stream as HLS segments from the CDN
        </tspan>
      </text>
      <g id={`${uid}-e-e1`}>
        <path d="M683 184 L683 196 Q683 204 675 204 L338 204 Q330 204 330 212 L330 332.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M325.24 325.86 L330 333 L334.76 325.86" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M358 421 L358 433 Q358 441 366 441 L509 441 Q517 441 517 449 L517 569.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M512.24 562.86 L517 570 L521.76 562.86" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M517 658 L517 806.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M512.24 799.86 L517 807 L521.76 799.86" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M713 184 L713 332.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="2.14" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M708.24 325.86 L713 333 L717.76 325.86" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M713 184 L713 332.41" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="2.14" 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.21;0.2772;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.952s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.21;0.2402;0.9;0.9302;1" dur="5.952s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M708.24 325.86 L713 333 L717.76 325.86" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2772;0.3074;0.9;0.9302;1" dur="5.952s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M699 421 L699 583.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.76 3.57" />
        <path d="M694.24 576.86 L699 584 L703.76 576.86" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
        <g mask={`url(#${uid}-m-e5)`} opacity="0">
          <path d="M699 421 L699 583.41" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.43" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.76 3.57" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3175;0.3478;0.9;0.9302;1" dur="5.952s" repeatCount="indefinite" />
        </g>
        <g opacity="0">
          <path d="M694.24 576.86 L699 584 L703.76 576.86" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3894;0.4197;0.9;0.9302;1" dur="5.952s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M726 421 L726 433 Q726 441 734 441 L822 441 Q830 441 830 449 L830 755 Q830 763 822 763 L813 763 Q805 763 805 771 L805 816.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="2.14" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M800.24 809.86 L805 817 L809.76 809.86" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M699 644 L699 755 Q699 763 707 763 L730 763 Q738 763 738 771 L738 816.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.76 3.57" />
        <path d="M733.24 809.86 L738 817 L742.76 809.86" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
        <g mask={`url(#${uid}-m-e7)`} opacity="0">
          <path d="M699 644 L699 755 Q699 763 707 763 L730 763 Q738 763 738 771 L738 816.41" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.43" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.76 3.57" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4298;0.46;0.9;0.9302;1" dur="5.952s" repeatCount="indefinite" />
        </g>
        <g opacity="0">
          <path d="M733.24 809.86 L738 817 L742.76 809.86" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5233;0.5535;0.9;0.9302;1" dur="5.952s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e8`}>
        <path d="M772 885 L772 992 Q772 1000 780 1000 L877 1000 Q885 1000 885 1008 L885 1043.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="2.14" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M880.24 1036.86 L885 1044 L889.76 1036.86" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e9`}>
        <path d="M670 851 L553.59 851" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.76 3.57" />
        <path d="M560.14 846.24 L553 851 L560.14 855.76" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
        <g mask={`url(#${uid}-m-e9)`} opacity="0">
          <path d="M670 851 L553.59 851" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.43" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.76 3.57" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5636;0.5939;0.9;0.9302;1" dur="5.952s" repeatCount="indefinite" />
        </g>
        <g opacity="0">
          <path d="M560.14 846.24 L553 851 L560.14 855.76" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6308;0.6611;0.9;0.9302;1" dur="5.952s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e10`}>
        <path d="M344 421 L344 670 Q344 678 352 678 L384 678 Q392 678 392 686 L392 755 Q392 763 400 763 L474 763 Q482 763 482 771 L482 806.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M477.24 799.86 L482 807 L486.76 799.86" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e11`}>
        <path d="M500 895 L500 917 Q500 925 492 925 L481 925 Q473 925 473 933 L473 1043.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M468.24 1036.86 L473 1044 L477.76 1036.86" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M500 895 L500 917 Q500 925 492 925 L481 925 Q473 925 473 933 L473 1043.41" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.43" 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.6711;0.7488;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.952s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6711;0.7014;0.9;0.9302;1" dur="5.952s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M468.24 1036.86 L473 1044 L477.76 1036.86" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7488;0.779;0.9;0.9302;1" dur="5.952s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e12`}>
        <path d="M526 895 L526 907 Q526 915 534 915 L647 915 Q655 915 655 923 L655 1049.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M650.24 1042.86 L655 1050 L659.76 1042.86" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e13`}>
        <path d="M473 895 L473 907 Q473 915 465 915 L369 915 Q361 915 361 923 L361 1043.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.76 3.57" />
        <path d="M356.24 1036.86 L361 1044 L365.76 1036.86" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e14`}>
        <path d="M330 421 L330 1043.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M325.24 1036.86 L330 1044 L334.76 1036.86" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e15`}>
        <path d="M315 421 L315 443 Q315 451 307 451 L239 451 Q231 451 231 459 L231 755 Q231 763 223 763 L157 763 Q149 763 149 771 L149 806.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M144.24 799.86 L149 807 L153.76 799.86" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e16`}>
        <path d="M301 421 L301 433 Q301 441 293 441 L118 441 Q110 441 110 449 L110 583.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.76 3.57" />
        <path d="M105.24 576.86 L110 584 L114.76 576.86" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e17`}>
        <path d="M110 644 L110 806.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.76 3.57" />
        <path d="M105.24 799.86 L110 807 L114.76 799.86" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e18`}>
        <path d="M742 184 L742 196 Q742 204 750 204 L915 204 Q923 204 923 212 L923 332.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="2.14" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M918.24 325.86 L923 333 L927.76 325.86" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e19`}>
        <path d="M923 421 L923 1043.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="2.14" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M918.24 1036.86 L923 1044 L927.76 1036.86" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-el-e1`}>
        <rect x="335" y="248" width="72" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="371.28" y="261.78">
            HTTPS API
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e2`}>
        <rect x="522" y="485" width="96" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="570.28" y="498.78">
            GET UPLOAD URL
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e3`}>
        <rect x="522" y="722" width="80" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#979899" textAnchor="middle">
          <tspan x="562.27" y="735.7">
            CREATE VIDEO
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e4`}>
        <rect x="718" y="248" width="125" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="780.78" y="261.78">
            PUT PRE-SIGNED URL
          </tspan>
        </text>
        <g opacity="0">
          <rect x="718" y="248" width="125" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.19" />
          <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#60a5fa" textAnchor="middle">
            <tspan x="780.78" y="261.78">
              PUT PRE-SIGNED URL
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.21;0.2402;0.9;0.9302;1" dur="5.952s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e5`}>
        <rect x="704" y="485" width="103" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="755.78" y="498.78">
            UPLOAD COMPLETE
          </tspan>
        </text>
        <g opacity="0">
          <rect x="704" y="485" width="103" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.19" />
          <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#60a5fa" textAnchor="middle">
            <tspan x="755.78" y="498.78">
              UPLOAD COMPLETE
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3175;0.3478;0.9;0.9302;1" dur="5.952s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e6`}>
        <rect x="835" y="603.5" width="70" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="870.26" y="617.02">
            SOURCE FILE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e7`}>
        <rect x="704" y="722" width="32" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="720.28" y="735.78">
            POLL
          </tspan>
        </text>
        <g opacity="0">
          <rect x="704" y="722" width="32" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.19" />
          <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#60a5fa" textAnchor="middle">
            <tspan x="720.28" y="735.78">
              POLL
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4298;0.46;0.9;0.9302;1" dur="5.952s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e8`}>
        <rect x="777" y="959" width="128" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="841.28" y="972.78">
            HLS/DASH RENDITIONS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e9`}>
        <rect x="590" y="827" width="43" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="611.78" y="840.78">
            READY
          </tspan>
        </text>
        <g opacity="0">
          <rect x="590" y="827" width="43" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.19" />
          <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#60a5fa" textAnchor="middle">
            <tspan x="611.78" y="840.78">
              READY
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5636;0.5939;0.9;0.9302;1" dur="5.952s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e10`}>
        <rect x="349" y="603.5" width="76" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="387.28" y="617.28">
            WATCH PAGE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e11`}>
        <rect x="478" y="959" width="49" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="502.78" y="972.78">
            LOOKUP
          </tspan>
        </text>
        <g opacity="0">
          <rect x="478" y="959" width="49" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.19" />
          <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#60a5fa" textAnchor="middle">
            <tspan x="502.78" y="972.78">
              LOOKUP
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6711;0.7014;0.9;0.9302;1" dur="5.952s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e12`}>
        <rect x="660" y="959" width="54" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="687.28" y="972.78">
            ON MISS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e13`}>
        <rect x="366" y="959" width="42" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="387.28" y="972.78">
            INDEX
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e14`}>
        <rect x="330" y="722" width="44" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="352.28" y="735.78">
            QUERY
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e15`}>
        <rect x="236" y="603.5" width="71" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="271.78" y="617.28">
            HOME FEED
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e16`}>
        <rect x="115" y="485" width="58" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="144.28" y="498.78">
            PRODUCE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e17`}>
        <rect x="115" y="722" width="86" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#979899" textAnchor="middle">
          <tspan x="158.27" y="735.7">
            WATCH HISTORY
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e18`}>
        <rect x="928" y="248" width="91" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="973.78" y="261.78">
            HLS SEGMENTS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e19`}>
        <rect x="928" y="722" width="74" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.55" fill="#979899" textAnchor="middle">
          <tspan x="965.28" y="735.78">
            CACHE MISS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-clients`}>
        <rect x="688.5" y="96" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.19" />
        <g opacity="0">
          <rect x="688.5" y="96" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.19" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1176;0.1478;0.9098;0.94;1" dur="5.952s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s1`} x="698.1" y="105.6" width="28.8" height="28.8" />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="712.97" y="162.53">
            CLIENTS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="712.5" y="179.7">
            Creators and viewers
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-gateway`}>
        <rect x="305.5" y="333" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.19" />
        <g opacity="0">
          <rect x="305.5" y="333" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.19" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1176;0.1478;0.9098;0.94;1" dur="5.952s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s2`} x="315.1" y="342.6" width="28.8" height="28.8" />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="329.97" y="399.53">
            API GATEWAY
          </tspan>
        </text>
        <text fontSize="9.5" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="329.51" y="416.54">
            Auth, rate limits
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-events`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.19">
          <path d="M38 584 H181 A10 30 0 0 1 181 644 H38 A10 30 0 0 1 38 584 Z" />
          <path d="M181 584 A10 30 0 0 0 181 644" fill="none" />
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.19">
            <path d="M38 584 H181 A10 30 0 0 1 181 644 H38 A10 30 0 0 1 38 584 Z" />
            <path d="M181 584 A10 30 0 0 0 181 644" fill="none" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1176;0.1478;0.9098;0.94;1" dur="5.952s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s3`} x="57.32" y="605" width="18" height="18" />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="123.96" y="609.58">
            VIEW-EVENTS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="123.5" y="626.75">
            Kafka topic
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-recs`}>
        <rect x="105.5" y="807" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.19" />
        <g opacity="0">
          <rect x="105.5" y="807" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.19" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1176;0.1478;0.9098;0.94;1" dur="5.952s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s4`} x="115.1" y="816.6" width="28.8" height="28.8" />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="129.96" y="873.53">
            RECOMMENDATIONS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="129.51" y="890.7">
            Retrieve, then rank
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-upload`}>
        <rect x="492.5" y="570" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.19" />
        <g opacity="0">
          <rect x="492.5" y="570" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.19" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1176;0.1478;0.9098;0.94;1" dur="5.952s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="502.1" y="579.6" width="28.8" height="28.8" />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="516.97" y="636.53">
            UPLOAD SERVICE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="516.5" y="653.7">
            Signs upload URLs
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-metadata`}>
        <rect x="475.5" y="807" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.19" />
        <g opacity="0">
          <rect x="475.5" y="807" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.19" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1176;0.1478;0.9098;0.94;1" dur="5.952s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="485.1" y="816.6" width="28.8" height="28.8" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0" textAnchor="middle">
          <tspan x="499.94" y="873.36">
            METADATA SERVICE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="499.5" y="890.7">
            Info, manifest URLs
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-search`}>
        <rect x="319" y="1044" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.19" />
        <g opacity="0">
          <rect x="319" y="1044" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.19" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1176;0.1478;0.9098;0.94;1" dur="5.952s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="329.08" y="1054.08" width="27.84" height="27.84" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="343.47" y="1110.53">
            SEARCH
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="343.01" y="1127.7">
            Elasticsearch index
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-cache`}>
        <rect x="449" y="1044" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.19" />
        <g opacity="0">
          <rect x="449" y="1044" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.19" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1176;0.1478;0.9098;0.94;1" dur="5.952s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="458.12" y="1053.12" width="29.76" height="29.76" filter={`url(#${uid}-f2)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="473.46" y="1110.53">
            REDIS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="473" y="1127.7">
            Hot metadata
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-db`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.19">
          <path d="M550 1058 A105 8 0 0 1 760 1058 V1118 A105 8 0 0 1 550 1118 Z" />
          <path d="M550 1058 A105 8 0 0 0 760 1058" fill="none" />
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.19">
            <path d="M550 1058 A105 8 0 0 1 760 1058 V1118 A105 8 0 0 1 550 1118 Z" />
            <path d="M550 1058 A105 8 0 0 0 760 1058" fill="none" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1176;0.1478;0.9098;0.94;1" dur="5.952s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="567.42" y="1084.3" width="17.4" height="17.4" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="669.46" y="1088.58">
            METADATA DB
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="669" y="1105.09">
            MySQL sharded with Vitess
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-raw`}>
        <rect x="688.5" y="333" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.19" />
        <g opacity="0">
          <rect x="688.5" y="333" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.19" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1176;0.1478;0.9098;0.94;1" dur="5.952s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="698.1" y="342.6" width="28.8" height="28.8" />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="712.96" y="399.53">
            RAW UPLOADS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="712.49" y="416.7">
            Object storage
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-jobs`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.19">
          <path d="M618 584 H780 A10 30 0 0 1 780 644 H618 A10 30 0 0 1 618 584 Z" />
          <path d="M780 584 A10 30 0 0 0 780 644" fill="none" />
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.19">
            <path d="M618 584 H780 A10 30 0 0 1 780 644 H618 A10 30 0 0 1 618 584 Z" />
            <path d="M780 584 A10 30 0 0 0 780 644" fill="none" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1176;0.1478;0.9098;0.94;1" dur="5.952s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s10`} x="637.28" y="605" width="18" height="18" />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="713.46" y="609.58">
            TRANSCODE JOBS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="713" y="626.75">
            Work queue
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-transcoder`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.19">
          <rect x="678" y="817" width="195" height="60" rx="6" />
          <rect x="674" y="821" width="195" height="60" rx="6" />
          <rect x="670" y="825" width="195" height="60" rx="6" />
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.19">
            <rect x="678" y="817" width="195" height="60" rx="6" />
            <rect x="674" y="821" width="195" height="60" rx="6" />
            <rect x="670" y="825" width="195" height="60" rx="6" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1176;0.1478;0.9098;0.94;1" dur="5.952s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s11`} x="691.18" y="841.7" width="18.6" height="18.6" filter={`url(#${uid}-f2)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="785.96" y="846.58">
            TRANSCODING WORKERS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="785.5" y="863.75">
            Parallel chunk encodes
          </tspan>
        </text>
        <rect x="859.36" y="810" width="23.28" height="16" rx="8" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.19" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="871.26" y="821.02">
            XN
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-processed`}>
        <rect x="880" y="1044" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.19" />
        <g opacity="0">
          <rect x="880" y="1044" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.19" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1176;0.1478;0.9098;0.94;1" dur="5.952s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="889.6" y="1053.6" width="28.8" height="28.8" />
        <text fontSize="11.25" fontWeight="700" letterSpacing="0.9" fill="#9d9fa0" textAnchor="middle">
          <tspan x="904.45" y="1110.44">
            PROCESSED STORAGE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="904" y="1127.7">
            CDN origin
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-cdn`}>
        <rect x="899" y="333" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.19" />
        <g opacity="0">
          <rect x="899" y="333" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.19" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1176;0.1478;0.9098;0.94;1" dur="5.952s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s12`} x="908.6" y="342.6" width="28.8" height="28.8" />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="923.46" y="399.53">
            CDN EDGE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="923.01" y="416.7">
            Caches segments
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <circle r="2.38" fill="#60a5fa" opacity="0">
          <animateMotion path="M683 184 L683 196 Q683 204 675 204 L338 204 Q330 204 330 212 L330 332.41" dur="5.952s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4525;0.6205;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.4273;0.4525;0.6205;0.6457;1" dur="5.952s" repeatCount="indefinite" />
        </circle>
        <circle r="2.38" fill="#60a5fa" opacity="0">
          <animateMotion path="M517 658 L517 806.41" dur="5.952s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6141;0.6813;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.5889;0.6141;0.6813;0.7065;1" dur="5.952s" repeatCount="indefinite" />
        </circle>
        <path d="M713 184 L713 332.41" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.86" 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.21;0.2772;0.2912;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.952s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.21;0.2117;0.2912;0.2929;1" dur="5.952s" repeatCount="indefinite" />
        </path>
        <circle r="2.97" fill="#60a5fa" opacity="0">
          <animateMotion path="M713 184 L713 332.41" dur="5.952s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.21;0.2772;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.1848;0.21;0.3175;0.3427;1" dur="5.952s" repeatCount="indefinite" />
        </circle>
        <path d="M699 421 L699 583.41" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.86" pathLength="1" strokeDasharray="0.19 2" strokeDashoffset="0.19" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.19;0.19;-0.81;-1;-1" keyTimes="0;0.3175;0.3894;0.4031;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.952s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3175;0.3192;0.4031;0.4048;1" dur="5.952s" repeatCount="indefinite" />
        </path>
        <circle r="2.97" fill="#60a5fa" opacity="0">
          <animateMotion path="M699 421 L699 583.41" dur="5.952s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3175;0.3894;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.2923;0.3175;0.4298;0.455;1" dur="5.952s" repeatCount="indefinite" />
        </circle>
        <path d="M699 644 L699 755 Q699 763 707 763 L730 763 Q738 763 738 771 L738 816.41" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.86" pathLength="1" strokeDasharray="0.15 2" strokeDashoffset="0.15" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.15;0.15;-0.85;-1;-1" keyTimes="0;0.4298;0.5233;0.537;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.952s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4298;0.4314;0.537;0.5387;1" dur="5.952s" repeatCount="indefinite" />
        </path>
        <circle r="2.97" fill="#60a5fa" opacity="0">
          <animateMotion path="M699 644 L699 755 Q699 763 707 763 L730 763 Q738 763 738 771 L738 816.41" dur="5.952s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4298;0.5233;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.4046;0.4298;0.5636;0.5888;1" dur="5.952s" repeatCount="indefinite" />
        </circle>
        <path d="M670 851 L553.59 851" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.86" pathLength="1" strokeDasharray="0.27 2" strokeDashoffset="0.27" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.27;0.27;-0.73;-1;-1" keyTimes="0;0.5636;0.6308;0.6487;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.952s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5636;0.5653;0.6487;0.6504;1" dur="5.952s" repeatCount="indefinite" />
        </path>
        <circle r="2.97" fill="#60a5fa" opacity="0">
          <animateMotion path="M670 851 L553.59 851" dur="5.952s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5636;0.6308;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.5384;0.5636;0.6711;0.6963;1" dur="5.952s" repeatCount="indefinite" />
        </circle>
        <path d="M500 895 L500 917 Q500 925 492 925 L481 925 Q473 925 473 933 L473 1043.41" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.86" 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.6711;0.7488;0.7625;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.952s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6711;0.6728;0.7625;0.7642;1" dur="5.952s" repeatCount="indefinite" />
        </path>
        <circle r="2.97" fill="#60a5fa" opacity="0">
          <animateMotion path="M500 895 L500 917 Q500 925 492 925 L481 925 Q473 925 473 933 L473 1043.41" dur="5.952s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6711;0.7488;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.6459;0.6711;0.7488;0.774;1" dur="5.952s" repeatCount="indefinite" />
        </circle>
      </g>
      <g id={`${uid}-legend`}>
        <rect x="816" y="1144" width="203" height="71" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.19" />
        <path d="M826 1161.5 H854" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="862" y="1164.87">
            API REQUEST OR QUERY
          </tspan>
        </text>
        <path d="M826 1179.5 H854" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="2.14" strokeLinecap="round" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="862" y="1182.87">
            VIDEO BYTES
          </tspan>
        </text>
        <path d="M826 1197.5 H854" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.19" strokeLinecap="round" strokeDasharray="4.76 3.57" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#9d9fa0">
          <tspan x="862" y="1200.61">
            ASYNCHRONOUS EVENT OR JOB
          </tspan>
        </text>
      </g>
    </svg>
  );
}