<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 230" width="800" height="230" role="img" aria-labelledby="fgTitle fgDesc" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif">
  <title id="fgTitle">The Fear and Greed Index zone scale</title>
  <desc id="fgDesc">A 0 to 100 scale split into five zones: Extreme Fear 0 to 19, Fear 20 to 39, Neutral 40 to 59, Greed 60 to 79, and Extreme Greed 80 to 100.</desc>
  <rect x="0.5" y="0.5" width="799" height="229" rx="16" fill="#ffffff" stroke="#e2e8f0"/>
  <text x="40" y="48" font-size="23" font-weight="700" fill="#0f172a">Fear and Greed Index</text>
  <text x="40" y="74" font-size="14" fill="#64748b">A 0 to 100 scale of market sentiment</text>
  <g>
    <rect x="40"  y="104" width="144" height="48" fill="#DC2626"/>
    <rect x="184" y="104" width="144" height="48" fill="#F97316"/>
    <rect x="328" y="104" width="144" height="48" fill="#EAB308"/>
    <rect x="472" y="104" width="144" height="48" fill="#22C55E"/>
    <rect x="616" y="104" width="144" height="48" fill="#15803D"/>
  </g>
  <g font-size="13" font-weight="600" fill="#ffffff" text-anchor="middle">
    <text x="112" y="133">Extreme Fear</text>
    <text x="256" y="133">Fear</text>
    <text x="400" y="133">Neutral</text>
    <text x="544" y="133">Greed</text>
    <text x="688" y="133">Extreme Greed</text>
  </g>
  <g font-size="13" fill="#475569" text-anchor="middle">
    <text x="40"  y="178">0</text>
    <text x="184" y="178">20</text>
    <text x="328" y="178">40</text>
    <text x="472" y="178">60</text>
    <text x="616" y="178">80</text>
    <text x="760" y="178">100</text>
  </g>
  <text x="40" y="210" font-size="12" fill="#94a3b8">Source: CFGI</text>
</svg>
