Skip to content

Instantly share code, notes, and snippets.

@andipollok

andipollok/README.md

Last active January 2, 2016 17:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save andipollok/8339986 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save andipollok/8339986 to your computer and use it in GitHub Desktop.
Download ZIP
Animated typography outlines
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script src="http://paperjs.org/assets/js/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
var text = new PointText(new Point(50, 140));
text.font = 'Helvetica, arial, sans-serif';
text.content = 'RCA\nWork in\nProgress';
text.fontSize = 140;
text.fillColor = 'white';
text.fillColor.alpha = 0;
text.strokeColor = 'white';
text.strokeWidth = 3;
text.leading = 120;
text.spacing = 2;
var randomValues = [];
for (var i = 0; i < 10; i++) {
randomValues.push(Math.random()/2 + 0.5);
}
var prevTime = +new Date();
var elapsedTime = 0;
view.onFrame = function(event) {
var currentTime = +new Date();
var deltaTime = currentTime - prevTime;
prevTime = currentTime;
elapsedTime += deltaTime;
for (var i = 0; i < 10; i += 2) {
text.dashArray[i] = -Math.cos(elapsedTime / 2500. * randomValues[i]) * 200 + 200; // stroke length
text.dashArray[i + 1] = Math.sin(elapsedTime / 1000. * randomValues[i+1]) * 400 + 400; // gap length
}
text.dashOffset = Math.cos(elapsedTime / 1000) * 10 - 10;
}
</script>
<style type="text/css">
body {
background: #e30613;
}
</style>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment