JSFiddle - React, Tailwind, and code Playground

by digitalzebra

HTML

<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<svg id="cheese" width="500" height="250"  version="1.1" xmlns="http://www.w3.org/2000/svg" style="background: black;">
    <g id="ttt">
    <circle id="chicken" cx="200" cy="150" r="20" stroke="red" fill="transparent" stroke-width="5"/>
    <polygon id="star" points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/>
</g>
</svg>
<button onclick="f();">click me</button>
    <button onclick="g();">translate</button>
    <button onclick="h();">drawStuff</button>
<div id="out"> </div>
<h5>framerate:</h5>
<div id="framerate"> </div>

JavaScript

function h() {
    var r = new Raphael(document.getElementById("cheese"));
    var rect = r.rect(70,20,100,50,10);
    var rect2 = r.rect(150, 100, 30, 30, 5);
    rect2.attr("fill", "#cf1");
    rect.attr("fill", "#f00");
    
    var s = r.set();
    s.push(rect, rect2);
    
    s.animate({x: 300}, 4000, "bounce");
     
    //var star = r.getById("star");
    //star.attr("stroke", "blue");
};

function g(){
    $("#ttt").attr("transform", "translate(20,30)");
};

function f() {
    //$("#cheese").attr("viewBox", "0 0 50 50");
    var element = $("#chicken");
    var outD = $("#out");
    var ff = $("#framerate");
    var elapsedTime = 0;
    var previousTime = new Date().getTime();
    var times = 0;
    var sign = -1;
    var signm = -1;
    
    window.setInterval(function() {
        var d = new Date().getTime();
        elapsedTime = d - previousTime;
        previousTime = d;
        times++;
        
        var n = parseFloat(element.attr("cx"));
        var m = parseFloat(element.attr("cy"));
        
        var dn = (new Date().getTime() / 5 % 360) * 0.0174532925;
        var sc = sincos(dn);
        n = 200 + (25 * sc[0]);
        m = 150 + (25 * sc[1]);      

        element.attr("cx", n);
        element.attr("cy", m);
        
    }, 17);
    
    window.setInterval(function() {
        ff.html(times);
        times = 0;
    }, 1000);
};

// http://knol.google.com/k/frank-bruder/a-simple-approximation-of-sine-and/1elqhros39id2/3#
//- Helper functions

/**
 * Returns a point on the unit circle, parameterised by v
 */
function xyOnCircle(v) {
  return [(1-v*v)/(1+v*v), 2*v/(1+v*v)];
}

/**
 * Returns f(x), where f is the unique polynomial which satisfies
 * f(0) = f0, f'(0) = df0
 * f(1) = f1, f'(1) = df1
 */
function cubic(f0, df0, f1, df1, x) {
  return f0 + x*(df0 + x*(-3*f0-2*df0-df1+3*f1 + x*(2*f0+df0+df1-2*f1)));
}


//- sincos function

/**
 * Returns approximated sine and cosine for a given angle
 */
function sincos(x) {
  x =...