JSFiddle - React, Tailwind, and code Playground
The Invisible Girls
by greg gorlen
HTML
<canvas id="paper"></canvas>
CSS
body {
background-color: #000;
display: flex;
height: 96vh;
align-items: center;
justify-content: center;
}
JavaScript
// Just a tribute/homage. Copyright holders notify me and I'll remove this pen.
"use strict";
const rad = e => e * Math.PI / 180;
let canvas = document.getElementById("paper");
canvas.height = canvas.width = 500;
let ctx = canvas.getContext("2d");
ctx.lineWidth = 5;
ctx.strokeStyle = "#fff";
for (let i = -10; i < 50; i++) {
let x = 0;
let y = i * 11;
ctx.beginPath();
ctx.moveTo(x, y);
for (let angle = 0; x < canvas.width; angle += 1) {
ctx.lineTo(x + Math.cos(rad(angle)),
y + Math.sin(rad(angle)) * 15);
x += 0.45;
}
ctx.stroke();
}
for (let x = canvas.width; x >=0; x--) {
for (let y = canvas.width - x - 1; y <= canvas.height; y++) {
ctx.fillStyle = Math.random() > 0.2 ? "#000" : "#fff";
ctx.fillRect(x, y, 2, 2);
}
}