Github Activity Sparkline Example

github sparkline.markdown

Sparkline with a gradient mask (as seen beside Github repos)

A Pen by Kannan Kumar on CodePen.

License.

sparkline.html

<svg width="155" height="30">
    <defs>
      <linearGradient id="gradient-47148" x1="0" x2="0" y1="1" y2="0">
          <stop offset="10%" stop-color="#d6e685"></stop>
          <stop offset="33%" stop-color="#8cc665"></stop>
          <stop offset="66%" stop-color="#44a340"></stop>
          <stop offset="90%" stop-color="#1e6823"></stop>
      </linearGradient>
      <mask id="sparkline-47148" x="0" y="0" width="155" height="28">
        <polyline transform="translate(0, 28) scale(1,-1)" points="0,1.0 3,1.0 6,1.0 9,1.0 12,1.0 15,1.0 18,1.0 21,10.69 24,6.92 27,3.15 30,17.69 33,2.62 36,3.69 39,5.31 42,4.23 45,6.38 48,5.31 51,1.0 54,1.0 57,4.23 60,5.31 63,2.62 66,3.69 69,1.0 72,1.0 75,2.08 78,8.54 81,29.0 84,1.0 87,3.15 90,3.15 93,2.62 96,1.0 99,1.54 102,6.92 105,4.23 108,4.23 111,9.62 114,8.54 117,3.69 120,3.69 123,1.0 126,4.23 129,4.23 132,1.0 135,8.54 138,4.23 141,1.54 144,2.08 147,3.69 150,1.0 153,1.0 " fill="transparent" stroke="white" stroke-width="2">
      </polyline></mask>
    </defs>

    <g transform="translate(0, 2.0)">
      <rect x="0" y="-2" width="155" height="30" style="stroke: none; fill: url(#gradient-47148); mask: url(#sparkline-47148)"></rect>
    </g>
  </svg>