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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#08040d"/>
      <stop offset="55%" stop-color="#150017"/>
      <stop offset="100%" stop-color="#050207"/>
    </linearGradient>
    <linearGradient id="panel" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#220033"/>
      <stop offset="55%" stop-color="#7b0f2b"/>
      <stop offset="100%" stop-color="#1a0012"/>
    </linearGradient>
    <radialGradient id="coreGlow" cx="50%" cy="50%" r="42%">
      <stop offset="0%" stop-color="#ffca96" stop-opacity="0.92"/>
      <stop offset="35%" stop-color="#ff5d73" stop-opacity="0.35"/>
      <stop offset="100%" stop-color="#ff5d73" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="ringStroke" cx="50%" cy="50%" r="55%">
      <stop offset="0%" stop-color="#f4b27a"/>
      <stop offset="45%" stop-color="#ff335c"/>
      <stop offset="100%" stop-color="#6d0c31"/>
    </radialGradient>
    <clipPath id="panelClip">
      <rect x="76" y="76" width="360" height="360" rx="28" transform="rotate(-8 256 256)"/>
    </clipPath>
  </defs>
  <rect width="512" height="512" fill="url(#bg)"/>
  <rect x="76" y="76" width="360" height="360" rx="28" fill="url(#panel)" transform="rotate(-8 256 256)"/>
  <g clip-path="url(#panelClip)">
    <rect x="76" y="76" width="360" height="360" fill="#09040d"/>
    <g transform="rotate(-8 256 256)">
      <circle cx="256" cy="256" r="174" fill="none" stroke="url(#ringStroke)" stroke-width="14" opacity="0.18"/>
      <circle cx="256" cy="256" r="144" fill="none" stroke="url(#ringStroke)" stroke-width="12" opacity="0.34"/>
      <circle cx="256" cy="256" r="112" fill="none" stroke="url(#ringStroke)" stroke-width="10" opacity="0.52"/>
      <circle cx="256" cy="256" r="82" fill="none" stroke="url(#ringStroke)" stroke-width="8" opacity="0.72"/>
      <circle cx="256" cy="256" r="52" fill="none" stroke="#ffd2a4" stroke-width="6" opacity="0.88"/>
      <circle cx="256" cy="256" r="24" fill="none" stroke="#ffe7cb" stroke-width="5" opacity="0.95"/>
      <g stroke="#ff4873" stroke-width="2" opacity="0.32">
        <line x1="256" y1="72" x2="256" y2="440"/>
        <line x1="72" y1="256" x2="440" y2="256"/>
        <line x1="126" y1="126" x2="386" y2="386"/>
        <line x1="126" y1="386" x2="386" y2="126"/>
        <line x1="194" y1="84" x2="318" y2="428"/>
        <line x1="84" y1="194" x2="428" y2="318"/>
        <line x1="122" y1="98" x2="390" y2="414"/>
        <line x1="98" y1="390" x2="414" y2="122"/>
      </g>
    </g>
    <circle cx="256" cy="256" r="156" fill="url(#coreGlow)"/>
    <ellipse cx="300" cy="192" rx="138" ry="58" fill="#f7ba83" opacity="0.18"/>
    <ellipse cx="196" cy="324" rx="152" ry="70" fill="#ff5271" opacity="0.14"/>
  </g>
</svg>