Skip to content

Instantly share code, notes, and snippets.

@TylerVaughan
Created February 9, 2018 01:04
Show Gist options
  • Save TylerVaughan/3aa5c3674922767a2c81c865e16abe64 to your computer and use it in GitHub Desktop.
Save TylerVaughan/3aa5c3674922767a2c81c865e16abe64 to your computer and use it in GitHub Desktop.
chief keef
license: mit
<!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 Y'all 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 role 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 * 20) 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 ? "white" : "black";
context2.strokeText(text, width / 2, height / 2 + 100);
context2.restore();
context2.drawImage(canvas, 0, 0);
context.drawImage(canvas2, 0, 0);
});
})();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment