JSFiddle - React, Tailwind, and code Playground

Splazsh

by greg gorlen

HTML

<div>
  <canvas id="paper"></canvas>
  <div id="artist">ACTRESS</div>
  <div id="title">SPLAZSH</div>
</div>

CSS

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

body {
  font-family: "Maven Pro", sans-serif;
  font-size: 15px;
  color: #fff;
  background-color: #000;
  display: flex;
  height: 96vh;
  align-items: center;
  justify-content: center;
}

#paper {
  background-color: #fff;
}

#title, #artist {
  font-weight: 400;
  position: relative;
}

#title {
  bottom: 90px;
  left: 173px;
}

#artist {
  top: -350px;
  left: 171px;
}

JavaScript

/* 
 * A tribute! Copyright owners: notify me and I'll remove.
 */

"use strict";

const rad = (d) => d * Math.PI / 180;

const hex = (size) => {
  ctx.lineWidth = 18;
  ctx.beginPath();
  
  for (let i = -60; i <= 360; i += 60) {
    ctx.lineTo(x + Math.cos(rad(i)) * size, 
               y + Math.sin(rad(i)) * size);
  }
  
  ctx.stroke();
}

let canvas = document.getElementById("paper");
let ctx = canvas.getContext("2d");
canvas.height = canvas.width = 400;

let x = canvas.width / 2;
let y = canvas.height / 2;

for (let size = canvas.width / 2.5; size > 40; size -= 38) {
  hex(size);
}

ctx.strokeStyle = "#aa0000";
ctx.lineWidth = 1;
ctx.beginPath();

for (let i = 0, j = 0; i < 3; i++) {
  ctx.moveTo(10 + j, 10 + j);
  ctx.lineTo(10 + j, canvas.height - 10 - j);
  ctx.lineTo(canvas.width - 10 - j, canvas.height - 10 - j);
  ctx.lineTo(canvas.width - 10 - j, 10 + j);
  ctx.closePath();
  j += 3;
}

ctx.stroke();