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 🙂
<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”, “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”, “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”, “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”, “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”, “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”, “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”, “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”, “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”, “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>
learning dynamic data viz 