JSFiddle - React, Tailwind, and code Playground

by Michał Oręziak

HTML

<svg>
  <rect width="50" height="50" data-translate='0' />
</svg>

CSS

rect:first-child{
  fill:rgb(0,0,255);
  stroke-width:3;
  stroke:rgb(0,0,0);
  position:absolute;
  top:0;
  left:0;
}
svg{
  position:relative;
  width:100vw;
  height:100vh;
}

JavaScript

const $ = el => document.querySelector(el)
const $all = el => document.querySelectorAll(el);

const getRandomColor = () => {
  let letters = '0123456789ABCDEF'
  let color = '#'
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)]
  }
  return color
}

const cloneElement = e => {
	let rect = e.target.cloneNode()
  let translate = Number(e.target.getAttribute('data-translate')) + 20
  rect.setAttribute('data-translate', translate)
  rect.style.fill = getRandomColor()
  console.log(`translate(${translate}, ${translate})`)
  rect.style.transform = `translate(${translate}px, ${translate}px)`
  
  rect.addEventListener('click', cloneElement)
  $('svg').appendChild(rect)
};

[].forEach.call($all('svg rect'), el => {
el.addEventListener('mousemove', cloneElement)
})