JSFiddle - React, Tailwind, and code Playground

by hakim

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
   viewBox="0 0 1200 800"
   preserveAspectRatio="xMidYMid"
   style="width:100%; height:100%; position:absolute; top:0; left:0;">
    <path d="M200,200 " id="arc" fill="none" stroke="blue" stroke-width="5" />
</svg>

       <script>
           document.createSVGElement = function( type ) {

    // Create the node in SVG's namespace
    var element = document.createElementNS( QWIKI.qvg.util.SVGUtil.SVG_NAMESPACE, type );

    // Attribute manipulation
    element.attr = function( a, b ) {
        // Set multiple properties
        if( typeof(a) === 'object' ) {
            for( var i in a ) {
                this.attr( i, a[i] );
            }
        }
        // Read one property
        else if( typeof(a) === 'string' && b === undefined ) {
            return this.getAttribute( b );
        }
        // Set one property
        else {
            // Automatically pick up XLINK namespace
            if( a && a !== null && a.indexOf( 'xlink' ) === 0 ) {
                this.setAttributeNS( QWIKI.qvg.util.SVGUtil.XLINK_NAMESPACE, a, b );
            }
            else { 
                this.setAttribute( a, b );
            }
        }

        return element;
    };

    // CSS manipulation
    element.css = function( a, b ) {
        if( arguments.length === 1 ) {
            $(this).css( a );
        }
        else {
            $(this).css( a, b );
        }

        return this;
    };

    // DOM tree
    element.appendTo = function( parent ) {
        if( parent && !!parent.appendChild ) {
            parent.appendChild( this );
        }
        else {
            $( this ).appendTo( parent );
        }

        return this;
    }

    return element;

};
           
           (function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
       ...

JavaScript

var ProgressWheel = {
    init: function() {
        this.currentProgress = 0;
        this.targetProgress = 0;
        
        this.redraw = redraw.bind( this );
        
        this.createDOMElement();
    },
    
    createDOMElement: function() {
        this.svgElement = document.createSVGElement( 'svg' )
                                .attr({
                                    'xmlns': 'http://www.w3.org/2000/svg',
                                    'xmlns:xlink': 'http://www.w3.org/1999/xlink',
                                    'version': '1.1',
                                    'preserveAspectRatio': 'xMidYMid'
                                })
                                .appendTo( this.domElement );
    },
    
    redraw: function() {
        requestAnimationFrame( this.redraw );
        
        var i = 0;      
        var circle = document.getElementById("arc");
        var angle = 0;
        var radius = 100;
        
        angle += 5;  
        angle %= 360;
        angle = progress * 360;  
        var radians = (angle/180) * Math.PI;
        var x = 200 + Math.cos(radians) * radius;
        var y = 200 + Math.sin(radians) * radius;
        var e = circle.getAttribute("d");
        if(i==0) {
            var d = e+ " M "+x + " " + y;
        }
        else {
            var d = e+ " L "+x + " " + y;
        }  
        circle.setAttribute("d", d);
        i++;
    }
}
            
ProgressWheel.init();
ProgressWheel.targetProgress = 1;
ProgressWheel.redraw();