JSFiddle - React, Tailwind, and code Playground

HTML

<button id="startstop">Start/stop</button>
	<div id="snow">	</div>

CSS

.sf{
  position:absolute;
  z-index:9999999;
  display:block;
  width:20px; height:20px;
  /* FOR DEV ONLY */
  background:#FFF;
  opacity:1!important;
  border-radius: 50%;
}
body{
  background:#222;
  overflow:hidden;
}
#snow {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#startstop{
  width:100px;
  height:30px;
  border:0;
  background:rgb(61, 95, 123);
  color:#FFF;
  outline:none;
}

JavaScript

var flakePositions = [[]];
		var temp = 0;
		var move = 1;
		// snowflake proto
		function Snowflake() {
			this.pos = new Physics();
			// snowflake guid
			this.id = '';
			this.collisionCount = 0;
			// inits
			this.MAX_X_START_POS = 250;
			this.X_START_OFFSET = 200;
			this.MAX_Y_START_POS = 50;
			this.Y_START_OFFSET = 50;
			this.MAX_X_SPEED = 4;
			this.MAX_Y_SPEED = 1.2;

			// use to get sin && cos
			this.animationStepsCounter = 0
			this.fallFactor = 10;
			// snowflake html
			this.getId = function () {
				if (this.id == '') {
					this.id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,
						function (c) {
							var r = crypto.getRandomValues(new Uint8Array(1))[0] % 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
							return v.toString(16);
						});
				}
				return this.id;
			}
			this.initalize = function () {
				temp++;
				//var size = 5 + Math.random() * 20;
				var size = 20;
				this.flakeDOM.innerHTML = temp;
				this.flakeDOM.style.width = size + "px";
				this.flakeDOM.style.height = size + "px";
				this.flakeDOM.style.opacity = Math.random();
				this.pos.x = (Math.random() * this.MAX_X_START_POS);
				this.pos.y = this.Y_START_OFFSET + (Math.random() * this.MAX_Y_START_POS);
				this.pos.xSpeed = Math.random() * this.MAX_X_SPEED * Math.sign(-0.5 + Math.random());
				this.pos.ySpeed = Math.random() * this.MAX_Y_SPEED;

				//create array
				this.serial = temp;
				flakePositions[temp] = [];
				flakePositions[temp]['id'] = this.id;
				flakePositions[temp]['x'] = this.flakeDOM.style.top;
				flakePositions[temp]['y'] = this.flakeDOM.style.left;
				flakePositions[temp]['radius'] = this.flakeDOM.style.width;
				flakePositions[temp]['xspeed'] = this.pos.xSpeed;
				flakePositions[temp]['yspeed'] = this.pos.ySpeed
			}
			this.move = function () {
				this.flakeDOM.style.top = (this.pos.y += this.pos.ySpeed) + "px";
				this.flakeDOM.style.left = (this.pos.x += Math.sin(this.animationStepsCounter / this.fallFactor) *...