JSFiddle - React, Tailwind, and code Playground

by robaldred

HTML

<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<script src="http://www.snorkl.tv/dev/libs/greensock/plugins/ColorPropsPlugin.min.js"></script>

CSS

@font-face {
    font-family: 'HelveticaNeueLight';
    src: url('http://compared-analysis.stardotserver.co.uk/css/helveticaneue-light-webfont.eot');
    src: url('http://compared-analysis.stardotserver.co.uk/css/helveticaneue-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://compared-analysis.stardotserver.co.uk/css/helveticaneue-light-webfont.woff') format('woff'),
         url('http://compared-analysis.stardotserver.co.uk/css/helveticaneue-light-webfont.ttf') format('truetype'),
         url('http://compared-analysis.stardotserver.co.uk/css/helveticaneue-light-webfont.svg#helvetica_neue_light') format('svg');
    font-weight: normal;
    font-style: normal;
}

canvas {
    background:transparent;
}

JavaScript

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame   || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame    || 
      window.oRequestAnimationFrame      || 
      window.msRequestAnimationFrame     || 
      function( callback ){
        window.setTimeout(callback, 1000 / 60);
      };
})();

var words = [
    'Lots of cash',
    'Close to friends',
    'Nearby friends',
    'City lifestyle'
];

var word_targets = [
    [20,10],
    [200,10],
    [20,100],
    [100,200]
];

var canvas, context;

init();
animate();

function init() {
    canvas = document.createElement('canvas');
    canvas.width = 512;
    canvas.height = 512;

    context = canvas.getContext('2d');

    document.body.appendChild(canvas);
}

function animate() {
    requestAnimFrame( animate );
    draw();
}

function draw() {
    context.clearRect (0,0,canvas.width,canvas.height);
    for(var i = 0; i < words.length; i++) {
        draw_text(i);
    }
}

function draw_text(i) {
    var x = word_targets[i][0] + Math.random()*6-3;
    var y = word_targets[i][1] + Math.random()*6-3;
    context.font = "14px HelveticaNeueLight";
    context.fillText(words[i], x, y);
}