canvas
.content
  h1 404
View Compiled
@import url('https://fonts.googleapis.com/css?family=Roboto')

*
  box-sizing border-box

body
  font-family 'Roboto', sans-serif
  min-height 100vh
  background linear-gradient(35deg, #a1eeeb 30%, #4331ec 85%)
  background linear-gradient(35deg, #f8d60f 20%, #fc5c5c 85%)
  background linear-gradient(65deg, #fbdc14 20%, #04c4d4 20%, #04c4d4 65%, #fc5c5c 65%, #fc5c5c 85%)

canvas
  height 30vh
  left 0
  position absolute
  top 0
  width 100vw

canvas
  top 50%
  transform translate(0, -50%)

.content
  align-items center
  color #fafafa
  display flex
  height 100vh
  width 100vw
  position absolute
  justify-content center
  z-index 2

  h1
    font-size 4rem
    text-shadow 10px 10px 5px rgba(0, 0, 0, 0.5)

    @media(min-width 768px)
      font-size 10rem
View Compiled
const {
  PIXI: {
    Application,
    particles: { ParticleContainer },
    Sprite,
  },
} = window
let FONT_SIZE = innerHeight / 10
const FRACTION = 0.3
const PARTICLE_CONTAINER_OPTS = {
  scale: true,
  position: true,
  alpha: true,
}
const getHeight = () => Math.floor(innerHeight * FRACTION)
const view = document.querySelector('canvas')
const AMOUNT = 100
const onTick = () => {
  if (
    App.renderer.width !== innerWidth ||
    App.renderer.height !== getHeight()
  ) {
    App.renderer.resize(innerWidth, getHeight())
    Fours.removeChildren()
    Ohhhs.removeChildren()
    Page.removeChildren()
    FONT_SIZE = innerHeight / 10
    bootstrapLayers()
  }
  for (const p of [...Fours.children, ...Ohhhs.children, ...Page.children]) {
    p.x -= p.vx
    if (p.x < -(p.width)) {
      p.x = p.startingX
    }
  }
}

const App = new Application({
  antialias: true,
  height: getHeight(),
  transparent: true,
  view,
  width: innerWidth,
})

const createText = (text, opts = {height: FONT_SIZE * 2, width: FONT_SIZE * 2}) => {
  const canvas = document.createElement('canvas')
  canvas.width = opts.width
  canvas.height = opts.height
  const context = canvas.getContext('2d')
  context.font = `${Math.floor(innerHeight / 10)}px Roboto`
  context.fillStyle = '#ffffff'
  context.fillText(text, 0, FONT_SIZE, innerWidth)
  return canvas
}

const addParticles = (amount, container, text) => {
  new Array(amount).fill().map(p => {
    p = new Sprite.from(text)
    p.vx = (Math.random() * 10) + 1
    p.x = p.startingX = innerWidth + (Math.floor(Math.random() * ((innerWidth * 2) - (text.width * 2))) + (text.width * 2))
    p.y = Math.floor(Math.random() * (getHeight() - (text.height / 2)))
    p.scale.x = p.scale.y = (Math.random() * (50) + 50) / 100
    p.alpha = (Math.random() * 50) / 100
    container.addChild(p)
  })
}

const bootstrapLayers = () => {
  addParticles(Math.floor(innerWidth / 10), Fours, createText('4'))
  addParticles(Math.floor(innerWidth / 10), Ohhhs, createText('0'))
  addParticles(Math.floor(innerWidth / 50), Page, createText('Page not found', {height: FONT_SIZE * 2, width: innerWidth}))
}

const Fours = new ParticleContainer(Math.floor(innerWidth / 10), PARTICLE_CONTAINER_OPTS)
const Ohhhs = new ParticleContainer(Math.floor(innerWidth / 10), PARTICLE_CONTAINER_OPTS)
const Page = new ParticleContainer(Math.floor(innerWidth / 50), PARTICLE_CONTAINER_OPTS)
bootstrapLayers()

App.stage.addChild(Fours)
App.stage.addChild(Ohhhs)
App.stage.addChild(Page)
App.ticker.add(onTick)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js