JSFiddle - React, Tailwind, and code Playground

by Alexander Shutov

HTML

<svg>
    <g transform="translate(10 10) scale(1.2 1.2)">
        <rect x="10" y="40" width="800" height="600" fill="gray" />
        <rect id="rect" x="10" y="10" width="10" height="10" />
    </g>
</svg>

CSS

svg {
    width:800px;
    height:600px;
}

JavaScript

var el = document.getElementById('rect');
var toggle = false;
el.onclick = function () {
    toggle = !toggle;
    el.setAttribute('fill', toggle ? 'red' : 'black');
};
var T = 2000;
var t = 0;
var dt = 20;
dx = 4;
var interval = setInterval(function () {
    el.setAttribute('width', parseInt(el.getAttribute('width')) + dx);
    el.setAttribute('height', parseInt(el.getAttribute('height')) + dx);
    t += dt;
    if (t >= T) {
        dx = -dx;
        t = 0;
    }
}, dt);