JSFiddle - React, Tailwind, and code Playground

by ocorpening

HTML

<svg id="svgContainer" xmlns="http://www.w3.org/2000/svg" version="1.1">
</svg>
<p>
<div id="xcoor"><div/>
<p>
<div id="ycoor"><div/>

CSS

#svgContainer 
{
    width:600px;
    height:200px;
    background-color:#EEEEEE;
    border:1px solid #c3c3c3;
}

JavaScript

var container = document.getElementById("svgContainer");
var x = 0;
var y = 0;
var image = null;
var timer = self.setInterval(function() 
{
    create_image(x += 2, y += 2);
}, 100);

function create_image(x, y) 
{
    if (y>200)
    {
        timer=window.clearInterval(timer)
        return;
    }
    console.log("x,y = " + x + "," + y);
    if (image != null) 
    {
        var parent = image.parentNode;
        console.log(parent);
        parent.removeChild(image);
    }
    image = document.createElementNS("http://www.w3.org/2000/svg", "image");
    image.setAttribute('height', '10');
    image.setAttribute('width', '10');
    image.setAttribute('id', 'testimg');
    image.setAttribute('x', x);
    image.setAttribute('y', y);
    image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "http://i50.tinypic.com/24c8twj.jpg");
    container.appendChild(image);
    document.getElementById("xcoor").innerHTML = x;
    document.getElementById("ycoor").innerHTML = y;
}