JSFiddle - React, Tailwind, and code Playground

by magneto903

HTML

<canvas id="c"></canvas>

SCSS

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: #f05151;
}

Babel + JSX

const canvas = document.getElementById('c')
const ctx = canvas.getContext('2d')
let stars, starsCount = 100

const width = window.innerWidth
const height = window.innerHeight

ctx.fillRect(0, 0, width, height)

canvas.width = width
canvas.height = height

function randomInteger(min, max) {
  let rand = min + Math.random() * (max + 1 - min);
  return Math.floor(rand);
}

function randomColor() {
  const colorNum = randomInteger(0, 3)
  let color
  if(colorNum == 0) color = 'blue'
  else if(colorNum == 1) color = '#FF7F66'
  else if(colorNum == 2) color = '#7ECEFD'
  else if(colorNum == 3) color = '#FFF6E5'
  
  return color
}

function randomSpeed() {
  const speedNum = randomInteger(0, 3)
  let speed
  if(speedNum == 0) speed = .01
  else if(speedNum == 1) speed = .02
  else if(speedNum == 2) speed = .03
  else if(speedNum == 3) speed = .04
  
  return speed
}

class Star {
	constructor(x, y, radius) {
    this.x = x
    this.y = y
    this.radius = radius
    this.color = randomColor()
    this.speedX = -1
    this.speedY = 0.5
    this.vel = 1 + Math.random() / 100
    this.bornAt = 0 // ms
    this.tailMaxLength = 200 // px
    this.tailLength = 0 // px
    this.tailGrowDuration = 3000 // ms
  }

  drawBody() {
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
    ctx.fillStyle = this.color
    ctx.fill()
    ctx.closePath()
  }
  
  drawTail() {
  	const angle = Math.atan2(this.speedY, this.speedX) + Math.PI
    const x2 = this.x + Math.cos(angle) * this.tailLength
    const y2 = this.y + Math.sin(angle) * this.tailLength
  	const gradient = ctx.createLinearGradient(this.x, this.y, x2, y2)
    gradient.addColorStop(0, this.color)
    gradient.addColorStop(1, 'transparent')
  
    ctx.lineWidth = this.radius * 2
    ctx.strokeStyle = gradient
    ctx.beginPath()
    ctx.moveTo(this.x, this.y)
    ctx.lineTo(x2, y2)
    ctx.stroke()
    ctx.closePath()
  }

  update(now) {
  	this.bornAt = this.bornAt || now
    const t =...