When i was young i discovered that it’s possible to draw using Qbasic language .. So i passed all my time exploring circles, lines sprites and etc. Now the web is populated by great tools for simple and complex graphics, Rapahel is one of them.
Raphael is a javascript library for vectorial graphics, but it can also be used to make nice animations and it is using SVG.
In this tutorial i will try to explain how to draw a funny monster face (which looks like Domo) view Demo , or Download source files.
So first of all you’ll need to download raphael js library and create a simple html file :
Setting up
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Domo like</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="raphael.js"></script> <script> window.onload = function(){ var paper = Raphael("canvas", 640, 480); } </script> </head> <body> <div id="canvas"></div> </body> </html>
The important thing is “paper” value which is the raphale object :
var paper = Raphael("canvas", 640, 480);
1 . drawing the head and the mouth :
var head = paper.rect(180, 50, 320, 340, 15); head.attr({ 'stroke-width' : 6, 'fill' : '15-#AA0000-#511' }); mouth = paper.rect(200, 150, 240, 200, 5); mouth.attr({ 'stroke-width' : 10, 'fill' : '#000' })
This code will give us :
2. Adding eyes and tongue
var eyes = paper.set(); eyes.push( paper.rect(200, 100, 15, 10, 5), paper.rect(410, 100, 35, 20, 5) ); eyes.attr({ 'stroke-width' : 10, 'fill' : '#000' }); tongue = paper.ellipse(350, 310, 60, 20); tongue.attr({ 'stroke-width' : 3, 'fill' : '#FF0000' });
Result :
3. Adding teeth
Okey our little monster needs some teeth we’ll use loops to draw em.
teeth = paper.set(); for(i=200; i<= 420; i+=20){ teeth.push(paper.rect(i, 150, 20, 70 , 5)); teeth.push(paper.rect(i, 310, 20, 40, 5)); } teeth.attr({ 'fill' : '#FFFFFF' })
Final Result :
Et voilà ! Hope you like the result ! ^^
![]() |
![]() |