JSFiddle - React, Tailwind, and code Playground

by liyuanqiu

JavaScript

(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()

const ns = 'http://www.w3.org/2000/svg';
class SvgHelper {
  static svg({ size, onClick }) {
    const svg = document.createElementNS(ns, 'svg');
    svg.setAttribute('xmlns', ns);
    svg.setAttribute('width', size.width);
    svg.setAttribute('height', size.height);
    svg.addEventListener('click', (e) => {
      onClick(e);
    }, true);
    return svg;
  }
  static element({ tag, style, attrs, children, prevElement }) {
    const element = prevElement ? prevElement : document.createElementNS(ns, tag);
    element.style.cssText = Object.keys(style).map(name => `${name}:${style[name]}`).join(';');
    Object.keys(attrs).forEach(name => {
      element.setAttribute(name, attrs[name]);
    }); 
    element.innerHTML = ''; 
    if (Array.isArray(children)) {
      children.forEach(c => {
        element.appendChild(c);
      }); 
    }   
    return element;
  }
}

let list = [];

const svg = SvgHelper.svg({
	size: {
    width: 400,
    height: 400,
  },
  onClick() {},
});
document.body.append(svg);

setInterval(() => {
	const circle = SvgHelper.element({
  	tag: 'circle',
    style: {},
    attrs: {
    	cx: Math.random() * 400,
      cy: Math.random() * 400,
      r: 4,
    },
  });
  svg.append(circle);
  list = [...list, circle];
  setTimeout(() => {
  	const copy = list.slice();
    //copy.splice(0, 1);
    //console.log(list.length, copy.length);
    list = copy;
  	//circle.remove();
  }, 5000);
}, 0);