JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<div id="container"></div>

CSS

body {
    margin: 0;
    padding: 0;
    background: #73839b;
}

#container {
    width: 600px;
    height: 600px;
    margin: 0 auto;
}

JavaScript

var start = Date.now();


var end = Date.now();

var width = 600, height = 600;

var canvas = window.canvas = new ART(width, height);

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);

var logo = new ART.Group;

var cow = new...