Live sandbox

This is the Ample SDK sandbox. You may paste/edit XUL/SVG/XHTML fragments here and run instantly. The XML must be well-formed!

<svg:svg viewBox="0,0 600,250" width="600px" height="250px" xmlns:smil="http://www.w3.org/2008/SMIL30/" xmlns:svg="http://www.w3.org/2000/svg"> <svg:g id="grid" transform="rotate(0)"> <smil:animate begin="click" from="rotate(0)" to="rotate(360)" dur="2s" attributeName="transform"/> <svg:g transform="scale(.25)"> <svg:rect x="0" y="0" width="2000" height="1000" fill="#f0f0f0"/> <svg:g stroke-width="10" stroke="gray" fill="none"> <!-- horizontal --> <svg:polyline points="0,100 2000,100"/> <svg:polyline points="0,200 2000,200"/> <svg:polyline points="0,300 2000,300"/> <svg:polyline points="0,400 2000,400"/> <svg:polyline points="0,500 2000,500"/> <svg:polyline points="0,600 2000,600"/> <svg:polyline points="0,700 2000,700"/> <svg:polyline points="0,800 2000,800"/> <svg:polyline points="0,900 2000,900"/> <!-- vertical --> <svg:polyline points="0,0 0,1000"/> <svg:polyline points="100,0 100,1000"/> <svg:polyline points="200,0 200,1000"/> <svg:polyline points="300,0 300,1000"/> <svg:polyline points="400,0 400,1000"/> <svg:polyline points="500,0 500,1000"/> <svg:polyline points="600,0 600,1000"/> <svg:polyline points="700,0 700,1000"/> <svg:polyline points="800,0 800,1000"/> <svg:polyline points="900,0 900,1000"/> <svg:polyline points="1000,0 1000,1000"/> <svg:polyline points="1100,0 1100,1000"/> <svg:polyline points="1200,0 1200,1000"/> <svg:polyline points="1300,0 1300,1000"/> <svg:polyline points="1400,0 1400,1000"/> <svg:polyline points="1500,0 1500,1000"/> <svg:polyline points="1600,0 1600,1000"/> <svg:polyline points="1700,0 1700,1000"/> <svg:polyline points="1800,0 1800,1000"/> <svg:polyline points="1900,0 1900,1000"/> </svg:g> </svg:g> </svg:g> <svg:g id="graph" transform="scale(1)"> <smil:animate begin="click" from="scale(1)" to="scale(2)" dur="2s" attributeName="transform"/> <svg:polygon points="50,200 50,150 100,100 200,100 250,50 300,100 300,200" fill="#f0990d" opacity="0.5" /> <svg:polyline points="50,150 100,100 200,100 250,50 300,100" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" stroke-dasharray="10,20" opacity="0.5" stroke="red" fill="none"/> <svg:circle id="point" cx="100" cy="100" r="5" fill="red" stroke-width="1" stroke="white" /> </svg:g> </svg:svg>

Run!