N-Spangled Banner

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by Chris Wilson

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
		<div id="controls">
			<div class="input_field" id="num_rows">
				<div class="header">Rows</div>
				<button class="plus btn">+</button>
				<div class="number">9</div>
				<button class="minus btn">-</button>
			</div>
			<div class="input_field" id="num_cols">
				<div class="header">Per Row</div>
				<button class="plus btn">+</button>
				<div class="number">6</div>
				<button class="minus btn">-</button>
			</div>
			<div class="input_field" id="patterns">
    			<div class="header">Pattern</div>
    			<div class="btn-group patterns">
	    		  <button id="even" type="button" class="btn btn-default">
            <div>
            ****<br />****<br />****
            </div>
            </button>
		    	  <button id="alternating" type="button" class="btn btn-default active">
            <div>
            ***<br />****<br />***
            </div>
            </button>
			      <button id="triangle" type="button" class="btn btn-default">
            <div>
            &nbsp;&nbsp;*&nbsp;&nbsp;<br />&nbsp;**&nbsp;<br />***
            </div>
            </button>
			      <button id="shine on, you crazy diamond" type="button" class="btn btn-default">
            <div>
            &nbsp;&nbsp;*&nbsp;&nbsp;<br />&nbsp;**&nbsp;<br />&nbsp;&nbsp;*&nbsp;&nbsp;
            </div>
            </button>
			</div>
		</div>
            <div class="counter" id="count">50</div>
		<div id="count"></div>
		<div id="canvas"></div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

#canvas {
	width: 100%;
	max-width: 750px;
	margin: 10px 0;
}

#count {
	display: inline-block;
	font-size: 60px;
	text-align: center;
	line-height: 60px;
	color: #3C3B6E;
    margin: 20px 0 0 20px;
}

.input_field {
    display: inline-block;   
    min-width: 70px;
    text-align: center;
    vertical-align: top;
}

.header {
	font-weight: bold;
	color: #B22234;
}

.number {
	font-weight: bold;
	color: #3C3B6E;	
	text-align: center;
}

.plus,.minus {
	width: 30px;
    height: 30px;
    font-weight: bold;
    border-radius: 30px;
    padding: 4px;
}
.patterns button {
  background-color: white;
  border-radius: 5px;
  border: 1px solid #808080;
  outline: none;
  cursor: pointer;
}

.patterns button div {
	line-height: 0.6em;
	margin-top: 6px;
}

.patterns button.active {
  background-color: #C00;
  color: white;
}

JavaScript

var paper = Raphael("canvas", 600, 400);
var FLY = paper.width - 10,
 	HOIST = FLY / 1.9,
	STRIPE = HOIST / 13,
	RED = "#B22234",
	BLUE = "#3C3B6E",
	WHITE = "#FFFFFF";

//stripes
for (var i = 0; i < 13; i += 1) {
	paper.rect(0, STRIPE * i, FLY, STRIPE)
      .attr("fill", i % 2 == 0 ? RED : WHITE); 
}

//canton
paper.rect(0, 0, FLY * 0.4, STRIPE * 7)
	.attr("fill", BLUE); 


function star(x, y, r) {
    // start at the top point
    var path = "M" + x + "," + (y - r);
    
    // let's draw this the way we might by hand, by connecting each point the one two-fifths of the way around the clock
    for (var c = 0; c < 6; c += 1) {
        var angle = 270 + c * 144,
            rx = x + r * Math.cos(angle * Math.PI / 180),
            ry = y + r * Math.sin(angle * Math.PI / 180);

        path += "L" + rx  + "," + ry;
    }    
   
    return paper.path(path);
}

// make a set to contain all the stars so we can easily remove them 
var stars = paper.set();

var spacing_x,
    spacing_y,
    num_stars = 0;

var drawRow = function(y, count, offset) {  
    for (var c = 0; c < count; c += 1) {
        // add the star to the set
        stars.push(star(
            spacing_x * (2 * c + 1 + offset),
            y,
            FLY * 0.012
        ).attr("fill", "#FFF").attr("stroke-width", 0));
        num_stars += 1;
    }
};

var drawFlag = function(rows, count, pattern) {
    stars.remove();
    stars = paper.set();
    num_stars = 0;

    if (pattern == "triangle") {
        count = rows;
    } else if (pattern == "shine on, you crazy diamond") {
        if (rows % 2 == 0) {
            rows -= 1;
        }
        count = Math.ceil(rows/2);            
    }
    
    spacing_y = STRIPE * 7 / (rows * 2 + 2);
    spacing_x = FLY * 0.4 / (count * 2);
    
    for (var r = 0; r < rows; r += 1) {
        var y = spacing_y * (2 * r + 2);
        if (pattern == "even") {
            drawRow(y, count, 0);        
        } else if (pattern == "alternating") {
            if...