learning: #2 – create smiley using javascript to create the SVG objects

Same smiley, but now using javascript with an svg container & “setAttribute” to create the objects.  Next goal -> animate the stars so that they “twinkle” in some way 🙂

Screenshot from 2013-07-19 16:08:39

<html>
<head>
<title>SVG Circles</title>

<style>
#svgContainer {
width:200px;
height:200px;
background-color:#EEEEEE;
}
</style>

<script>
window.onload = function() {

var circlecenter = 100;
var circler = 70

<!– set eye variables –>
var eyer = 12;
var eyey = 80;
var eyecolor = “black”;
var eyeoffset = 20

<!– set star variables–>
var starfill = “white”
var starstroke = “transparent”

var container = document.getElementById(“svgContainer”);
var mySvg = document.createElementNS(“http://www.w3.org/2000/svg&#8221;, “svg”);
mySvg.setAttribute(“version”, “1.2”);
mySvg.setAttribute(“baseProfile”, “tiny”);
<!– why does Firefox require me to set attribute rather than get from style? –>
mySvg.setAttribute(“width”,”200px”);
mySvg.setAttribute(“height”,”200px”);
container.appendChild(mySvg);

var backgroundrect = document.createElementNS(“http://www.w3.org/2000/svg&#8221;, “rect”);
backgroundrect.setAttribute(“width”, “100%”);
backgroundrect.setAttribute(“height”, “100%”);
backgroundrect.setAttribute(“fill”, “lightsteelblue”);
mySvg.appendChild(backgroundrect);

var smilyhead = document.createElementNS(“http://www.w3.org/2000/svg&#8221;, “circle”);
smilyhead.setAttribute(“cx”, circlecenter);
smilyhead.setAttribute(“cy”, circlecenter);
smilyhead.setAttribute(“r”, circler + 3);
smilyhead.setAttribute(“fill”, “gold”);
mySvg.appendChild(smilyhead);

var smilyhead2 = document.createElementNS(“http://www.w3.org/2000/svg&#8221;, “circle”);
smilyhead2.setAttribute(“cx”, circlecenter);
smilyhead2.setAttribute(“cy”, circlecenter);
smilyhead2.setAttribute(“r”, circler);
smilyhead2.setAttribute(“fill”, “yellow”);
mySvg.appendChild(smilyhead2);

var eye1 = document.createElementNS(“http://www.w3.org/2000/svg&#8221;, “circle”);
eye1.setAttribute(“cx”, circlecenter + eyeoffset);
eye1.setAttribute(“cy”, eyey);
eye1.setAttribute(“r”, eyer);
eye1.setAttribute(“fill”, eyecolor);
mySvg.appendChild(eye1);

var eye2 = document.createElementNS(“http://www.w3.org/2000/svg&#8221;, “circle”);
eye2.setAttribute(“cx”, circlecenter – eyeoffset);
eye2.setAttribute(“cy”, eyey);
eye2.setAttribute(“r”, eyer);
eye2.setAttribute(“fill”, eyecolor);
mySvg.appendChild(eye2);

var smile = document.createElementNS(“http://www.w3.org/2000/svg&#8221;, “path”);
smile.setAttribute(“d”, “M 75 105 C 80 140, 95 150, 115 120”);
smile.setAttribute(“stroke”, “black”);
smile.setAttribute(“stroke-width”, “4”);
smile.setAttribute(“fill”, “transparent”);
mySvg.appendChild(smile);

var star1 = document.createElementNS(“http://www.w3.org/2000/svg&#8221;, “polygon”);
star1.setAttribute(“points”, “117 70 118 74 121 74 119 76 120 79 117 77 114 79 115 76 113 74 116 74”);
star1.setAttribute(“stroke”, starstroke);
star1.setAttribute(“fill”, starfill);
mySvg.appendChild(star1);

var star2 = document.createElementNS(“http://www.w3.org/2000/svg&#8221;, “polygon”);
star2.setAttribute(“points”, ” 77 70 78 74 81 74 79 76 80 79 77 77 74 79 75 76 73 74 76 74″);
star2.setAttribute(“stroke”, starstroke);
star2.setAttribute(“fill”, starfill);
mySvg.appendChild(star2);
}
</script>
</head>
<body>
<div id=”svgContainer”></div>
</body>
</html>

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s