JSFiddle - React, Tailwind, and code Playground

by mnk

HTML

<svg id="stage" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" ></svg>

CSS

html,
body {
  margin: 0;
}

svg {
  background-color: tomato;
}

circle {
   -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none; 
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

JavaScript

var stage = document.getElementById('stage');
stage.setAttribute('width', window.innerWidth);
stage.setAttribute('height', window.innerHeight);

function createCircle(x) {
  var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  shape.setAttribute("fill", "white");
  shape.setAttribute("stroke", "transparent");
  shape.setAttribute("stroke-width", 30);
  shape.setAttribute("r", 10);
  shape.setAttribute("cx", x * 50);
  shape.setAttribute("cy", 50);
  
  shape.addEventListener('mouseover', overHandler, false);
  shape.addEventListener('mouseleave', leaveHandler, false);
  return shape;
}

function overHandler() {
	this.setAttribute('r', 13);
}

function leaveHandler() {
	this.setAttribute('r', 10);
}

for (var i = 0; i < 17; i++) {
  stage.appendChild(createCircle(i));
}