Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active March 17, 2018 17:57
Show Gist options
  • Save mbostock/34a4e0330eb374b4e24e19cfe58a8669 to your computer and use it in GitHub Desktop.
Save mbostock/34a4e0330eb374b4e24e19cfe58a8669 to your computer and use it in GitHub Desktop.
Hello
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="500"></canvas>
<script src="https://unpkg.com/d3-timer"></script>
<script>
var words = "Hello, it’s me\nI was wondering if after all these years you’d like to meet\nTo go over everything\nThey say that time’s supposed to heal ya\nBut I ain’t done much healing\n\nHello, can you hear me\nI’m in California dreaming about who we used to be\nWhen we were younger and free\nI’ve forgotten how it felt before the world fell at our feet\n\nThere’s such a difference between us\nAnd a million miles\n\nHello from the other side\nI must have called a thousand times\nTo tell you I’m sorry for everything that I’ve done\nBut when I call you never seem to be home\n\nHello from the outside\nAt least I can say that I’ve tried\nTo tell you I’m sorry for breaking your heart\nBut it don’t matter it clearly doesn’t tear you apart anymore\n\nHello, how are you?\nIt’s so typical of me to talk about myself I’m sorry\nI hope that you’re well\nDid you ever make it out of that town where nothing ever happened\n\nIt’s no secret that the both of us\nAre running out of time\n\nSo hello from the other side\nI must have called a thousand times\nTo tell you I’m sorry for everything that I’ve done\nBut when I call you never seem to be home\nHello from the outside\nAt least I can say that I’ve tried\nTo tell you I’m sorry for breaking your heart\nBut it don’t matter it clearly doesn’t tear you apart anymore\n\nOoooohh, anymore\nOoooohh, anymore\nOoooohh, anymore\nAnymore\n\nHello from the other side\nI must have called a thousand times\nTo tell you I’m sorry for everything that I’ve done\nBut when I call you never seem to be home\nHello from the outside\nAt least I can say that I’ve tried\nTo tell you I’m sorry for breaking your heart\nBut it don’t matter it clearly doesn’t tear you apart anymore".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>
@pirtleshell
Copy link

Hello, this is awesome! I'd suggest passing width as the 3rd argument to both of the fillText & strokeText calls. This is the maxWidth the text can be so Adele doesn't gets cut off. 😁

Also, be careful of your semicolon after the declaration of context2.

Thanks for crafting!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment