JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.9/pixi.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div class="canvas"></div>

SCSS

html, body { margin: 0; padding: 0; }

Babel + JSX

const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const canvas = document.querySelector('.canvas');
const mainContainer = new PIXI.Container();
const innerContainer = new PIXI.Sprite();
const renderer = PIXI.autoDetectRenderer(windowWidth, windowHeight);
const numCircles = 60;
const numContainers = 9;
const numWrappers = 4;
const circleRadius = 2;
const circleInitRadius = 20;
const containerInitRadius = 100;
const wrapperInitRadius = 180;
const colors = [0xffaa00, 0xaaff00, 0x00aaff];
const numColors = colors.length;
const graphics = new PIXI.Graphics();
graphics.beginFill(0x444444);
graphics.drawRect(0, 0, windowWidth, windowHeight);
graphics.endFill();
mainContainer.addChild(graphics);
mainContainer.addChild(innerContainer);
innerContainer.position.x = Math.round(windowWidth * 0.5);
innerContainer.position.y = Math.round(windowHeight * 0.5);
canvas.appendChild(renderer.view);
TweenMax.ticker.addEventListener('tick', onRender, false);

const circleStep = 2 * Math.PI / numCircles;
const containerStep = 2 * Math.PI / numContainers;
const wrapperStep = 2 * Math.PI / numWrappers;
let wrapper;
let container;
let circle;
let circleAngle = 0;
let containerAngle = 0;
let wrapperAngle = 0;
let color;

for (let i = 0; i < numWrappers; i += 1) {
	wrapper = new PIXI.Sprite();
	for (let j = 0; j < numContainers; j += 1) {
    container = new PIXI.Sprite();
    for (let k = 0; k < numCircles; k += 1) {
      color = colors[j % numColors];
      circle = new PIXI.Graphics();
      circle.beginFill(color);
      circle.drawCircle(0, 0, circleRadius);
      circle.endFill();
      circle.position.x = Math.round(circleInitRadius * Math.cos(circleAngle));
      circle.position.y = Math.round(circleInitRadius * Math.sin(circleAngle));
      circleAngle += circleStep;
      container.addChild(circle);
    }
    container.position.x = Math.round(containerInitRadius * Math.cos(containerAngle));
    container.position.y = Math.round(containerInitRadius *...