JSFiddle - React, Tailwind, and code Playground

by Evan Raskob

HTML

<div id="canvas"></div>

CSS

#canvas {
    width:300px;
    height:200px;
    border:1px black solid;
}

JavaScript

// Very simple ticking clock hand example using svg.js
// Also demonstrated arcs


// by Evan Raskob
// https://twitter.com/evanraskob

// Note from Evan: I cut and pasted the SVG.easing code directly into
// this example instead of including it
//
// svg.easing.js 0.2 - Copyright (c) 2013 Wout Fierens - Licensed under the MIT license
SVG.easing = {
    backIn: function (e) {
        var t = 1.70158;
        return e * e * ((t + 1) * e - t);
    },
    backOut: function (e) {
        e = e - 1;
        var t = 1.70158;
        return e * e * ((t + 1) * e + t) + 1;
    },
    bounce: function (e) {
        var t = 7.5625,
            n = 2.75,
            r;
        if (e < 1 / n) {
            r = t * e * e;
        } else {
            if (e < 2 / n) {
                e -= 1.5 / n;
                r = t * e * e + .75;
            } else {
                if (e < 2.5 / n) {
                    e -= 2.25 / n;
                    r = t * e * e + .9375;
                } else {
                    e -= 2.625 / n;
                    r = t * e * e + .984375;
                }
            }
        }
        return r;
    },
    elastic: function (e) {
        if (e == !! e) return e;
        return Math.pow(2, -10 * e) * Math.sin((e - .075) * 2 * Math.PI / 0.3) + 1;
    }
};
// end SVG.easing



// create svg drawing paper
var draw = SVG('canvas');

var rotations = 0; // total degee to rotate

var degreesPerMilliSec = 360 / 60; // degrees to rotate each second


// create the seconds pointer
var myShape = draw.rect(20, 50)
    .move(50, 100)
    .fill("#990099")
    .stroke("#007700");

var myArc = draw.path(makeArcString(0, 0, 80, 0, 20, 20, 0, 0, 0))
    .move(50, 10)
    .fill("#990099")
    .stroke("#007700")
    .size(100, 100);

//var otherArc = draw.path("M 200 175 A 25 25 0 0 0 217.678 217.678");

//
// return object with x,y
//
function calcCircleXY(cx, cy, r, degrees) {
    var angleInRadians = degrees * Math.PI / 180.0;
    var x = cx + r *...