JSFiddle - React, Tailwind, and code Playground

by Chris Wilson

JavaScript

var paper = Raphael(0, 0, 800, 600);

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

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);
}

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

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

var NUMBER_OF_STARS_IN_ROW = 6;

var spacing_x;

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));
    }
};

    var drawFlag = function(rows, count, pattern) {
        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 (r % 2 == 0) {
                    drawRow(y, count, 0);        
                } else {
                    drawRow(y, count-1, 1);                             ...