Heart

A simple RaphaelJS Heart script.

by Adlene Denni

HTML

<div id="notepad"></div>

CSS

body, html {
    margin: 0px;
    background-color: #333;
    color: #ddd;
}
#notepad {
    margin: 30px;
    background-color: #666;
    border-radius: 10px;
    width: 500px;
    height: 600px;
}

JavaScript

// Raphael Heart, by Alex Trujillo, May 20th, 2011.

// Documentation for Raphael here: http://raphaeljs.com/reference.html

// First, a handy function with a for-in loop that goes over members of the heart object and gives them all the same attributes
function attrAll(attrs, values) {
    for (var key in values) {
        if (values.hasOwnProperty(key)) {
            values[key].attr(attrs);
        }
    }
}

// Create the Raphael canvas.
var paper = Raphael(document.getElementById("notepad"), 500, 500);

// An object to store heart members.
// Two circles and a path to start out our heart.
var heart = {
    upperLeft: paper.circle(150, 150, 100),
    upperRight: paper.circle(350, 150, 100),
    bottom: paper.path("M70 210 L 250 400 L 430 210")
};

// Uses the custom attrAll function.
attrAll({
    fill: "#f99",
    stroke: "#f00",
    "stroke-width": 10.0,
    "stroke-linecap": "round"
}, heart);

// To make our heart look better, we cover up some parts.
var centerRect = paper.rect(200, 150, 100, 100);
centerRect.attr({fill: "#f99", stroke: "none"});
var centerCirc = paper.circle(250, 150, 5);
centerCirc.attr({fill: "#f00", stroke: "none"});

// Finally, what do we love?
var t = paper.text(250, 200, "JavaScript");
t.attr({fill: "#fff", "font-size": 56});