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

export default function ObservabilityStackWithOpenTelemetry(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="1222" height="585" viewBox="0 0 1222 585" 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`}>
        Observability stack with OpenTelemetry
      </title>
      <desc id={`${uid}-sdw-desc`}>
        Observability stack with OpenTelemetry. 11 components in 2 groups. Connections: Checkout to OTel Collector (OTLP); Payments to OTel Collector (OTLP); Search to OTel Collector (OTLP); OTel Collector to Prometheus (metrics); OTel Collector to Loki (logs); OTel Collector to Tempo (traces); Prometheus to Grafana (query); Loki to Grafana (query); Tempo to Grafana (query); Prometheus to Alertmanager (alerts); Alertmanager to Slack; Alertmanager to PagerDuty.
      </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="27.77" height="27.77" patternUnits="userSpaceOnUse">
          <path d="M0 0.69H27.77M0.69 0V27.77" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1.39" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="640.13" cy="217" r="443.02">
          <stop offset="0" stopColor="#60a5fa" stopOpacity="0.12" />
          <stop offset="1" stopColor="#60a5fa" stopOpacity="0" />
        </radialGradient>
        <symbol id={`${uid}-s1`} viewBox="0 0 256 346" overflow="visible">
          <path fill="#5382a1" d="M82.554 267.473s-13.198 7.675 9.393 10.272c27.369 3.122 41.356 2.675 71.517-3.034c0 0 7.93 4.972 19.003 9.279c-67.611 28.977-153.019-1.679-99.913-16.517m-8.262-37.814s-14.803 10.958 7.805 13.296c29.236 3.016 52.324 3.263 92.276-4.43c0 0 5.526 5.602 14.215 8.666c-81.747 23.904-172.798 1.885-114.296-17.532" />
          <path fill="#e76f00" d="M143.942 165.515c16.66 19.18-4.377 36.44-4.377 36.44s42.301-21.837 22.874-49.183c-18.144-25.5-32.059-38.172 43.268-81.858c0 0-118.238 29.53-61.765 94.6" />
          <path fill="#5382a1" d="M233.364 295.442s9.767 8.047-10.757 14.273c-39.026 11.823-162.432 15.393-196.714.471c-12.323-5.36 10.787-12.8 18.056-14.362c7.581-1.644 11.914-1.337 11.914-1.337c-13.705-9.655-88.583 18.957-38.034 27.15c137.853 22.356 251.292-10.066 215.535-26.195M88.9 190.48s-62.771 14.91-22.228 20.323c17.118 2.292 51.243 1.774 83.03-.89c25.978-2.19 52.063-6.85 52.063-6.85s-9.16 3.923-15.787 8.448c-63.744 16.765-186.886 8.966-151.435-8.183c29.981-14.492 54.358-12.848 54.358-12.848m112.605 62.942c64.8-33.672 34.839-66.03 13.927-61.67c-5.126 1.066-7.411 1.99-7.411 1.99s1.903-2.98 5.537-4.27c41.37-14.545 73.187 42.897-13.355 65.647c0 .001 1.003-.895 1.302-1.697" />
          <path fill="#e76f00" d="M162.439.371s35.887 35.9-34.037 91.101c-56.071 44.282-12.786 69.53-.023 98.377c-32.73-29.53-56.75-55.526-40.635-79.72C111.395 74.612 176.918 57.393 162.439.37" />
          <path fill="#5382a1" d="M95.268 344.665c62.199 3.982 157.712-2.209 159.974-31.64c0 0-4.348 11.158-51.404 20.018c-53.088 9.99-118.564 8.824-157.399 2.421c.001 0 7.95 6.58 48.83 9.201" />
        </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}-s2`} viewBox="0 0 512 192" overflow="visible">
          <path fill="#00acd7" d="m292.533 13.295l1.124.75c13.212 8.725 22.685 20.691 28.917 35.15c1.496 2.243.499 3.49-2.493 4.237l-5.063 1.296c-11.447 2.949-20.53 5.429-31.827 8.378l-6.443 1.678c-2.32.574-2.96.333-5.428-2.477l-.348-.399c-3.519-3.988-6.155-6.652-10.817-9.03l-.899-.443c-15.705-7.727-30.911-5.484-45.12 3.74c-16.952 10.968-25.677 27.172-25.428 47.364c.25 19.942 13.96 36.395 33.654 39.137c16.951 2.244 31.16-3.739 42.378-16.452c2.244-2.743 4.238-5.734 6.73-9.224h-48.11c-5.235 0-6.481-3.24-4.736-7.478l.864-2.035c3.204-7.454 8.173-18.168 11.4-24.294l.704-1.319c.862-1.494 2.612-3.513 5.977-3.513h80.224c3.603-11.415 9.449-22.201 17.246-32.407c18.198-23.931 40.135-36.396 69.8-41.63c25.427-4.488 49.359-1.995 71.046 12.713c19.694 13.461 31.909 31.66 35.15 55.59c4.237 33.654-5.485 61.075-28.668 84.508c-16.453 16.702-36.645 27.172-59.829 31.908c-6.73 1.247-13.461 1.496-19.942 2.244c-22.685-.499-43.376-6.98-60.826-21.937c-12.273-10.61-20.727-23.648-24.928-38.828a105 105 0 0 1-10.47 16.89c-17.949 23.683-41.381 38.39-71.046 42.38c-24.43 3.24-47.115-1.497-67.058-16.454c-18.447-13.96-28.917-32.407-31.66-55.34c-3.24-27.173 4.737-51.603 21.19-73.041c17.7-23.184 41.132-37.891 69.8-43.126c22.999-4.16 45.037-1.595 64.936 11.464M411.12 49.017l-.798.178c-23.183 5.235-38.14 19.942-43.624 43.375c-4.488 19.444 4.985 39.138 22.934 47.115c13.71 5.983 27.421 5.235 40.633-1.496c19.694-10.22 30.413-26.175 31.66-47.613c-.25-3.24-.25-5.734-.749-8.227c-4.436-24.401-26.664-38.324-50.056-33.332M116.416 94.564c.997 0 1.496.748 1.496 1.745l-.499 5.983c0 .997-.997 1.745-1.745 1.745l-54.344-.249c-.997 0-1.246-.748-.748-1.496l3.49-6.232c.499-.748 1.496-1.496 2.493-1.496zM121.9 71.63c.997 0 1.496.748 1.247 1.496l-1.995 5.983c-.249.997-1.246 1.495-2.243 1.495l-117.912.25c-.997 0-1.246-.499-.748-1.247l5.235-6.73c.499-.748 1.745-1.247 2.742-1.247zm12.963-22.934c.997 0 1.246.748.748 1.496l-4.238 6.481c-.499.748-1.745 1.496-2.493 1.496l-90.24-.25c-.998 0-1.247-.498-.749-1.246l5.235-6.73c.499-.748 1.745-1.247 2.742-1.247z" />
        </symbol>
        <symbol id={`${uid}-s3`} viewBox="0 0 256 255" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s3-_SVGg39WleeP`} x1="12.959%" x2="79.639%" y1="12.039%" y2="78.201%">
              <stop offset="0%" stopColor="#387eb8" />
              <stop offset="100%" stopColor="#366994" />
            </linearGradient>
            <linearGradient id={`${uid}-s3-_SVGlXoRkc4T`} x1="19.128%" x2="90.742%" y1="20.579%" y2="88.429%">
              <stop offset="0%" stopColor="#ffe052" />
              <stop offset="100%" stopColor="#ffc331" />
            </linearGradient>
          </defs>
          <path fill={`url(#${uid}-s3-_SVGg39WleeP)`} d="M126.916.072c-64.832 0-60.784 28.115-60.784 28.115l.072 29.128h61.868v8.745H41.631S.145 61.355.145 126.77c0 65.417 36.21 63.097 36.21 63.097h21.61v-30.356s-1.165-36.21 35.632-36.21h61.362s34.475.557 34.475-33.319V33.97S194.67.072 126.916.072M92.802 19.66a11.12 11.12 0 0 1 11.13 11.13a11.12 11.12 0 0 1-11.13 11.13a11.12 11.12 0 0 1-11.13-11.13a11.12 11.12 0 0 1 11.13-11.13" />
          <path fill={`url(#${uid}-s3-_SVGlXoRkc4T)`} d="M128.757 254.126c64.832 0 60.784-28.115 60.784-28.115l-.072-29.127H127.6v-8.745h86.441s41.486 4.705 41.486-60.712c0-65.416-36.21-63.096-36.21-63.096h-21.61v30.355s1.165 36.21-35.632 36.21h-61.362s-34.475-.557-34.475 33.32v56.013s-5.235 33.897 62.518 33.897m34.114-19.586a11.12 11.12 0 0 1-11.13-11.13a11.12 11.12 0 0 1 11.13-11.131a11.12 11.12 0 0 1 11.13 11.13a11.12 11.12 0 0 1-11.13 11.13" />
        </symbol>
        <symbol id={`${uid}-s4`} viewBox="0 0 256 256" overflow="visible">
          <path fill="#f5a800" d="M135.44 139.918c-10.906 10.905-10.906 28.587 0 39.492c10.907 10.906 28.59 10.906 39.497 0c10.906-10.905 10.906-28.587 0-39.492s-28.59-10.905-39.497 0m29.525 29.548c-5.4 5.4-14.152 5.4-19.553 0s-5.401-14.151 0-19.552s14.152-5.4 19.553 0c5.402 5.375 5.402 14.151 0 19.552M174.47 2.512l-17.112 17.11c-3.35 3.35-3.35 8.855 0 12.204l66.814 66.808c3.35 3.35 8.855 3.35 12.205 0l17.113-17.111c3.35-3.35 3.35-8.854 0-12.203L186.65 2.512c-3.35-3.35-8.83-3.35-12.18 0M54.577 221.162c3.038-3.038 3.038-7.997 0-11.035l-8.699-8.699c-3.038-3.037-7.998-3.037-11.036 0l-17.97 17.968l-.026.026l-4.933-4.933c-2.727-2.727-7.167-2.727-9.868 0c-2.727 2.726-2.727 7.166 0 9.866l29.603 29.6c2.727 2.727 7.167 2.727 9.868 0c2.7-2.726 2.726-7.166 0-9.866l-4.934-4.934l.026-.026z" />
          <path fill="#425cc7" d="M145.1 51.638L107.084 89.65c-3.376 3.375-3.376 8.932 0 12.307l23.474 23.472c16.594-11.943 39.86-10.463 54.792 4.466l19.008-19.006c3.376-3.375 3.376-8.932 0-12.307l-46.95-46.944c-3.375-3.402-8.932-3.402-12.308 0m-24.41 83.684l-13.866-13.865c-3.246-3.246-8.57-3.246-11.815 0l-48.897 48.918c-3.246 3.245-3.246 8.568 0 11.814l27.707 27.704c3.246 3.246 8.57 3.246 11.815 0l31.447-31.495c-6.648-13.736-5.453-30.327 3.61-43.076" />
        </symbol>
        <symbol id={`${uid}-s5`} viewBox="0 0 256 257" overflow="visible">
          <path fill="#da4e31" d="M128.001.667C57.311.667 0 57.971 0 128.664c0 70.69 57.311 127.998 128.001 127.998S256 199.354 256 128.664C256 57.97 198.689.667 128.001.667m0 239.56c-20.112 0-36.419-13.435-36.419-30.004h72.838c0 16.566-16.306 30.004-36.419 30.004m60.153-39.94H67.842V178.47h120.314v21.816zm-.432-33.045H68.185c-.398-.458-.804-.91-1.188-1.375c-12.315-14.954-15.216-22.76-18.032-30.716c-.048-.262 14.933 3.06 25.556 5.45c0 0 5.466 1.265 13.458 2.722c-7.673-8.994-12.23-20.428-12.23-32.116c0-25.658 19.68-48.079 12.58-66.201c6.91.562 14.3 14.583 14.8 36.505c7.346-10.152 10.42-28.69 10.42-40.056c0-11.769 7.755-25.44 15.512-25.907c-6.915 11.396 1.79 21.165 9.53 45.4c2.902 9.103 2.532 24.423 4.772 34.138c.744-20.178 4.213-49.62 17.014-59.784c-5.647 12.8.836 28.818 5.27 36.518c7.154 12.424 11.49 21.836 11.49 39.638c0 11.936-4.407 23.173-11.84 31.958c8.452-1.586 14.289-3.016 14.289-3.016l27.45-5.355c.002-.002-3.987 16.401-19.314 32.197" />
        </symbol>
        <symbol id={`${uid}-s6`} viewBox="0 0 24 24" overflow="visible">
          <g fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.74">
            <path d="M14 3v4a1 1 0 0 0 1 1h4" />
            <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2M9 9h1m-1 4h6m-6 4h6" />
          </g>
        </symbol>
        <symbol id={`${uid}-s7`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.74" d="M10 20a2 2 0 1 0 4 0a2 2 0 1 0-4 0m0 0H4m10 0h6m-8-5l-2-2H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-3z" />
        </symbol>
        <symbol id={`${uid}-s8`} viewBox="0 0 256 279" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s8-_SVGzNMMBeHh`} x1="49.995%" x2="49.995%" y1="122.45%" y2="31.139%">
              <stop offset="0%" stopColor="#fff100" />
              <stop offset="100%" stopColor="#f05a28" />
            </linearGradient>
          </defs>
          <path fill={`url(#${uid}-s8-_SVGzNMMBeHh)`} d="M255.59 122.775c-.46-4.675-1.226-10.04-2.759-16.017a98 98 0 0 0-7.204-19.16a106.7 106.7 0 0 0-13.412-20.54c-2.222-2.681-4.675-5.287-7.28-7.816c3.908-15.558-4.752-29.046-4.752-29.046c-14.945-.92-24.448 4.675-27.973 7.204c-.613-.23-1.15-.537-1.763-.767c-2.529-.996-5.135-1.992-7.894-2.835a130 130 0 0 0-8.277-2.3c-2.835-.69-5.67-1.226-8.583-1.686c-.537-.076-.996-.153-1.533-.23C157.646 8.738 138.946 0 138.946 0c-20.922 13.258-24.831 31.805-24.831 31.805s-.077.383-.23 1.073c-1.15.307-2.299.69-3.449.996c-1.609.46-3.218 1.073-4.751 1.686a123 123 0 0 0-4.752 1.916a117 117 0 0 0-9.35 4.599c-2.989 1.686-5.9 3.525-8.737 5.441l-.766-.307c-28.97-11.036-54.643 2.223-54.643 2.223c-2.376 30.809 11.572 50.198 14.331 53.724c-.69 1.916-1.303 3.832-1.916 5.748c-2.146 6.974-3.755 14.101-4.751 21.535c-.154 1.073-.307 2.146-.384 3.219C7.894 146.916 0 173.97 0 173.97c22.302 25.674 48.359 27.283 48.359 27.283l.077-.076c3.295 5.9 7.127 11.495 11.419 16.783a112 112 0 0 0 5.671 6.362c-8.124 23.298 1.15 42.61 1.15 42.61c24.83.92 41.155-10.882 44.603-13.564a85 85 0 0 0 7.511 2.222a109.7 109.7 0 0 0 23.298 3.449c1.916.076 3.909.153 5.825.076h2.759l1.226-.076v.076c11.726 16.708 32.265 19.084 32.265 19.084c14.638-15.405 15.48-30.733 15.48-34.028v-1.38c3.066-2.145 5.979-4.445 8.738-6.974c5.824-5.288 10.959-11.342 15.25-17.857l1.15-1.839c16.554.92 28.28-10.27 28.28-10.27c-2.759-17.243-12.569-25.673-14.638-27.283c0 0-.077-.076-.23-.153s-.153-.153-.153-.153c-.077-.077-.23-.154-.383-.23c.076-1.073.153-2.07.23-3.142c.153-1.84.153-3.756.153-5.595v-2.913l-.077-1.149l-.076-1.533c0-.536-.077-.996-.154-1.456c-.076-.46-.076-.996-.153-1.456l-.153-1.456l-.23-1.456c-.307-1.916-.613-3.756-1.073-5.672c-1.763-7.433-4.675-14.484-8.43-20.845a70.4 70.4 0 0 0-14.025-16.707c-5.365-4.752-11.42-8.584-17.704-11.42c-6.36-2.835-12.952-4.675-19.543-5.518c-3.295-.46-6.59-.613-9.886-.536h-2.453l-1.226.077c-.46 0-.92.076-1.303.076a52 52 0 0 0-4.981.69c-6.591 1.226-12.799 3.602-18.24 6.897s-10.193 7.358-14.025 11.956a54.7 54.7 0 0 0-8.89 15.021a52.9 52.9 0 0 0-3.525 16.094c-.077 1.303-.077 2.683-.077 3.986v.996l.077 1.073c.076.613.076 1.303.153 1.916c.23 2.682.766 5.288 1.456 7.74c1.456 4.982 3.755 9.503 6.59 13.335s6.285 6.975 9.887 9.504c3.602 2.452 7.51 4.215 11.343 5.364c3.832 1.15 7.664 1.61 11.266 1.61h1.993c.23 0 .46 0 .689-.077c.383 0 .766-.077 1.15-.077c.076 0 .23 0 .306-.076l.383-.077c.23 0 .46-.076.69-.076c.46-.077.843-.154 1.303-.23s.843-.154 1.226-.307c.843-.153 1.61-.46 2.376-.69c1.533-.536 3.066-1.15 4.368-1.839c1.38-.69 2.606-1.533 3.832-2.3c.307-.23.69-.459.997-.766c1.226-.996 1.456-2.835.46-4.061c-.844-1.073-2.376-1.38-3.603-.69l-.92.46a25 25 0 0 1-3.295 1.38c-1.15.382-2.375.689-3.602.919c-.613.076-1.226.153-1.916.23c-.306 0-.613.076-.996.076h-1.84c-.383 0-.766 0-1.149-.076h-.46c-.153 0-.383 0-.536-.077c-.383-.077-.69-.077-1.073-.153c-2.836-.383-5.671-1.226-8.354-2.453a29.3 29.3 0 0 1-7.74-5.058c-2.376-2.146-4.445-4.675-6.055-7.587s-2.759-6.131-3.295-9.503c-.23-1.686-.383-3.449-.307-5.135c0-.46.077-.92.077-1.38v-.613c0-.23.077-.46.077-.69c.076-.919.23-1.839.383-2.758c1.303-7.358 4.981-14.562 10.653-20.003c1.456-1.38 2.988-2.606 4.598-3.755a31.7 31.7 0 0 1 5.211-2.99a36 36 0 0 1 5.672-2.068c1.915-.537 3.908-.844 5.977-1.073c.997-.077 1.993-.154 3.066-.154h2.376l.843.077c2.222.153 4.368.46 6.514.996c4.292.92 8.507 2.53 12.415 4.675c7.818 4.369 14.485 11.113 18.547 19.237c2.07 4.061 3.525 8.43 4.215 12.951c.153 1.15.307 2.3.383 3.45l.077.842l.077.843v3.296c0 .536-.077 1.456-.077 1.992c-.077 1.227-.23 2.53-.383 3.756s-.383 2.452-.613 3.678a50 50 0 0 1-.843 3.602a64 64 0 0 1-2.3 7.128a62.4 62.4 0 0 1-7.204 13.105c-5.9 8.124-13.948 14.715-23.144 18.93c-4.599 2.069-9.427 3.602-14.408 4.368c-2.453.46-4.982.69-7.511.766h-3.832a36 36 0 0 1-4.062-.23c-5.365-.383-10.653-1.379-15.864-2.835c-5.135-1.456-10.116-3.525-14.868-5.978c-9.427-5.058-17.933-11.956-24.524-20.31a79 79 0 0 1-8.584-13.334a79 79 0 0 1-5.671-14.638c-1.38-5.058-2.223-10.193-2.606-15.405l-.077-.996v-6.821c.077-2.529.307-5.211.614-7.817c.306-2.606.766-5.288 1.302-7.894c.537-2.605 1.15-5.211 1.916-7.817a103 103 0 0 1 5.442-14.791c4.368-9.35 10.04-17.704 16.86-24.371c1.686-1.686 3.449-3.22 5.288-4.752a78 78 0 0 1 5.748-4.138c1.916-1.303 3.985-2.453 6.055-3.526a40 40 0 0 1 3.142-1.533l3.219-1.379c2.146-.92 4.368-1.686 6.667-2.376c.537-.153 1.15-.306 1.686-.536c.537-.154 1.15-.307 1.686-.46c1.15-.307 2.3-.613 3.45-.843c.536-.153 1.149-.23 1.762-.383c.613-.154 1.15-.23 1.763-.384c.613-.076 1.15-.23 1.762-.306l.843-.153l.92-.154c.613-.076 1.15-.153 1.763-.23c.69-.076 1.302-.153 1.992-.23c.537-.076 1.456-.153 1.993-.23c.383-.076.843-.076 1.226-.153l.843-.076l.383-.077h.46c.69-.077 1.303-.077 1.993-.153l.996-.077h.767c.536 0 1.149-.076 1.685-.076a99 99 0 0 1 6.745 0c4.445.153 8.813.69 13.028 1.456c8.507 1.61 16.478 4.291 23.758 7.893c7.28 3.526 13.719 7.894 19.39 12.646c.383.306.69.613 1.073.92c.306.306.69.613.996.92c.69.612 1.303 1.225 1.993 1.838c.69.614 1.303 1.227 1.916 1.84a44 44 0 0 1 1.839 1.916c2.376 2.529 4.598 5.058 6.59 7.664a99 99 0 0 1 9.734 15.25l.46.92l.46.92c.306.613.613 1.226.843 1.84c.306.613.536 1.149.843 1.762c.23.613.536 1.15.766 1.763c.92 2.299 1.84 4.521 2.53 6.59c1.149 3.373 1.992 6.362 2.682 8.967a2.043 2.043 0 0 0 2.299 1.61c1.15-.077 1.992-.996 1.992-2.146c.077-2.759 0-6.054-.383-9.81" />
        </symbol>
        <symbol id={`${uid}-s9`} viewBox="0 0 256 256" overflow="visible">
          <path fill="#e01e5a" d="M53.841 161.32c0 14.832-11.987 26.82-26.819 26.82S.203 176.152.203 161.32c0-14.831 11.987-26.818 26.82-26.818H53.84zm13.41 0c0-14.831 11.987-26.818 26.819-26.818s26.819 11.987 26.819 26.819v67.047c0 14.832-11.987 26.82-26.82 26.82c-14.83 0-26.818-11.988-26.818-26.82z" />
          <path fill="#36c5f0" d="M94.07 53.638c-14.832 0-26.82-11.987-26.82-26.819S79.239 0 94.07 0s26.819 11.987 26.819 26.819v26.82zm0 13.613c14.832 0 26.819 11.987 26.819 26.819s-11.987 26.819-26.82 26.819H26.82C11.987 120.889 0 108.902 0 94.069c0-14.83 11.987-26.818 26.819-26.818z" />
          <path fill="#2eb67d" d="M201.55 94.07c0-14.832 11.987-26.82 26.818-26.82s26.82 11.988 26.82 26.82s-11.988 26.819-26.82 26.819H201.55zm-13.41 0c0 14.832-11.988 26.819-26.82 26.819c-14.831 0-26.818-11.987-26.818-26.82V26.82C134.502 11.987 146.489 0 161.32 0s26.819 11.987 26.819 26.819z" />
          <path fill="#ecb22e" d="M161.32 201.55c14.832 0 26.82 11.987 26.82 26.818s-11.988 26.82-26.82 26.82c-14.831 0-26.818-11.988-26.818-26.82V201.55zm0-13.41c-14.831 0-26.818-11.988-26.818-26.82c0-14.831 11.987-26.818 26.819-26.818h67.25c14.832 0 26.82 11.987 26.82 26.819s-11.988 26.819-26.82 26.819z" />
        </symbol>
        <symbol id={`${uid}-s10`} viewBox="0 0 256 372" overflow="visible">
          <path fill="#06ac38" d="M54.554 272.557v98.919H0v-98.919zM109.047.001c46.745.051 67.005 2.703 95.795 18.254C236.471 35.237 256 68.988 256 111.018c0 39.058-15.92 72.81-46.488 92.975c-28.02 18.68-59.86 21.228-102.315 21.228H0V0Zm8.739 47.753l-1.673.007l-61.56.425v129.91h65.168c45.639 0 80.451-18.255 80.451-66.44c0-44.79-28.02-64.32-84.06-63.895Z" />
        </symbol>
      </defs>
      <rect width="1222" height="585" fill={`url(#${uid}-bg)`} />
      <rect width="1222" height="585" fill={`url(#${uid}-grid)`} />
      <rect width="1222" height="585" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          OBSERVABILITY STACK WITH OPENTELEMETRY
        </tspan>
      </text>
      <text fontSize="11.5" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65.25">
          Services export OTLP to a Collector that fans metrics, logs and traces out to Prometheus, Loki and Tempo; Grafana queries them and Alertmanager routes alerts
        </tspan>
      </text>
      <g id={`${uid}-g-services`}>
        <rect x="28" y="96" width="213" height="396" rx="2.78" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.39" />
        <g opacity="0">
          <rect x="28" y="96" width="213" height="396" rx="2.78" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.39" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0584;0.0884;0.91;0.94;1" dur="5.998s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-backends`}>
        <rect x="639" y="96" width="166" height="396" rx="2.78" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.39" />
        <g opacity="0">
          <rect x="639" y="96" width="166" height="396" rx="2.78" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.39" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0584;0.0884;0.91;0.94;1" dur="5.998s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M152.26 172 L343 172 Q351 172 351 180 L351 270 Q351 278 359 278 L410.31 278" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M402.67 283.55 L411 278 L402.67 272.45" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M152.26 172 L343 172 Q351 172 351 180 L351 270 Q351 278 359 278 L410.31 278" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.67" 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.2084;0.3453;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.998s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2084;0.2384;0.9;0.93;1" dur="5.998s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M402.67 283.55 L411 278 L402.67 272.45" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3453;0.3753;0.9;0.93;1" dur="5.998s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M158.5 290 L410.31 290" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M402.67 295.55 L411 290 L402.67 284.45" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M158.5 408 L343 408 Q351 408 351 400 L351 310 Q351 302 359 302 L410.31 302" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M402.67 307.55 L411 302 L402.67 296.45" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M459 278 L493 278 Q501 278 501 270 L501 180 Q501 172 509 172 L697.41 172" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M689.77 177.55 L698.1 172 L689.77 166.45" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M459 278 L493 278 Q501 278 501 270 L501 180 Q501 172 509 172 L697.41 172" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.67" 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.3853;0.5148;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.998s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3853;0.4153;0.9;0.93;1" dur="5.998s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M689.77 177.55 L698.1 172 L689.77 166.45" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5148;0.5448;0.9;0.93;1" dur="5.998s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M459 302 L493 302 Q501 302 501 310 L501 400 Q501 408 509 408 L697.31 408" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M689.67 413.55 L698 408 L689.67 402.45" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M459 290 L697.31 290" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M689.67 295.55 L698 290 L689.67 284.45" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M746.6 180 L816 180 Q824 180 824 188 L824 191 Q824 199 832 199 L908 199 Q916 199 916 207 L916 270 Q916 278 924 278 L983.48 278" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.39 3.47" />
        <path d="M754.24 174.45 L745.91 180 L754.24 185.55" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e8`}>
        <path d="M746.69 408 L908 408 Q916 408 916 400 L916 310 Q916 302 924 302 L983.48 302" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.39 3.47" />
        <path d="M754.33 402.45 L746 408 L754.33 413.55" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e9`}>
        <path d="M746.69 290 L983.48 290" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.39 3.47" />
        <path d="M754.33 284.45 L746 290 L754.33 295.55" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e10`}>
        <path d="M745.91 164 L980.91 164" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M973.27 169.55 L981.6 164 L973.27 158.45" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M745.91 164 L980.91 164" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.67" 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.5548;0.6432;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.998s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5548;0.5848;0.9;0.93;1" dur="5.998s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M973.27 169.55 L981.6 164 L973.27 158.45" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6432;0.6732;0.9;0.93;1" dur="5.998s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e11`}>
        <path d="M1029.41 156 L1127.31 156" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M1119.67 161.55 L1128 156 L1119.67 150.45" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M1029.41 156 L1127.31 156" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.67" 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.6832;0.7499;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.998s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6832;0.7133;0.9;0.93;1" dur="5.998s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M1119.67 161.55 L1128 156 L1119.67 150.45" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7499;0.78;0.9;0.93;1" dur="5.998s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e12`}>
        <path d="M1029.41 172 L1069 172 Q1077 172 1077 180 L1077 266 Q1077 274 1085 274 L1134.79 274" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M1127.15 279.55 L1135.48 274 L1127.15 268.45" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.39" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-el-e1`}>
        <rect x="293" y="146" width="43" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.39" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="314.79" y="159.87">
            OTLP
          </tspan>
        </text>
        <g opacity="0">
          <rect x="293" y="146" width="43" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.39" />
          <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#60a5fa" textAnchor="middle">
            <tspan x="314.79" y="159.87">
              OTLP
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2084;0.2384;0.9;0.93;1" dur="5.998s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e2`}>
        <rect x="293" y="264" width="43" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.39" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="314.79" y="277.87">
            OTLP
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e3`}>
        <rect x="293" y="382" width="43" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.39" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="314.79" y="395.87">
            OTLP
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e4`}>
        <rect x="534" y="146" width="53" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.39" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="560.79" y="159.87">
            METRICS
          </tspan>
        </text>
        <g opacity="0">
          <rect x="534" y="146" width="53" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.39" />
          <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#60a5fa" textAnchor="middle">
            <tspan x="560.79" y="159.87">
              METRICS
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3853;0.4153;0.9;0.93;1" dur="5.998s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e5`}>
        <rect x="543" y="382" width="35" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.39" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="560.79" y="395.87">
            LOGS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e6`}>
        <rect x="537.5" y="264" width="46" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.39" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="560.79" y="277.87">
            TRACES
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e7`}>
        <rect x="857" y="173" width="44" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.39" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="879.29" y="186.87">
            QUERY
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e8`}>
        <rect x="857" y="382" width="44" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.39" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="879.29" y="395.87">
            QUERY
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e9`}>
        <rect x="857" y="264" width="44" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.39" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#979899" textAnchor="middle">
          <tspan x="879.29" y="277.87">
            QUERY
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e10`}>
        <rect x="857.5" y="138" width="43" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.39" />
        <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#979899" textAnchor="middle">
          <tspan x="879.26" y="151.61">
            ALERTS
          </tspan>
        </text>
        <g opacity="0">
          <rect x="857.5" y="138" width="43" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.39" />
          <text fontSize="8.75" fontWeight="700" letterSpacing="0.53" fill="#60a5fa" textAnchor="middle">
            <tspan x="879.26" y="151.61">
              ALERTS
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5548;0.5848;0.9;0.93;1" dur="5.998s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-gh-services`}>
        <text fontSize="10.25" fontWeight="700" letterSpacing="1.03" fill="#649adb">
          <tspan x="40" y="118.09">
            OPENTELEMETRY SDK SERVICES
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-backends`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="651" y="118.36">
            TELEMETRY BACKENDS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-checkout`}>
        <rect x="116.75" y="148" width="35.51" height="48" rx="6.04" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.39" />
        <g opacity="0">
          <rect x="116.75" y="148" width="35.51" height="48" rx="6.04" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.39" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1167;0.1467;0.91;0.94;1" dur="5.998s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s1`} x="124.21" y="161.7" width="20.6" height="20.6" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="134.96" y="214.53">
            CHECKOUT
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="134.5" y="231.04">
            Java
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-payments`}>
        <rect x="110.5" y="266" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.39" />
        <g opacity="0">
          <rect x="110.5" y="266" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.39" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1167;0.1467;0.91;0.94;1" dur="5.998s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s2`} x="120.58" y="276.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="134.96" y="332.53">
            PAYMENTS
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="134.5" y="349.04">
            Go
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-search`}>
        <rect x="110.5" y="384" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.39" />
        <g opacity="0">
          <rect x="110.5" y="384" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.39" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1167;0.1467;0.91;0.94;1" dur="5.998s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s3`} x="120.58" y="394.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="134.97" y="450.53">
            SEARCH
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="134.5" y="467.04">
            Python
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-collector`}>
        <rect x="411" y="266" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.39" />
        <g opacity="0">
          <rect x="411" y="266" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.39" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1167;0.1467;0.91;0.94;1" dur="5.998s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s4`} x="421.08" y="276.08" width="27.84" height="27.84" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.75" fontWeight="700" letterSpacing="0.86" fill="#9d9fa0" textAnchor="middle">
          <tspan x="435.43" y="332.27">
            OTEL COLLECTOR
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="435" y="349.04">
            OTLP receiver and
          </tspan>
          <tspan x="435" y="364.04">
            batching
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-prometheus`}>
        <rect x="698.1" y="148" width="47.81" height="48" rx="8.13" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.39" />
        <g opacity="0">
          <rect x="698.1" y="148" width="47.81" height="48" rx="8.13" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.39" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1167;0.1467;0.91;0.94;1" dur="5.998s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="708.14" y="158.14" width="27.73" height="27.73" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="722.47" y="214.53">
            PROMETHEUS
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="722.01" y="231.04">
            Metrics, OTLP receiver
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-loki`}>
        <rect x="698" y="384" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.39" />
        <g opacity="0">
          <rect x="698" y="384" width="48" height="48" rx="8.16" fill="#f46800" fillOpacity="0.15" stroke="#f46800" strokeOpacity="0.65" strokeWidth="1.39" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1167;0.1467;0.91;0.94;1" dur="5.998s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="707.6" y="393.6" width="28.8" height="28.8" />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="722.47" y="450.53">
            LOKI
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="722" y="467.04">
            Logs
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-tempo`}>
        <rect x="698" y="266" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.39" />
        <g opacity="0">
          <rect x="698" y="266" width="48" height="48" rx="8.16" fill="#f46800" fillOpacity="0.15" stroke="#f46800" strokeOpacity="0.65" strokeWidth="1.39" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1167;0.1467;0.91;0.94;1" dur="5.998s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="707.6" y="275.6" width="28.8" height="28.8" />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="722.46" y="332.53">
            TEMPO
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="722" y="349.04">
            Traces
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-grafana`}>
        <rect x="983.48" y="266" width="44.04" height="48" rx="7.49" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.39" />
        <g opacity="0">
          <rect x="983.48" y="266" width="44.04" height="48" rx="7.49" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.39" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1167;0.1467;0.91;0.94;1" dur="5.998s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="992.73" y="277.23" width="25.54" height="25.54" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="1005.96" y="332.53">
            GRAFANA
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="1005.51" y="349.04">
            Dashboards and
          </tspan>
          <tspan x="1005.51" y="364.04">
            explore
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-alertmanager`}>
        <rect x="981.6" y="140" width="47.81" height="48" rx="8.13" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.39" />
        <g opacity="0">
          <rect x="981.6" y="140" width="47.81" height="48" rx="8.13" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.39" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1167;0.1467;0.91;0.94;1" dur="5.998s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="991.64" y="150.14" width="27.73" height="27.73" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="1005.96" y="206.53">
            ALERTMANAGER
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="1005.5" y="223.04">
            Routing and silences
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-slack`}>
        <rect x="1128" y="132" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.39" />
        <g opacity="0">
          <rect x="1128" y="132" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.39" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1167;0.1467;0.91;0.94;1" dur="5.998s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="1138.08" y="142.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="1152.46" y="198.53">
            SLACK
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="1152" y="215.04">
            #alerts channel
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-pagerduty`}>
        <rect x="1135.48" y="250" width="33.03" height="48" rx="5.62" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.39" />
        <g opacity="0">
          <rect x="1135.48" y="250" width="33.03" height="48" rx="5.62" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.39" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1167;0.1467;0.91;0.94;1" dur="5.998s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s10`} x="1142.42" y="264.42" width="19.16" height="19.16" filter={`url(#${uid}-f1)`} />
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="1152.46" y="316.53">
            PAGERDUTY
          </tspan>
        </text>
        <text fontSize="8" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="1151.99" y="333.04">
            On-call paging
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <path d="M152.26 172 L343 172 Q351 172 351 180 L351 270 Q351 278 359 278 L410.31 278" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.33" 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.2084;0.3453;0.3588;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.998s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2084;0.2101;0.3588;0.3605;1" dur="5.998s" repeatCount="indefinite" />
        </path>
        <circle r="3.47" fill="#60a5fa" opacity="0">
          <animateMotion path="M152.26 172 L343 172 Q351 172 351 180 L351 270 Q351 278 359 278 L410.31 278" dur="5.998s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.2084;0.3453;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.1834;0.2084;0.3853;0.4103;1" dur="5.998s" repeatCount="indefinite" />
        </circle>
        <circle r="2.78" fill="#60a5fa" opacity="0">
          <animateMotion path="M158.5 290 L410.31 290" dur="5.998s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4521;0.5468;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.4271;0.4521;0.5468;0.5719;1" dur="5.998s" repeatCount="indefinite" />
        </circle>
        <circle r="2.78" fill="#60a5fa" opacity="0">
          <animateMotion path="M158.5 408 L343 408 Q351 408 351 400 L351 310 Q351 302 359 302 L410.31 302" dur="5.998s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6146;0.7491;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.5895;0.6146;0.7491;0.7741;1" dur="5.998s" repeatCount="indefinite" />
        </circle>
        <path d="M459 278 L493 278 Q501 278 501 270 L501 180 Q501 172 509 172 L697.41 172" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.33" 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.3853;0.5148;0.5284;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.998s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3853;0.387;0.5284;0.53;1" dur="5.998s" repeatCount="indefinite" />
        </path>
        <circle r="3.47" fill="#60a5fa" opacity="0">
          <animateMotion path="M459 278 L493 278 Q501 278 501 270 L501 180 Q501 172 509 172 L697.41 172" dur="5.998s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3853;0.5148;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.3603;0.3853;0.5548;0.5798;1" dur="5.998s" repeatCount="indefinite" />
        </circle>
        <path d="M745.91 164 L980.91 164" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.33" 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.5548;0.6432;0.6568;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.998s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5548;0.5565;0.6568;0.6585;1" dur="5.998s" repeatCount="indefinite" />
        </path>
        <circle r="3.47" fill="#60a5fa" opacity="0">
          <animateMotion path="M745.91 164 L980.91 164" dur="5.998s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5548;0.6432;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.5298;0.5548;0.6832;0.7083;1" dur="5.998s" repeatCount="indefinite" />
        </circle>
        <path d="M1029.41 156 L1127.31 156" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.33" pathLength="1" strokeDasharray="0.37 2" strokeDashoffset="0.37" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.37;0.37;-0.63;-1;-1" keyTimes="0;0.6832;0.7499;0.7745;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.998s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6832;0.6849;0.7745;0.7762;1" dur="5.998s" repeatCount="indefinite" />
        </path>
        <circle r="3.47" fill="#60a5fa" opacity="0">
          <animateMotion path="M1029.41 156 L1127.31 156" dur="5.998s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6832;0.7499;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.6582;0.6832;0.7499;0.7749;1" dur="5.998s" repeatCount="indefinite" />
        </circle>
      </g>
      <g id={`${uid}-legend`}>
        <rect x="1011" y="504" width="183" height="53" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.39" />
        <path d="M1021 521.5 H1049" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.39" strokeLinecap="round" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="1057" y="524.87">
            TELEMETRY AND ALERTS
          </tspan>
        </text>
        <path d="M1021 539.5 H1049" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.39" strokeLinecap="round" strokeDasharray="1.39 3.47" />
        <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#9d9fa0">
          <tspan x="1057" y="542.7">
            DASHBOARD DATA SOURCE
          </tspan>
        </text>
      </g>
    </svg>
  );
}
