healthchecks/templates/badge.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{ width }}" height="20">
  <linearGradient id="smooth" x2="0" y2="100%">
    <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
    <stop offset="1" stop-opacity=".1"/>
  </linearGradient>

  <mask id="round">
    <rect width="{{ width }}" height="20" rx="3" fill="#fff"/>
  </mask>

  <g mask="url(#round)">
    <rect width="{{ tag_width }}" height="20" fill="#555"/>
    <rect x="{{ tag_width }}" width="{{ status_width }}" height="20" fill="{{ color }}"/>
    <rect width="{{ width }}" height="20" fill="url(#smooth)"/>
  </g>

  <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
    <text x="{{ tag_center_x }}" y="15" fill="#010101" fill-opacity=".3">{{ tag }}</text>
    <text x="{{ tag_center_x }}" y="14">{{ tag }}</text>
    <text x="{{ status_center_x }}" y="15" fill="#010101" fill-opacity=".3">{{ status }}</text>
    <text x="{{ status_center_x }}" y="14">{{ status }}</text>
  </g>
</svg>