JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<script src="http://mad4milk.net/art/mootools-art.js"></script>
<div id="container"></div>

CSS

#container {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    border: solid 1px red;
}

JavaScript

var canvas = window.canvas = new ART(300, 300);

var rays = new ART.Group();

var rh = 50, rw = width / 2;

(18).times(function(i){
    var ray = new ART.Shape('M'+rw+','+(rh/2)+'l-'+rw+','+(rh/2)+'v-'+rh+'L'+rw+','+(rh/2)+'z');
    ray.translate(0, rw - (rh / 2));
    ray.rotate(i * 20, rw, rh / 2);
    ray.fillLinear(['#73839b', '#7a8ba2', '#73839b'], 180);
    ray.inject(rays);
});

var step = 0;

(function(){
    step += 0.1;
    if (step == 360) step = 0;
    rays.rotate(step, width / 2, height / 2);
}).periodical(50);

rays.inject(canvas);

$(canvas).inject($('container'));