JAVASCRIPT

JAVASCRIPT

HTML

<canvas width="360" height="60">
  <span style="font: 68px 'Bangers'; color: #24f; text-shadow: 1px 0.5px 0 #888, 2px 1px 0 #888, 3px 1.5px 0 #888;font-weight: 100;">@JAVASCRIPT</span>
</canvas>

CSS

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

JavaScript

var span = 8
var x = 10
var y = 56
var text = document.querySelector('span')
var canvas = document.querySelector('canvas')
var ctx = canvas.getContext('2d')
ctx.font = text.style.font
var canvas2 = document.createElement('canvas')
canvas2.width = canvas.width
canvas2.height = canvas.height
ctx2 = canvas2.getContext('2d')
ctx2.font = text.style.font
ctx2.fillStyle = ctx2.shadowColor = "white"
ctx2.shadowBlur = 1
var offset = span
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = "#888"
  for (var i = 1; i <= 3; i++) {
    ctx.fillText(text.innerText, x + i, y + (i/2))
  }
  ctx.fillStyle = text.style.color
  ctx.fillText(text.innerText, x, y)
  ctx2.clearRect(0, 0, canvas2.width, canvas2.height)
  for (var i = 0; i < 7 * span; i+=span) {
    for (var j = 36; j < 36 + 22 * span*2; j += span*2) {
      ctx2.fillRect(j - i, i, 1.6, 1.6)
    }
  }
  ctx2.globalCompositeOperation = "destination-in"
  ctx2.fillText(text.innerText, x-offset, y-offset)
  ctx2.globalCompositeOperation = "source-over"
  ctx2.drawImage(canvas2, 0, 0)
  ctx.drawImage(canvas2, offset, offset)
  offset = --offset || span 
}
draw()
setInterval(draw, 100)