JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id=c width=200 height=200/>

JavaScript

var canvas = document.getElementById("c");
var width = canvas.width;
var height = canvas.height;
var ctx = canvas.getContext("2d");

//the same code does all the drawing; the transformation matrix creates the apparent motion.
var draw = function() {
    ctx.save();
    ctx.lineWidth = 2;
    ctx.translate(0.5, 0.5);
    ctx.beginPath();
    for(var i = -width; i <= width; i += 10) {
        ctx.moveTo(i, -height);
        ctx.lineTo(i, height);
    }
    for(var i = -height; i <= height; i += 10) {
        ctx.moveTo(-width, i);
        ctx.lineTo(width, i);
    }
    ctx.stroke();
    ctx.restore();
}
    
    
var drawShear = function(b, c) {
    ctx.clearRect(0, 0, width, height);
    ctx.save();

    //changing other elements of the matrix,
    //i.e., the other arguments to this function,
    //will achieve different effects
    ctx.setTransform(b, c, 0, 1, 0, 0);
    draw();
    ctx.restore();
}

    
var theta = 0;
var omega = 2 * Math.PI / 4 / 1000;

var lastTime = null;

//animate
window.setInterval(function() {
    var when = Date.now();
    if(lastTime == null) {
        lastTime = when;
        return;
    }
    var delta = when - lastTime;
    theta += omega * delta;
    while(theta >= 2 * Math.PI)
        theta -= 2 * Math.PI;
    drawShear(Math.cos(theta), Math.sin(theta) / 5);
    lastTime = when;
}, 15);