Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

Last active September 13, 2019 10:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save tophtucker/ce7920067a66f63102a5 to your computer and use it in GitHub Desktop.
Save tophtucker/ce7920067a66f63102a5 to your computer and use it in GitHub Desktop.
Lenticular II
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css"/>
<script src="//" charset="utf-8"></script>
<script src="//" charset="utf-8"></script>
<script src="//" charset="utf-8"></script>
<script src="main.js" charset="utf-8"></script>
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
canvas {
width: 100%;
height: 100%;
function getPattern(bandWidth, offset) {
var width = 8,
height = 8;
var pattern = document.createElement('canvas');
var ctx = pattern.getContext('2d');
pattern.setAttribute('width', width);
pattern.setAttribute('height', height);
return pattern;
function render(t, ctx) {
ctx.fillStyle = ctx.createPattern(getPattern(.5, t/100), "repeat");
ctx.fillStyle = ctx.createPattern(getPattern(.7, t/100), "repeat");
ctx.fillText("Tapas are small plates", innerWidth/2, innerHeight*.4);
ctx.fillStyle = ctx.createPattern(getPattern(.5, 0), "repeat");
ctx.fillText("you share with friends", innerWidth/2, innerHeight*.6);
function init() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.setAttribute('width', innerWidth);
canvas.setAttribute('height', innerHeight);
// Add our demo to the HTML
ctx.font = "800 82px helvetica, arial, sans-serif";
ctx.textBaseline = 'middle';
ctx.textAlign = "center";
d3.timer(function(t) { render(t, ctx); });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment