An SVG template for Squirrelly which will render ReadMe badges

template

{{js(options.leftWidth = options.left.length * 10)/}}
{{js(options.rightWidth = options.right.length * 13 + 5)/}}
{{js(options.totalWidth = options.leftWidth + options.rightWidth - 5)/}}


<svg xmlns="http://www.w3.org/2000/svg" width="{{ totalWidth }}" 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="{{ totalWidth }}" height="20" rx="4" fill="#fff"/>
  </mask>

  <g mask="url(#round)">
    <rect width="{{ leftWidth }}" height="20" fill="#555"/>
    <rect x="{{ leftWidth }}" width="{{ rightWidth }}" height="20" fill="{{returnColor(options.color)/}}"/>
    <rect width="{{ totalWidth }}" height="20" fill="url(#smooth)"/>
  </g>

  <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">
    <text x="{{ leftWidth /2+1 }}" y="15" fill="#010101" fill-opacity=".3">{{ left }}</text>
    <text x="{{ leftWidth /2+1 }}" y="14">{{ left }}</text>
    <text x="{{ leftWidth + options.rightWidth /2.5-1 }}" y="15" fill="#010101" fill-opacity=".3">{{ right }}</text>
    <text x="{{ leftWidth + options.rightWidth /2.5-1 }}" y="14">{{ right }}</text>
  </g>
</svg>