JSFiddle - React, Tailwind, and code Playground

by mvasilkov

HTML

<canvas width=960 height=540 id=c></canvas>

CSS

canvas {
    background: #FFFBEB;
}

JavaScript

var c = document.getElementById('c')
var canvas = c.getContext('2d')

var step = 20, pad = 10

canvas.translate(0.5 * 960, 0.5 * 540)
canvas.rotate(-0.1)
canvas.translate(-0.5 * 960, -0.5 * 540)

canvas.fillStyle = '#93A1A1'

var thickness = 2

for (var i = -pad; i < 960 / step + pad; ++i) {
	for (var j = -pad; j < 540 / step + pad; ++j) {
		canvas.beginPath()
		canvas.arc(
            (i + 0.5) * step,
            (j + 0.5) * step,
            thickness += 0.000626,
            0, 2 * Math.PI)
        canvas.fill()
    }
}

console.log(thickness)