JSFiddle - React, Tailwind, and code Playground

by icodeforlove

CSS

canvas {
  transform: scale(0.5);
  transform-origin: 0 0;
  position: absolute;
}

JavaScript

function animate (x, y) {
  let interval = 30,
      frame = 1,
      COLOR = '#e2264d';

  let canvas = document.createElement('canvas'),
      context = canvas.getContext('2d');

  canvas.width = canvas.height = 100;
  document.body.appendChild(canvas);
  canvas.style.left = x + 'px';
  canvas.style.top = y + 'px';

  const drawCircle = (x, y, radius, fillStyle) => {
      if (fillStyle) {
        context.fillStyle = fillStyle;
      }
      context.beginPath();
      context.arc(x, y, radius, 0, 2 * Math.PI, false);
      context.fill();
  }

  const drawSquare = (x, y, size, fillStyle) => {
      if (fillStyle) {
        context.fillStyle = fillStyle;
      }
      context.fillRect(x, y, size, size);
  }

  const render = () => {
    context.clearRect(0, 0, canvas.width, canvas.height);
  //frame = 8;
    if (frame === 0) {
      //drawSquare(36, 36, 28);
    } else if (frame === 1) {
      drawSquare(48, 48, 4, '#e2264d');
    } else if (frame === 2) {
      drawCircle(50, 50, 23, '#dd4688');    
    } else if (frame === 3) {
      drawCircle(50, 50, 28, '#d46abf');
    } else if (frame === 4) {
      drawCircle(50, 50, 29, '#cc8ef5');
    } else if (frame === 5) {
      drawCircle(50, 50, 29, '#cc8ef5');
      context.globalCompositeOperation = 'destination-out';
      drawCircle(50, 50, 22, '#cc8ef5');
      context.globalCompositeOperation = 'source-over';
    } else if (frame === 6) {
      drawCircle(50, 50, 29, '#cc8ef5');
      context.globalCompositeOperation = 'destination-out';
      drawCircle(50, 50, 27, '#cc8ef5');
      context.globalCompositeOperation = 'source-over';

      drawSquare(46, 46, 8, COLOR);

      drawCircle(27, 32, 2, '#8ce8c3');
      drawCircle(30, 29, 2, '#8ce8c3');

      drawCircle(50, 19, 2, '#91d2fa');
      drawCircle(54, 22, 2, '#91d2fa');

      drawCircle(73, 30, 2, '#cc8ef5');
      drawCircle(74, 35, 2, '#cc8ef5');

      drawCircle(79, 55, 2, '#8ce8c3');
      drawCircle(76, 59, 2, '#8ce8c3');

      drawCircle(58,...