Okay, my next task is to get the rectangle to appear in a random position. This will require some minor tweaks, like replacing absolute numbers in the <svg> tag with screen width and height, but it's working:
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"<svg width = " + 1600 + " height = " + 800 + "> <rect x =" + (Math.random() * 100) + " y = " + (Math.random() * 100) + " height = " + 12 + " width = " + 12+ " rx = " + 2 + " style='fill:rgb(0,0,0); stroke-width:2; stroke:rgb(255,0,255)'/> </svg>";
</script>
The problem is, the rectangle is appearing only within the small space that the browser is reserving for the paragraph. I want it to appear anywhere on the page. I tried using a <span> tag or a <div> tag immediately after the <body> tag and a </span> tag or a </div> tag immediately before the </body> tag, but that replaced the entire page with a small rectangle. Not what I had in mind. How would I get the rectangle to appear randomly on the page, in front of (or behind) the content?
Thank you in advance!