JSFiddle - React, Tailwind, and code Playground

by soulwire

CSS

html, body {
  background: #11171C;
  margin: 0;
}

Babel + JSX

const TAU = Math.PI * 2;
const COLORS = [
	'#1abc9c',
  '#2ecc71',
  '#3498db',
  '#f1c40f',
  '#e74c3c',
  '#f39c12'
]

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const scale = window.devicePixelRatio || 1;
canvas.width = window.innerWidth * scale;
canvas.height = window.innerHeight * scale;
document.body.appendChild(canvas);

class Ring {
	constructor(radius, color) {
	  this.rotation = 0;
    this.color = color;
	  this.radius = radius;
  	this.speed = 0.01 + Math.random() * 0.02;
    this.speed = Math.floor(1 + Math.random() * 3) * 0.05;
    this.direction = 1//Math.random() < 0.5 ? -1 : 1;
    this.segments = Math.floor(3 + Math.random() * 12);
    this.pattern = new Array(this.segments);
    for (let i = 0; i < this.segments; i++) {
    	this.pattern[i] = Math.random() < 0.5 ? 0 : 1;
    }
  }
  render(ctx) {
		this.rotation += this.speed * this.direction;
    ctx.save();
    ctx.strokeStyle = this.color;
    ctx.fillStyle = this.color;
    //ctx.rotate(this.rotation);
    ctx.beginPath();
    ctx.arc(0, 0, this.radius, 0, TAU);
    ctx.stroke();
    const step = TAU / this.segments;
    for (let i = 0; i < this.segments; i++) {
    	const theta = i * step;
      const x = Math.cos(theta) * (this.radius - 25);
      const y = Math.sin(theta) * (this.radius - 25);
    	ctx.beginPath();
      ctx.arc(x, y, 4, 0, TAU);
      this.pattern[i] ? ctx.fill() : ctx.stroke();
    }
    ctx.restore();
    
    const r = Math.floor(this.rotation / this.segments) * step;
    ctx.save();
    ctx.rotate(r);
    ctx.beginPath();
    ctx.arc(this.radius, 0, 4, 0, TAU);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.restore();
  }
}

const rings = [];

for (let i = 0, radius = 100; radius < 400; i++, radius += 50) {
	rings.push(
	  new Ring(radius, COLORS[i % COLORS.length])
  );
}

const render = () => {
	requestAnimationFrame(render);
  canvas.width = canvas.width;
  ctx.beginPath();
  ctx.fillStyle = 'rgba(0,0,0,0.08)'
 ...