JSFiddle - React, Tailwind, and code Playground
CSS
html, body {
background: white;
height: 100%;
margin: 0;
overflow: hidden;
width: 100%;
}
JavaScript
const DOT_RADIUS = 0.018;
const LINE_WIDTH = 0.01;
const DOT_COLOR = '#000';
const TRIANGLE_COLOR = '#f44';
const SQUARE_COLOR = '#44f';
const STAR_COLOR = '#fd4';
const ROTATION_PERIOD = 14; // seconds
const BIG_RADIUS = 0.57;
const SMALL_RADIUS = 0.35;
(function() {
const MS = 1000;
const PI2 = Math.PI * 2;
let ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
let body = document.getElementsByTagName('body')[0];
let start = Date.now();
let points = new Float64Array(24);
function step() {
let period;
let now = Date.now() - start;
let angle = (now * PI2 / (ROTATION_PERIOD * MS)) % PI2;
let w = ctx.canvas.width = body.clientWidth;
let h = ctx.canvas.height = body.clientHeight;
ctx.save();
ctx.translate(w / 2, h / 2);
ctx.scale(Math.min(w, h) / 2, Math.min(w, h) / 2);
ctx.lineWidth = LINE_WIDTH;
ctx.lineJoin = 'bevel';
/* Compute point positions */
for (let t = 0; t < 4; t++) {
let tangle = angle + PI2 * t / 4;
for (let c = 0; c < 3; c++) {
let cangle = -angle - PI2 * c / 3;
let x = Math.cos(tangle) * BIG_RADIUS +
Math.cos(cangle) * SMALL_RADIUS;
let y = Math.sin(tangle) * BIG_RADIUS +
Math.sin(cangle) * SMALL_RADIUS;
let i = t * 6 + c * 2;
points[i + 0] = x;
points[i + 1] = y;
}
}
/* Draw star */
period = -Math.sin(now / 2 * PI2 / (2 * ROTATION_PERIOD * MS));
ctx.globalAlpha = Math.pow(Math.max(period, 0), 0.5);
ctx.strokeStyle = STAR_COLOR;
for (let i = 0; i < 4; i++) {
let rot = angle / 7;
let off = PI2 * i / 7;
let x0 = Math.cos(off + rot);
let y0 = Math.sin(off + rot);
let x1 = Math.cos(off + rot + PI2 * 3 / 7);
let y1 =...