Javascript in SVG example (prime circles)

prime-sieve.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
	<script type="text/javascript"><![CDATA[
		var width=8096;
		var height=900;

		var svg = document.getElementsByTagName('svg')[0];
		svg.setAttribute("width", width);
		svg.setAttribute("height", height);
		
		var rect = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
		rect.setAttribute("height", height);
		rect.setAttribute("width", width);
		rect.style.fill = "black";
		svg.appendChild(rect);

		for (var b = 2; b < width; b += 1)
		{
			for (var a = 1; a < width; a += b*2)
			{
				var cir = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
				cir.setAttribute("shape-rendering", "geometricPrecision");
				cir.setAttribute("stroke-opacity", "0.07");
				cir.setAttribute("r",  b);
				cir.setAttribute("cx", a+b);
				cir.setAttribute("cy", height/2);
				cir.style.stroke = "red";
				cir.style.strokeWidth = "1";
				cir.style.fill = "none";
				svg.appendChild(cir);
			}
		}
	]]></script>	
</svg>

Inspired by www.sievesofchaos.com, this SVG generates images such as these on the fly: