05. Raphael.js

01. Create Telerik logo using Raphael.js

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        svg {
            border: 1px solid #5ce600;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="../libs/raphael-min.js"></script>
    <script type="text/javascript" src="scripts/script.js"></script>
</body>
</html>

scripts/script.js

window.onload = function() {
    var x = 30,
        y = 10,
        width = 320,
        height = 110;

    var paper = Raphael(x, y, width, height);

    drawText(paper, x + 150, y + 40);
    drawRegisteredTrademarkSymbol(paper, x + 225, y + 35, 6);
    drawLogo(paper);
};

function drawText(paper, x, y) {
    paper.text(x, y, 'Telerik')
        .attr({
            'font-size': 40,
            'font-weight': 'bold'
        });

    paper.text(x + 28, y + 30, 'Develop experiences')
        .attr({
            'font-size': 18
        });
}

function drawRegisteredTrademarkSymbol(paper, x, y, r) {
    paper.circle(x + 0.5, y - 0.2, r);

    paper.text(x, y, 'R')
        .attr({
            'font-weight': 'bold'
        });
}

function drawLogo(paper) {
    paper.path('M 28 37 L 40 25 L 70 50 L 55 65 L 38 50 L 65 25 L 78 37')
        .attr({
            stroke: '#5ce600',
            fill: 'none',
            'stroke-width': 7
        });
}

Result:
Telerik Logo Result

02. Create YouTube logo using Raphael.js
index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        svg {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="../libs/raphael-min.js"></script>
    <script type="text/javascript" src="scripts/script.js"></script>
</body>
</html>

scripts/script.js

window.onload = function() {
    var x = 10,
        y = 10,
        width = 320,
        height = 110,
        fontSize = 40,
        borderRadius = 15;

    var paper = Raphael(x, y, width - 100, height);

    drawRect(paper, x + 85, y + 15, width - 220, 50, borderRadius);
    drawText(paper, x + 40, y + 40, fontSize);
};

function drawRect(paper, x, y, width, height, borderRadius) {
    paper.rect(x, y, width, height, borderRadius)
        .attr({
            fill: '#ec2828',
            stroke: 'none'
        });
}

function drawText(paper, x, y, fontSize) {
    paper.text(x + 5, y, 'You')
        .attr({
            'font-size': fontSize,
            'font-weight': 'bold',
            fill: '#4b4b4b'
        });

    paper.text(x + 95, y, 'Tube')
        .attr({
            'font-size': fontSize,
            'font-weight': 'bold',
            fill: '#ffffff'
        });
}

Result:
YouTube Logo Result

03.Create a spiral with Raphael
– *Hint: use many circles with radius 1px

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        svg {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="../libs/raphael-min.js"></script>
    <script type="text/javascript" src="scripts/script.js"></script>
</body>
</html>

scripts/script.js

window.onload = function() {
    var x = 10,
        y = 10,
        width = 220,
        height = 290;

    var paper = Raphael(x, y, width, height);
    drawArchimedeanSpiral(paper, x + 90, y + 150);
};

function drawArchimedeanSpiral(paper, x, y) {
    var space = 3;
    var scale = 10;
    var cx = x;
    var cy = y;
    var STEPS_PER_ROTATION = space * 100;
    var increment = 2 * Math.PI / STEPS_PER_ROTATION;
    var angle = increment,
        newCX = 0,
        newCY = 0,
        radius = 1;

    while (angle < scale * Math.PI) {
        newCX = cx + (space * angle * Math.cos(angle));
        newCY = cy + (space * angle * Math.sin(angle));
        drawCircle(paper, newCX, newCY, radius);
        angle += increment;
    }
}

function drawCircle(paper, cx, cy, radius) {
    paper.circle(cx, cy, radius)
        .attr({
            stroke: 'black',
            fill: 'black'
        });
}

Result:
Archimedean Spiral Result

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s