Optical Ray Diagram (SVG)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 240" width="640">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
      <path d="M0,0 L10,5 L0,10 z" fill="#0f172a"/>
    </marker>
  </defs>
  <line x1="0" y1="120" x2="560" y2="120" stroke="#94a3b8" stroke-dasharray="4,4"/>
  <ellipse cx="280" cy="120" rx="14" ry="80" fill="#bfdbfe" stroke="#1d4ed8"/>
  <text x="280" y="220" font-family="Inter" font-size="12" fill="#1d4ed8" text-anchor="middle">Converging lens</text>
  <line x1="60" y1="120" x2="60" y2="60" stroke="#0f172a" stroke-width="2" marker-end="url(#arrow)"/>
  <text x="60" y="50" font-family="Inter" font-size="12" fill="#0f172a" text-anchor="middle">Object</text>
  <line x1="60"  y1="60"  x2="280" y2="60"  stroke="#1f47f5" stroke-width="1.5"/>
  <line x1="280" y1="60"  x2="500" y2="180" stroke="#1f47f5" stroke-width="1.5"/>
  <line x1="60"  y1="60"  x2="280" y2="120" stroke="#16a34a" stroke-width="1.5"/>
  <line x1="280" y1="120" x2="500" y2="180" stroke="#16a34a" stroke-width="1.5"/>
  <line x1="500" y1="120" x2="500" y2="180" stroke="#dc2626" stroke-width="2" marker-end="url(#arrow)"/>
  <text x="500" y="200" font-family="Inter" font-size="12" fill="#dc2626" text-anchor="middle">Image</text>
  <circle cx="380" cy="120" r="3" fill="#0f172a"/>
  <text x="380" y="110" font-family="Inter" font-size="10" fill="#0f172a" text-anchor="middle">F</text>
  <circle cx="180" cy="120" r="3" fill="#0f172a"/>
  <text x="180" y="110" font-family="Inter" font-size="10" fill="#0f172a" text-anchor="middle">F'</text>
</svg>