JSFiddle - React, Tailwind, and code Playground

by GlauberRocha

HTML

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://paperjs.org/static/js/paper.js"></script>
<script type="text/paperscript" canvas="myCanvas">
var path = new Path(new Point(20, 20), new Point(50, 50));
path.style = {
    strokeColor: 'red',
    strokeWidth: 10,
    strokeCap: 'round'
};

// Create a symbol from the path:
var symbol = new Symbol(path);
var specialItem = {};

// Place 30 instances of the symbol in the project in random
// positions in the view:
for (var i = 0; i < 30; i++) {
    var position = view.size * Point.random();
    var placed = symbol.place(position);
    if (i === 0) {
        specialItem = placed;
        specialItem.scale(3);      
        specialItem.strokeColor = "green";
    }
}

function onFrame(event) {
    // Each frame, rotate the definition
    // of the symbol by 1 degree:
    symbol.definition.rotate(1);

    // Add 0.2 degrees to the stroke color's hue:
    symbol.definition.strokeColor.hue += 0.2;
    
    specialItem.rotate(-2);
}
</script>
</head>
<body>
  <canvas id="myCanvas" resize></canvas>
</body>
</html>