JSFiddle - React, Tailwind, and code Playground

by Jesse Donat

HTML

<canvas id="canvas" width="600" height="600"></canvas>

JavaScript

var x = 10;
var initX = 190;
var initY = 300;
var canvas;
var ctx;

function draw_init() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    ctx.translate(300,300);
    ctx.strokeStyle = 'rgba(0,0,0,.4)';

    (function() {
        x += .05;
        draw(x);
    }).periodical(50);
}

var s = 1.8;

function draw(x) {
    ctx.clearRect(-300,-300,600,600);
    
    ctx.beginPath(); 
    ctx.arc(0, 0, 160, 0, Math.PI*2, true); 
    ctx.stroke();
    ctx.fill();
    
    for( var i=0; i <=30; i++ ) {
        
        ctx.fillStyle = 'rgba(' + parseInt((Math.sin(x + (i/.5) ) * 120)+128) + ',' + parseInt((Math.sin((x * .9) + (i/.5) ) * 120)+128) + ',' + parseInt((Math.sin((x*.8) + (i/.5)) * 120)+128) + ',0.8)';
        
        ctx.save();
        //ctx.rotate(x * (2 + (i / 10)) );
        ctx.rotate(x + (i / 8) );
        ctx.beginPath();  
        ctx.moveTo(0,0);
        ctx.bezierCurveTo(-300, 0, 0, -300, 0, 0);
        ctx.bezierCurveTo( 300, 0, 0,  300, 0, 0);
        //ctx.bezierCurveTo( 300, 0, 0, -300, 0, 0);
        //ctx.bezierCurveTo(-300, 0, 0,  300, 0, 0);
        ctx.closePath();
        ctx.restore();
    
        ctx.fill();
        ctx.stroke();
    }
    

}

draw_init();