JSFiddle - React, Tailwind, and code Playground

by invincible

HTML

<script src="http://raphaeljs.com/helvetica.js"></script>
<div id="holder"></div>

JavaScript

var r = Raphael("holder", 300, 200), pos = [0, 0];
var letter = r.path("M0,0L0,0z").attr({fill: "#cde", stroke: "#226688", "fill-opacity": .3, "stroke-width": 1, "stroke-linecap": "round", translation: "100 100"});
                   
var key = "a";
if (key && key in helvetica) {
    letter.animate({path: helvetica[key]}, 200);
};


function updateClock(){
    var currentTime = new Date ( );
    var currentHours = currentTime.getHours ( );
    var currentMinutes = currentTime.getMinutes ( );
    var currentSeconds = currentTime.getSeconds ( );

    var key = "b";//currentSeconds/10;
    alert(currentSeconds);
    letter.animate({path: helvetica[key]}, 200);
};

setInterval('updateClock()', 1000);