<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
    
<svg xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">

<script xlink:href="demo_impl.js" type="text/ecmascript" />

<style type="text/css">
<![CDATA[
	[class~="circ_control"]:hover {stroke:black; stroke-width:2; fill-opacity:0.2;}
]]>
</style>


	<svg id="canvas_sb2" style="width:100%; height:90%;" viewBox="0 0 600 500">
		<rect id="sb-rect2" fill="none" stroke="none" stroke-width="1" x="20" y="20" title="click the green or yellow squares"
			width="500" height="400"/>
		<g id="group_sb2" />
		<g id="sb_arrows" />
		<rect id="anim_label_rect" width="8in" height="60" x="0" y="4.4in" style="fill:white;"/>
		<text id="anim_label" style="fill:blue; font-family:Comic Sans MS; " x="3in" y="4.7in">Before building</text>
		<g width="700" height="42">
			<rect class="circ_control" title="go" id="circ_go" width="30" height="30" y="4.5in" x="0" style="fill:lightgreen;"/>
			<rect class="circ_control" title = "single step" id="circ_step" width="30" height="30" y="4.5in" x="30" style="fill:yellow;"/>
			<rect class="circ_control" title = "stop" id="circ_stop" width="30" height="30" y="4.5in" x="60" style="fill:red;"/>
		</g>
	</svg>

</svg>