<body bgcolor=#222>
<canvas id=c width=1920 height=1080>
body { margin:0; overflow:hidden; }
canvas { background:#021; }
// Simple Dwitter Shim
// Created by Frank Force 2020
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

function u(t) { // dwitter code goes here

D = 23; // divisions
  
// https://www.dwitter.net/d/14566 - SMASH
c.width|=0;for(i=D;i--;)with(x)save(fillStyle='#FFD',beginPath(font="70em impact")),moveTo(j=1e3,540),clip(arc(j,540,2e3,q=2*Math.PI*i/D+9,q+2*Math.PI/D-.02)),restore(fillText("SMASH",9+29*S(q**4+t),j+49*C(q**5+t),1900))
  
}

let time = 0;
let frame = 0;
let FPS = 60;
let nextFrameMs = 0;

let x = c.getContext('2d');
let S = Math.sin;
let C = Math.cos;
let T = Math.tan;
let R = (r,g,b,a=1) => `rgba(${r|0},${g|0},${b|0},${a})`;

let loop = (frameTime) =>
{
  requestAnimationFrame(loop);
  
  // limit update rate to FPS
  if (frameTime)
  {
      if (frameTime < nextFrameMs-2)
          return;  // skip this cycle
      nextFrameMs = Math.max(nextFrameMs + 1000 / FPS, frameTime);
  }
  
  // update time
  time = frame/FPS;
  if (time*FPS|0 == frame-1)
    time += 0.000001; // fix floating point bug
  ++frame;
  
  // update user function
  u(time);
  
  // fit dwitter sized canvas to window
  const aspect = 1920/1080;
  const width = aspect > innerWidth/innerHeight? innerWidth : innerHeight*aspect;
  c.style.width = width +'px';
  document.body.style.textAlign = 'center';
}

loop();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.