JSFiddle - React, Tailwind, and code Playground

by ethertank

HTML

<canvas id="canvas" width="400" height="400"></canvas>

CSS

html,body{height:100%;}
body{
  background:#333;
  background-image:
    -webkit-gradient(linear,left top,left bottom, from(#666), to(#000));
    -moz-linear-gradient(top,#666,#000);
}

canvas{
  display:block;
  outline:1px solid #000;
  border:1px solid #ccc;
  margin:10px auto;
}

JavaScript

(function(){
function addEvent(a,b,c,d){
    if (a.addEventListener){a.addEventListener(b,c,d);}
    else if(a.attachEvent){a.attachEvent('on'+b,c);}
}//※「 addEvent(element,"name",observer,useCapture); 」
addEvent(window,"load",all,false);
function all(){ //=====================================

  var cW = 400, cH = 400;
  var FRAMERATE = 1000 / 14;
  var NUM = 8;
  
  var mouseX, mouseY;
  var canvas, ctx;
  var particles;
  
  // 初期化関数---------------------------------
  function init(){
    canvas = document.getElementById("canvas");
    if(ctx || canvas.getContext){
      ctx = canvas.getContext("2d");
      create();     
      setInterval(update,FRAMERATE);
    }
  }
  
  function create(){
    particles = [];
    ctx.globalAlpha = 0.85;
    for(var i=0;i < NUM;i++){
      var p = {
        size : 160,
        x : Math.random() * 150 + 100,
        y : Math.random() * 150 + 100,
        vx : Math.random() * 4 - 2,
        vy : Math.random() * 4 - 2,
        color : "#fff",
        angle:Math.random() * (Math.PI * 2)
      }
      particles.push(p);
    }
  }

  function update(){
    ctx.clearRect(0,0,cW,cH);
    ctx.globalAlpha = 0.9;
    ctx.fillStyle = "#000";
    ctx.fillRect(0,0,cW,cH);
    ctx.globalCompositeOperation = "lighter"; 
    for(var i=0; i<NUM; i++){
      var p = particles[i];
      p.x += p.vx;
      p.y += p.vy;
      p.angle += 0.05;
      
      if(p.x > cW - p.size || p.x < p.size ){
        p.vx *= -1;
      }else if(p.y > cH - p.size || p.y < p.size){
        p.vy *= -1;
      }
      ctx.globalAlpha =0.1;  
      ctx.fillStyle = p.color;
      ctx.beginPath();
      ctx.arc(p.x,p.y,p.size * (Math.sin(p.angle) + 1),0,Math.PI*2,false);
      ctx.fill();
    }
  }

  init();

}// End of "all()" ====================================
})();