JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="1920" height="1080" style="border:1px solid #000000;">
</canvas>

JavaScript

const c = document.getElementById("myCanvas")
const x = c.getContext("2d")

const canvasWidth = 192

const innerRingHalfRadius = 36
const outterRingHalfRadius = 48
const centerOfRing = (innerRingHalfRadius + outterRingHalfRadius) / 2
const embosRepetitions = 9

const xOffset = canvasWidth / 2
const yOffset = outterRingHalfRadius

const scanLines = outterRingHalfRadius * 2 * (outterRingHalfRadius * 2) - 1152

const shouldNotEmboss = (X, Y, R) => {return (Math.cos(Math.atan2(X, Y) * embosRepetitions) * 20 - R) & 44 != 0}

function u(timeElapsed) {
	c.width = canvasWidth

	for (let i = scanLines; i--; i > 0) {
		const X = (i % 97) - outterRingHalfRadius
		const Y = i / 97 - outterRingHalfRadius
		const R = Math.pow(X * X + Y * Y, 0.5)

		if (R > innerRingHalfRadius && R < outterRingHalfRadius) {
			
			if (shouldNotEmboss != 0) {
				x.fillRect(
					X + xOffset,
					Y + yOffset,
					R < centerOfRing ? Y / outterRingHalfRadius : X / outterRingHalfRadius,
					1,
				)
			} else {
				x.fillRect(X + xOffset, Y + yOffset, 1, 1)
			}
		} else {
			x.fillRect(X + xOffset, Y + yOffset, 1, R > innerRingHalfRadius ? R < outterRingHalfRadius : z(3) / 5)
		}

		z = (n) => {
			return (
				n-- &&
				Math.cos(Y / 2 + (X * Y) / outterRingHalfRadius + timeElapsed * 9) * Math.cos(Y / 4 - z(n) * 2) - R / 6
			)
		}
	}
}

const start = Date.now()
setInterval(function () {
	const elapsedMs = Date.now() - start
	u(elapsedMs / 1000)
}, 1000 / 60)