JSFiddle - React, Tailwind, and code Playground

Hemlock flier

by greg gorlen

HTML

<canvas id="paper"></canvas>
<div id="text">
  Angel 1<br>
  C  CC  V  L T  S  SS<br>
  Collin McKelvey<br>
  HBVG<br><br>
  Hemlock Tavern<br>
  October 9
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Overpass+Mono');

body {
  background-color: #000;
  font-family: "Overpass Mono", monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96vh;
}

#text {
  font-size: 23px;
  min-width: 200px;
  min-height: 200px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  position: relative;
  top: -10px;
  left: -130px;
  padding: 60px;
}

JavaScript

"use strict";

let canvas = document.getElementById("paper");
canvas.height = canvas.width = 500;

let ctx = canvas.getContext("2d");
ctx.lineWidth = 1;

let x = -280;
let y = 80;
let angle = 100;
let lines = [];

for (let i = 0; i < 150; i++) {
  lines.push(x);
  x += 5.0;
}

function rad(deg) { return deg * Math.PI / 180; }

function draw(x, y, angle, ctx) {
  ctx.beginPath();
  
  for (let i = 0; i <= canvas.height; i += 20) {
    ctx.lineTo(x + Math.cos(rad(angle)) * canvas.width, y + i);
    angle += 2.9;
  }
  
  ctx.stroke();
}

(function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  for (let i = lines.length - 1; i >= 0; i--) {
    ctx.strokeStyle = "#ff0000";
    ctx.save();
    ctx.translate(canvas.width, canvas.height + 75);
    ctx.rotate(rad(110));
    draw(lines[i] * 0.39 + 210, y - 10, angle, ctx);
    ctx.strokeStyle = "#00ff00";
    ctx.rotate(rad(16));
    draw(lines[i] * 0.35 + 300, y - 180, angle, ctx);
    ctx.strokeStyle = "#0000ff";
    draw(lines[i] * 0.34 + 280, y - 50, angle, ctx);
    ctx.restore();
  }
})();