words

<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="500"></canvas>
<script src="https://unpkg.com/d3-timer"></script>
<script>

var words = "Fuckers in school telling me, always in the barber shop Chief Keef ain't bout this, Chief Keef ain't bout that My boy a BD on fucking Lamron and them He, he they say that nigga don't be putting in no work SHUT THE FUCK UP! Y'all niggas ain't know shit All ya motherfuckers talk about Chief Keef ain't no hitta Chief Keef ain't this Chief Keef a fake SHUT THE FUCK UP Ya'll don't live with that nigga Y'all know that nigga got caught with a ratchet Shootin' at the police and shit Nigga been on probation since fuckin, I don't know when! Motherfuckers stop fuckin' playin' him like that Them niggas savages out there If I catch another motherfucker talking sweet about Chief Keef I'm fucking beating they ass! I'm not fucking playing no more You know those niggas roll with Lil' Reese and them".split(/\s+/g);

var canvas = document.querySelector("canvas"),
    canvas2 = canvas.cloneNode(),
    context = canvas.getContext("2d"),
    context2 = canvas2.getContext("2d");
    width = canvas.width,
    height = canvas.height;

context.font = context2.font = "300px Helvetica Neue";
context.textAlign = context2.textAlign = "center";
context.lineJoin = context2.lineJoin = "round";

(function next() {
  var i = 0.5, text = words.shift();
  context.clearRect(0, 0, width, height);
  context.fillText(text, width / 2, height / 2 + 100);
  var timer = d3.timer(function() {
    if (++i > text.length * 12) return timer.stop(), next();
    context2.save();
    context2.clearRect(0, 0, width, height);
    context2.lineWidth = i & 1 ? i * 5 + 3 : i * 5;
    context2.strokeStyle = i & 1 ? "purple" : "gold";
    context2.strokeText(text, width / 2, height / 2 + 100);
    context2.restore();
    context2.drawImage(canvas, 0, 0);
    context.drawImage(canvas2, 0, 0);
  });
})();

</script>

https://unpkg.com/d3-timer