Jay McGavren's Journal

2012-09-02

SVG Tweets and HTML5 Canvas Tweets are both a bust...

…A data: URL can hold everything fine, sure, but I can’t get ‘em under 140 characters (at least, not while doing anything exciting with them). There’s just too much boilerplate. I’m under 256, at least!

Canvas - Rotate and Scale

Paste this into your address bar:

data:text/html,<canvas id='c' width='999' height='999'/><script>c=document.getElementById('c').getContext("2d");for(s=1;s<99;s++){c.scale(1.1,1.1);c.rotate(4);c.fillText("☃",1,2)}</script>

Or, just click this link.

SVG - Animation

SVG animations are EXCITING! (Or, in the wrong hands, seizure-inducing.)

Paste this into your address bar:

data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><g transform="translate(500,400)"><text x='-15' y='5'>SVG!<animateTransform attributeName="transform" type="scale" values="0;99;0" dur="0.3s" repeatCount="99"/></text></g></svg>

Or, just click this link.

Well, it was a fun experiment, anyway. And there may be techniques for shaving off a few bytes out there; I might cram something worthwhile into a tweet yet.

comments powered by Disqus