JSFiddle - React, Tailwind, and code Playground

by chriswilsondc

HTML

<div id="flag"></div>

JavaScript

var paper = Raphael("flag", 500, 500);

Raphael.fn.star = function(x, y, r) {
    return paper.path("M" + x + "," + (y-r) +     
}

var HOIST = 250;

for (var c = 0; c < 13; c += 1) {
    paper.rect(10, 10 + c * HOIST / 13, HOIST * 1.9, HOIST / 13).attr("fill", c % 2 == 0 ? "#B22234" : "#FFFFFF");        
}

//blue square
paper.rect(10, 10, 0.76 * HOIST, 7 * HOIST / 13).attr("fill", "#3C3B6E");


/*
function current(r, k) {
	// 2r+1 rows
	// short row is k stars, long row is k+1 stars
	// e.g. 6-5-6-5-6-5-6-5-6
	
	var hs = bluebox.width / (2 * longrow); // see http://www.usflag.org/flagspecs.html
	var vspacing:Number = bluebox.height / (rows + 1);   // ibid
	
	//place stars
	for (var i:int = 0; i < rows; i++) {
		if (i % 2 == 0) { // if long row
			for (var j:int = 0; j < longrow; j++) {
				placeStar((j*2+1)*hspacing, (i+1)*vspacing);
			}
		} else {
			for (j = 0; j < longrow-1; j++) {
				placeStar((j*2+2)*hspacing, (i+1)*vspacing);
			}
		}
	}
}
*/