<link href="https://fonts.googleapis.com/css2?family=Mynerve&display=swap" rel="stylesheet">
<div id="container"></div>
body {
	margin: 0;
	background-color: #202020;
}

#container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

import { SvJs } from 'https://cdn.jsdelivr.net/npm/svjs@latest/dist/svjs.min.js';

// Parent SVG.
const svg = new SvJs().addTo(document.getElementById('container'));

// Viewport and viewBox (1:1 aspect ratio).
const svgSize = Math.min(window.innerWidth, window.innerHeight);
svg.set({ width: svgSize, height: svgSize, viewBox: '0 0 1000 1000' });

// Background.
svg.create('rect').set({
	x: 0, y: 0, width: 1000, height: 1000, fill: '#181818'
});

// The line to use for the gag.
let line = '"Bart Bucks" are not legal tender.';
line = line.toUpperCase();

// Run a loop, creating 12 (960 / 80) lines of text.
for (let i = 0; i < 960; i += 80) {
  let text = svg.create('text');
	text.content(line);
	text.set({
    x: 20,
		y: 80 + i,
		fill: '#fff',
		font_size: 52,
		font_family: 'Mynerve'
  });
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.