HTML5 SVG

American Flag

American Flag

In my previous post, I explained how to draw an American flag using HTML5 <canvas>. In this post, I’ll explain another solution using SVG. For this example, I’m using <polygon> tag. You can let server produce the polygons’ markup, or you can use javascript to write them out.

You first use simple <div>s and CSS to layout the stripes and blue rectangle. The same 10 points’ coordinates are used for a single polygon. The rest to logic to shift coordinated horizontally and for each row remain the same as in the previous post.

Here is the syntax for one polygon:

<polygon  points="x0,y0 x1,y1 ..." fill="#FFFFFF"></polygon>

Here is the code for SVG part inside blue rectangle:

<div class="blue" id="blue">
<script type="text/javascript">
html = "<svg id=\"svgelem\" height=\"178\" width=\"219\" xmlns=\"http://www.w3.org/2000/svg\">";

var points = [[7,15], [12,15], [14,9], [16,15], [21,15], [17,19], [20,25], [14,21], [9,25], [11,19]],
	points_count = points.length,
	row = 9,
	stars_per_row,
	r,
	s,
	p,
	x,
	y;

	for (r = 0; r < row; r++) {
		stars_per_row = (r % 2) ? 5 : 6;	
		for (s = 0; s < stars_per_row; s++) {
			html += "<polygon  points='"
			for (p = 0; p < points_count; p++) {
				x = points[p][0] + 38 * s + (r % 2) * 16;
				y = points[p][1] + 18 * r;
				html += x + "," + y + " ";
			}
			html += "' fill='#FFFFFF'></polygon>";
		}
	}

html += "</svg>";
document.write(html);
</script>
</div> <!-- blue -->
<div class=”blue” id=”blue”>
<script type=”text/javascript”>
html = “<svg id=\”svgelem\” height=\”178\” width=\”219\” xmlns=\”http://www.w3.org/2000/svg\”>”;

var points = [[7,15], [12,15], [14,9], [16,15], [21,15], [17,19], [20,25], [14,21], [9,25], [11,19]],
points_count = points.length,
row = 9,
stars_per_row,
r,
s,
p,
x,
y;

for (r = 0; r < row; r++) {
stars_per_row = (r % 2) ? 5 : 6;
for (s = 0; s < stars_per_row; s++) {
html += “<polygon  points='”
for (p = 0; p < points_count; p++) {
x = points[p][0] + 38 * s + (r % 2) * 16;
y = points[p][1] + 18 * r;
html += x + “,” + y + ” “;
}
html += “‘ fill=’#FFFFFF’></polygon>”;
}
}

html += “</svg>”;
document.write(html);
</script>
</div> <!– blue –>

Advertisements
This entry was posted in HTML5. Bookmark the permalink.

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