JSFiddle - React, Tailwind, and code Playground

by robaldred

HTML

<script src="http://kineticjs.com/download/v4.1.2/kinetic-v4.1.2.min.js"></script>
<div id="container"></div>

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:black;
}

JavaScript

var stage = new Kinetic.Stage({
   container: 'container',
   width: 578,
   height: 500
});

var layer = new Kinetic.Layer();
var textGroup = new Kinetic.Group();
var lineGroup = new Kinetic.Group();

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

var anchor = [50,200];

var word_origins = [
    [200,50],
    [200,150],
    [200,250],
    [200,350]
];

var textObjects = [];
var lineObjects = [];

for(var i = 0;i<words.length;i++) {
    var text = new Kinetic.Text({
        x: anchor[0],
        y: anchor[1],
        text: words[i],
        fontSize: 24,
        opacity: 0,
        scale: { x:0.2, y:0.2 },
        fontFamily: 'HelveticaNeueLight',
        textFill: 'white'
    });
    textObjects.push(text);
    textGroup.add(text);
    
    var line = new Kinetic.Line({
        points: [anchor[0],anchor[1],word_origins[i][0],word_origins[i][1]],
        stroke: 'white',
        strokeWidth: 0,
        lineCap: 'round',
        lineJoin: 'round',
        opacity: 0
    });
    
    lineObjects.push(line);
    lineGroup.add(line);
}

layer.add(textGroup);
layer.add(lineGroup);
stage.add(layer);

lineGroup.moveToBottom();
lineGroup.draw();

var randomChange = function(minNum,maxNum) {
    return (Math.random() * (maxNum - minNum + 1)) + minNum;
}
  
var moveText = function(i) {
    var text = textObjects[i];
    var changeX = randomChange(-5,5);
    var changeY = randomChange(-5,5);
    console.log('Changing by: '+changeX+','+changeY);
    var toX, toY; 
    if(changeX < 0)
        toX = word_origins[i][0] + (changeX - 5);
    else
        toX = word_origins[i][0] + (changeX + 5);


    if(changeY < 0)
        toY = word_origins[i][1] + (changeY - 5);
    else
        toY = word_origins[i][1] + (changeY + 5)
    
    text.transitionTo({
        x: toX,
        y: toY,
        duration: randomChange(3,3.5),
        easing: "ease-in-out",
        callback: function(){
            moveText(i);
        }
   ...