Ellipse Status Badge

An inline SVG combines an accessible name, an oval badge, a dot, and a check path into a simple status mark.

Program

SVG drawings can be small, readable components. The drawing stays visual, while title and desc text explain the mark to assistive technology.

ellipse_status_badge.html

<svg class="demo-svg" viewBox="0 0 360 220" role="img" aria-labelledby="badge-title badge-desc">
  <title id="badge-title">Status badge</title>
  <desc id="badge-desc">An oval badge with a check mark.</desc>
  <ellipse cx="180" cy="110" rx="120" ry="54" fill="#0f766e" />
  <circle cx="126" cy="110" r="18" fill="#ccfbf1" />
  <path d="M162 112l18 18 40-48" fill="none" stroke="#ffffff" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" />
</svg>

ellipse An ellipse uses cx, cy, rx, and ry to place an oval around a center point.

path A path can draw a custom mark from compact coordinate commands.