JSFiddle - React, Tailwind, and code Playground

by muthusamy

HTML

<script src="https://raw.github.com/paperjs/paper.js/master/dist/paper.js"></script>
<canvas id="canvas" resize keepalive="true" style='height: 200; width: 200;'></canvas>
<script>(function(){var s="script",n='\n',d=document,b=d.getElementsByTagName(s)[2].innerHTML.split(n);d.write('<'+s+' type="text/paperscript" canvas="canvas">'+b.slice(2,b.length-2).join(n)+'</'+s+'>')})()</script>

JavaScript

var propellers = 3;
var speed = 2.5;

var centerPoint = new Point(180, 150);

var centerCircle = new Path.Circle(centerPoint, 13);
centerCircle.fillColor = '#000';

var size = new Size(75, 10);
var point = new Point(centerPoint);
var path = new Path.Rectangle(point, size);
path.fillColor = '#ccc';

var symbols = [];

var symbol = {};
for (var x = 0; x < propellers; x++) {
    symbol = new Symbol(path).place(centerPoint);
    symbol.position += new Point(42, 0);
    symbol.rotate((360 / propellers) * x, centerPoint);

    symbols.push(symbol);
}

function onFrame(event) {
    for (var x = 0; x < symbols.length; x++) {
        symbols[x].rotate(speed, centerPoint);
    }
}