JSFiddle - React, Tailwind, and code Playground

by schrodingers

HTML

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

CSS

/* canvas{width: 100%; height: 100%;} */

JavaScript

/* Snowflakes */

var canvas = document.getElementById("c");
var c = canvas.getContext("2d");
var width = canvas.width = 800;
var height = canvas.height = 600;

var DEPTH = 5;
var MAX_FLAKES = 8;
var MIN_FLAKES = 2;
var randomParameters = [];
for (i = 0; i <= DEPTH; i++) {
  randomParameters[i] = Math.floor(Math.random() * (MAX_FLAKES - MIN_FLAKES)) + MIN_FLAKES;
}
var snowFlakes = [{
  x: width/2,
  y: height/2,  
  r: 110,  
  
  d: DEPTH,
  f: randomParameters[0]
}];

DrawFlake = function(c, flake) {
  c.save();
  c.translate(flake.x, flake.y);
  c.fillStyle = "rgba(0,191,255," + (1 - (1 / (flake.d + 4))).toString() + ")";
  c.fillRect(-1, -3, 2, 6);
  c.fillRect(-3, -1, 6, 2);
  var i = 0;
  if (flake.d > 0) {
    for (i = 0; i < flake.f; i++) {
      c.save();
      c.rotate(i * (Math.PI * 2) / flake.f);
      
      this.DrawFlake(c, {
        
        x: flake.r - 2,
        y: 0,
        r: flake.r / 2,
        d: flake.d - 1,
        
        f: randomParameters[flake.d]
      });
      c.restore();
    }
  }
  i = 0;
  c.restore();

};

function draw() {
  //  var startTime = new Date().getTime();
  c.fillStyle = '#fff';
  c.fillRect(0, 0, this.width, this.height);

  for (i in this.snowFlakes) {
    this.DrawFlake(c, this.snowFlakes[i]);
  }
  //  processingTime = new Date().getTime() - startTime;

//  line = 0;
  
  
  
  
  
};
draw();