JSFiddle - React, Tailwind, and code Playground

by Michal Vodicka

JavaScript

function OrbitBackground(container, orbitCnt) {
  this.colors = [
    '#ce1427',
    '#1d3e87',
    '#29abe2'
  ];
  this.defaultOrbitColor = '#808989';

  this.pageWidth = window.screen.width | 0;
  this.pageHeight = window.screen.height | 0;

  this.orbits = [];

  // stages
  this.staticStage = null;
  this.staticStageCtx = null;
  this.dynamicStage = null;
  this.dynamicStageCtx = null;

  this.init(container, orbitCnt);
}

OrbitBackground.prototype.init = function(container, orbitCnt) {
  // make orbits
  for (var i = 0; i < orbitCnt; i++) {
    var satellite = this.makeRandomOrbit();
    this.orbits.push(satellite);
  }

  // create "stages"
  this.staticStage = document.createElement("canvas");
  this.staticStage.id = "static-stage";
  container.appendChild(this.staticStage);
  this.staticStage.style = "z-index: -9999;";
  this.dynamicStage = document.createElement("canvas");
  this.dynamicStage .id = "dynamic-stage";
  container.appendChild(this.dynamicStage);
  this.dynamicStage.style = "z-index: -9998;";

  // create dynamic context
  this.dynamicStageCtx = this.dynamicStage.getContext("2d");
  this.dynamicStageCtx.canvas.width  = this.pageWidth;
  this.dynamicStageCtx.canvas.height = this.pageHeight;

  // draw static background and start animation
  this.drawFrame();
};

OrbitBackground.prototype.makeRandomOrbit = function() {
  var x = Math.random() * this.pageWidth;
  var y = Math.random() * this.pageHeight;
  return {
    rps: 20 + Math.ceil(Math.random() * 20),
    backward: Math.random() > 0.5,
    orbit: {
      x: x,
      y: y,
      radius: 60 + Math.random() * 240,
      stroke: this.defaultOrbitColor,
      strokeWidth: 1
    },
    satellite: {
      x: x,
      y: y,
      radius: 5 + Math.random() * 10,
      fill: this.colors[Math.floor(Math.random() * this.colors.length)],
      // spawn at random angle
      angularPosition: Math.random() * 360
    }
  }
};


OrbitBackground.prototype.drawSatellite = function(ctx, satellite) {
 ...