JSFiddle - React, Tailwind, and code Playground

by Piotr Zalewa

HTML

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

CSS

body
{
    background-color: #000;
    margin: 0px;
    overflow: hidden;
}

JavaScript

var container,canvas,context, mouseX, mouseY, smurf,centerX,centerY,sinus,cosinus, angle, theta, width, height,_angles;
var RADIUS = 200;
var NUMBER_ITEM = 36;
var SRC = 'http://www.stuffwelike.com/stuffwelike/wp-content/uploads/2008/01/smurfs_village.jpg';

init();


function init()
{
    container = document.getElementById('container');

    width = window.innerWidth;
    height = window.innerHeight;
    
    width = 600;
    height = 600;
    canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;

    container.appendChild(canvas);

    context = canvas.getContext("2d");
 
    
    
    smurf = new Image();  
    smurf.onload = function() { 
    
        sinus = Math.sin(Math.PI/(NUMBER_ITEM/2));  
        cosinus = Math.cos(Math.PI/(NUMBER_ITEM/2));
        
        centerX= smurf.width / 2;
        centerY= smurf.height / 2;
        
       
        
        context.translate(centerX,centerX);
        
        angle = 360 / NUMBER_ITEM;
        theta= angle / 180 * Math.PI / 2;
        lineX = Math.sin(theta) * RADIUS;
        lineY = Math.cos(theta) * RADIUS;
        
        _angles = [];
        for (var i= 0; i < NUMBER_ITEM; i++)
        {
            _angles[i] = 0;
        }
        setInterval(loop, 1500 / 60);
        //loop();
    }
    smurf.src = SRC;
    
    
    mouseX = 0;
    mouseY = 0;
    window.addEventListener('mousemove', onMouseMove, false);
}
function loop() 
{
    //context.transform(cosinus, sinus, -sinus, cosinus, 0, 0);
    //context.clearRect(0, 0, centerX+width, centerX+height);
    for (var i= 0; i < NUMBER_ITEM; i++)
    {
    context.save();
    context.beginPath();  
    context.lineTo(0, 0);
    context.lineTo(lineX, - lineY);  
    context.lineTo(- lineX, - lineY);
    context.closePath();
    context.fill();
    context.clip();
    context.rotate( _angles[i]);
    if (i % 2 == 0)
    {
        _angles[i] += 0.01;
    } else {
        _angles[i] -= 0.01 
    }
   ...