JSFiddle - React, Tailwind, and code Playground

by nju33

HTML

<script src="https://unpkg.com/eases/back-in-out"></script>
<canvas id="canvas" style="width:100vw;height:100vh"><</canvas>

CSS

body {
  margin: 0;
}

Babel + JSX

const canvas = document.getElementById('canvas');
canvas.setAttribute('width', document.body.clientWidth * devicePixelRatio);
canvas.setAttribute('height', document.body.clientHeight * devicePixelRatio);

const ctx = canvas.getContext('2d');
// ctx.scale(0.5,0.5);

/* class Line {
  constructor(ctx, x, amount, dir = 'right', color = '#333') {
    this.x = x;
    this.amount = amount;
    this.dir = dir;
    this.ctx = ctx;
    this.color = color;
    this.draw();
  }
  
  draw() {
    ctx.beginPath();
    ctx.strokeStyle = this.color;
    ctx.lineWidth = 0.5;
    ctx.moveTo(this.x, 0);
    ctx.lineTo(this.x, canvas.height);
    ctx.stroke();
  }
  
  next() {
    if (this.x >= canvas.width) {
      this.dir = 'left';
    }
  
    if (this.x <= 0) {
      this.dir = 'right';
    }
  
    if (this.dir === 'right') {
      this.x = this.x + this.amount;
    } else {
      this.x = this.x - this.amount;
    }
    
    return this;
  }
} */

/* const lines = [
  new Line(ctx, 10, 1, 'right'),
  new Line(ctx, 50, 0.7, 'right'),
  new Line(ctx, 150, 1.1, 'right'),
  new Line(ctx, canvas.width / 3, 1.5, 'right', '#ffe705'),
  new Line(ctx, canvas.width / 2, 0.4, 'right'),
  new Line(ctx, canvas.width - 90, 1.3, 'right'),
  new Line(ctx, canvas.width - 30, 0.85, 'right'),
  new Line(ctx, 200, 0.7, 'left', '#ffe705'),
  new Line(ctx, canvas.width - 10, 1.1, 'left'),
]; */

class Circle {
  constructor(data) {
    this.x = data.x;
    this.y = data.y || data.x;
    this.degree= data.degree || 1;
    this.radius = data.radius;
    this.maxRadius = data.maxRadius;
    this.minRadius = data.minRadius;
    this.amount = data.amount || 1;
    this.mode = data.mode || 'spread'; // 'spread' | 'cower';
  }
  
  draw() {
    ctx.strokeWidth = 0.5;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
    ctx.stroke();
  }
  
  next() {
    if (this.mode === 'spread' && this.radius >= this.maxRadius) {
      this.mode = 'cower';
    }
    
    if...