JSFiddle - React, Tailwind, and code Playground

by codepo8

HTML

<section></section>

JavaScript

/**
 * Provides requestAnimationFrame in a cross browser way.
 * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 */
if ( !window.requestAnimationFrame ) {
  window.requestAnimationFrame = ( function() {
    return window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(  callback, fps ) {
      window.setTimeout( callback, 1000 / fps );
    };
  } )();
}

var s = document.querySelector('section'),
    paintcanvas = document.createElement('canvas'),
    paintctx = paintcanvas.getContext('2d');
    c = document.createElement('canvas'),
    ctx = c.getContext('2d');

s.appendChild(paintcanvas);
s.appendChild(c);    

paintcanvas.width = 800;
paintcanvas.height = 800;
c.width = 400;
c.height = 400;
paintcanvas.style.display = 'none'
paintctx.translate(400,400);
for(var i=0;i<800;i+=10){
  paintctx.beginPath();
  paintctx.arc(0,0, i, 0, Math.PI*2);
  paintctx.strokeStyle = 'grey';
  paintctx.lineWidth = 5;
  paintctx.stroke();
  paintctx.closePath()
}

angle = 0;
ctx.globalCompositeOperation = 'xor';
function draw(){
  ctx.clearRect(0,0,400,400);
  var r = 100 * Math.sin(angle) + 100;
  var x = r * Math.cos(angle) - r*1.5;
  var y = r * Math.sin(angle) - r*1.5;
  var x2 = 100 * Math.cos(angle) - 300;
  var y2 = 100 * Math.sin(angle) - 300;
  var x3 = 150 * Math.cos(angle*2) - 200;
  var y3 = 150 * Math.sin(angle) - 200;
 ctx.drawImage(paintcanvas, x,y);
 ctx.drawImage(paintcanvas, x2,y2);
 ctx.drawImage(paintcanvas, x3,y3);
  
  angle+=0.05;
  window.requestAnimationFrame(draw,50);
}
draw();