Creates a github like punch card graphic in SVG

gistfile1.htm

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

<!-- Set the light gray background -->
<rect width="740px" height="330px" style="fill:#efefef"/>

<!-- Set the x axis labels and gridlines -->
<text x="10px" y="30px" font-family="Verdana, sans-serif" font-size="11px" fill="#333">mon</text>
<text x="10px" y="70px" font-family="Verdana, sans-serif" font-size="11px" fill="#333">tue</text>
<text x="10px" y="110px" font-family="Verdana, sans-serif" font-size="11px" fill="#333">wed</text>
<text x="10px" y="150px" font-family="Verdana, sans-serif" font-size="11px" fill="#333">thu</text>
<text x="10px" y="190px" font-family="Verdana, sans-serif" font-size="11px" fill="#333">fri</text>
<text x="10px" y="230px" font-family="Verdana, sans-serif" font-size="11px" fill="#333">sat</text>
<text x="10px" y="270px" font-family="Verdana, sans-serif" font-size="11px" fill="#333">sun</text>

<!-- Set the y axis labels -->
<text x="50px" y="320px" font-family="Verdana, sans-serif" font-size="11px">0</text>
<text x="80px" y="320px" font-family="Verdana, sans-serif" font-size="11px">1</text>
<text x="110px" y="320px" font-family="Verdana, sans-serif" font-size="11px">2</text>
<text x="130px" y="320px" font-family="Verdana, sans-serif" font-size="11px">3</text>
<text x="160px" y="320px" font-family="Verdana, sans-serif" font-size="11px">4</text>
<text x="190px" y="320px" font-family="Verdana, sans-serif" font-size="11px">5</text>
<text x="220px" y="320px" font-family="Verdana, sans-serif" font-size="11px">6</text>
<text x="250px" y="320px" font-family="Verdana, sans-serif" font-size="11px">7</text>
<text x="280px" y="320px" font-family="Verdana, sans-serif" font-size="11px">9</text>
<text x="310px" y="320px" font-family="Verdana, sans-serif" font-size="11px">10</text>
<text x="340px" y="320px" font-family="Verdana, sans-serif" font-size="11px">11</text>
<text x="370px" y="320px" font-family="Verdana, sans-serif" font-size="11px">12</text>
<text x="400px" y="320px" font-family="Verdana, sans-serif" font-size="11px">13</text>
<text x="430px" y="320px" font-family="Verdana, sans-serif" font-size="11px">14</text>
<text x="460px" y="320px" font-family="Verdana, sans-serif" font-size="11px">15</text>
<text x="490px" y="320px" font-family="Verdana, sans-serif" font-size="11px">16</text>
<text x="520px" y="320px" font-family="Verdana, sans-serif" font-size="11px">17</text>
<text x="550px" y="320px" font-family="Verdana, sans-serif" font-size="11px">18</text>
<text x="580px" y="320px" font-family="Verdana, sans-serif" font-size="11px">19</text>
<text x="610px" y="320px" font-family="Verdana, sans-serif" font-size="11px">20</text>
<text x="640px" y="320px" font-family="Verdana, sans-serif" font-size="11px">21</text>
<text x="670px" y="320px" font-family="Verdana, sans-serif" font-size="11px">22</text>
<text x="700px" y="320px" font-family="Verdana, sans-serif" font-size="11px">23</text>

<!-- Set the gridlines -->
<line x1="40px" y1="30px" x2="730px" y2="30px" style="stroke:#e9e9e9; stroke-width:2;"/>
<line x1="40px" y1="70px" x2="730px" y2="70px" style="stroke:#e9e9e9; stroke-width:2;"/>
<line x1="40px" y1="110px" x2="730px" y2="110px" style="stroke:#e9e9e9; stroke-width:2;"/>
<line x1="40px" y1="150px" x2="730px" y2="150px" style="stroke:#e9e9e9; stroke-width:2;"/>
<line x1="40px" y1="180px" x2="730px" y2="190px" style="stroke:#e9e9e9; stroke-width:2;"/>
<line x1="40px" y1="230px" x2="730px" y2="230px" style="stroke:#e9e9e9; stroke-width:2;"/>
<line x1="40px" y1="270px" x2="730px" y2="270px" style="stroke:#e9e9e9; stroke-width:2;"/>

<!-- Set the x and y axis lines -->
<line x1="40px" y1="10px" x2="40px" y2="300px" style="stroke:#ccc;stroke-width:2"/>
<line x1="40px" y1="300px" x2="730px" y2="300px" style="stroke:#ccc;stroke-width:2"/>

<!-- Set the circles -->
<circle cx="490px" cy="30px" r="10px" fill="#333"/>
<circle cx="520px" cy="30px" r="5px" fill="#333"/>
<circle cx="340px" cy="70px" r="10px" fill="#333"/>
<circle cx="90px" cy="110px" r="17px" fill="#333"/>

</svg>