City-Lifeline-Cockpit/dynamic-component-service-master/public/preview/video2DProjectionComponent.svg

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="Video 2D projection preview">
  <defs>
    <radialGradient id="bg" cx="50%" cy="55%" r="75%">
      <stop offset="0" stop-color="#0a1726"/>
      <stop offset="0.6" stop-color="#050b15"/>
      <stop offset="1" stop-color="#01030a"/>
    </radialGradient>
    <linearGradient id="screen" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#2c7bbf"/>
      <stop offset="0.55" stop-color="#0d3d66"/>
      <stop offset="1" stop-color="#06203c"/>
    </linearGradient>
    <linearGradient id="beam" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#00ffff" stop-opacity="0.05"/>
      <stop offset="0.5" stop-color="#00ffff" stop-opacity="0.25"/>
      <stop offset="1" stop-color="#00ffff" stop-opacity="0.55"/>
    </linearGradient>
    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="4"/>
    </filter>
  </defs>
  <rect width="640" height="360" fill="url(#bg)"/>
  <g filter="url(#glow)" opacity="0.7">
    <path d="M140 110 L500 80 L520 300 L120 280 Z" fill="url(#beam)"/>
  </g>
  <g stroke="#00ffff" stroke-width="1.8" fill="none" stroke-linejoin="round" opacity="0.9">
    <path d="M140 110 L500 80"/>
    <path d="M500 80 L520 300"/>
    <path d="M520 300 L120 280"/>
    <path d="M120 280 L140 110"/>
  </g>
  <g stroke="#00ffff" stroke-width="1.2" opacity="0.65">
    <line x1="90" y1="190" x2="140" y2="110"/>
    <line x1="90" y1="190" x2="500" y2="80"/>
    <line x1="90" y1="190" x2="520" y2="300"/>
    <line x1="90" y1="190" x2="120" y2="280"/>
  </g>
  <circle cx="90" cy="190" r="6" fill="#e6ffff" stroke="#00ffff" stroke-width="1.5"/>
  <g transform="translate(160,120)">
    <rect width="340" height="170" fill="url(#screen)" opacity="0.85" rx="4" ry="4"/>
    <g stroke="#9fd5ff" stroke-width="1" opacity="0.35">
      <line x1="0" y1="40" x2="340" y2="40"/>
      <line x1="0" y1="85" x2="340" y2="85"/>
      <line x1="0" y1="130" x2="340" y2="130"/>
      <line x1="85" y1="0" x2="85" y2="170"/>
      <line x1="170" y1="0" x2="170" y2="170"/>
      <line x1="255" y1="0" x2="255" y2="170"/>
    </g>
    <polygon points="155,62 155,108 195,85" fill="#e6ffff" opacity="0.9"/>
  </g>
  <text x="320" y="340" text-anchor="middle" fill="#9fd5ff" font-family="Segoe UI,Roboto,sans-serif" font-size="14" opacity="0.8">
    Video 2D Projection
  </text>
</svg>