Example for generating SVG sparklines – Released under CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)

example-sparkline.md

sparklines.html.erb

<%
  # Released under CC0-1.0
  # https://creativecommons.org/publicdomain/zero/1.0/
%>

<%
  svg_width = 150
  svg_height = 28
  stroke_width = 2
  max_height = 0
  points = ""

  # weeks = array of values passed in
  # COLORS = array of colors for gradient overlay
%>

<span class="d-inline-block tooltipped tooltipped-s" aria-label="Past year of activity">
  <svg width="<%= svg_width %>" height="<%= svg_height + stroke_width %>">
    <% offset = svg_width / (weeks.length - 1) %>
    <% weeks.each_with_index do |week, ix| -%>
      <% points += "#{ix * offset},#{week.all.height + 1} " %>
      <% max_height = week.all.height if week.all.height > max_height %>
    <% end %>
    <defs>
      <linearGradient id="gradient" x1="0" x2="0" y1="1" y2="0">
        <% [10, 33, 66, 90].zip(COLORS).to_h.each do |offset, color| %>
          <stop offset="<%= offset %>%" stop-color="<%= color %>"></stop>
        <% end %>
      </linearGradient>
      <mask id="sparkline" x="0" y="0" width="<%= svg_width %>" height="<%= svg_height %>" >
        <polyline transform="translate(0, <%= svg_height %>) scale(1,-1)"
                  points="<%= points %>" fill="transparent" stroke="#8cc665" stroke-width="<%= stroke_width %>">
      </mask>
    </defs>

    <g transform="translate(0, <%= (max_height - svg_height)/2.ceil + stroke_width %>)">
      <rect x="0" y="<%= -stroke_width %>" width="<%= svg_width %>" height="<%= svg_height + stroke_width %>"
            style="stroke: none; fill: url(#gradient); mask: url(#sparkline)"></rect>
    </g>
  </svg>
</span>