O'Reilly 2.10: Guess the Shape

by Stéphane Cabaret

JavaScript

var paper = Raphael(0, 0, 500, 500);

var r1 = paper.rect(25, 25, 50, 50);
var r2 = paper.circle(125, 50, 25);
var r3 = paper.text(200, 50, "H").attr("font-size", "60px");

var g1 = paper.rect(100, 100, 50, 50);
var g2 = paper.circle(200, 125, 25);
var g3 = paper.text(50, 125, "H").attr("font-size", "60px");

var b1 = paper.rect(175, 175, 50, 50);
var b2 = paper.circle(50, 200, 25);
var b3 = paper.text(125, 200, "?").attr("font-size", "60px");

var red_group = paper.set();
red_group.push(r1, r2, r3);
red_group.attr("fill", "red");

var green_group = paper.set(g1, g2, g3);
green_group.attr("fill", "green");

var blue_group = paper.set(b1, b2, b3).attr("fill", "blue");

b3.attr("fill", "gray");