Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
SVG image for your github contributions calendar
require "nokogiri"
require "open-uri"
url = "{params['username']}"
document = Nokogiri::HTML(open(url))
contrib_boxes = document.css('svg.js-calendar-graph-svg')[0]
width = (params['width']||54*13-2).to_i
height = (params['height']||89).to_i
contrib_boxes.at_css('>g')['transform']='translate(0, 0)'
day_boxes = contrib_boxes.css('g>g')
day_boxes.each_with_index{|box, m|
box['transform']="translate(#{m*((width-53*2)/54+2)}, 0)"
col['y'] = col['y'].to_i-(11-(height-12)/7)*col['y'].to_i/13
:body => contrib_boxes.to_html,
:content_type => 'image/svg+xml;charset=utf-8'

This comment has been minimized.

Copy link
Owner Author

@jcouyang jcouyang commented Dec 20, 2015

SVG screenshot of you Github Contributions Wall


you can ommit width and height parameter and get the default size just like it is in github.


visit will get you the svg file

Now you can paste it in any where you want

<img src="" />
  1. blog
  2. email signature
  3. forum signature

lookat my awesome email signature for example


This comment has been minimized.

Copy link

@delight09 delight09 commented Nov 17, 2017

Hi @jcouyang ,

Good job on the script, it's working smoothly.

You can try this reliable github API to retrive SVG data which would make the script slightly more readable.

FYI, here's my implement with it.

Edit: Provide git blame against the API.


This comment has been minimized.

Copy link

@youyiqin youyiqin commented May 3, 2020

It's well.I will take it for my blog home page.Thanks!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment