JSFiddle - React, Tailwind, and code Playground

by Ehsan Ziya

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.4.0/two.js"></script>
<svg id='test' xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
<path fill="#fff" d="M 91.5,309 C 91.5,308.997 63.186,315.296 63.186,315.296 C 63.186,315.296 79.883,289.361 79.883,289.361 C 79.883,289.361 99,245.989 99,245.989 C 99,245.989 41.794,221.051 41.794,221.051 C 41.794,221.051 6.661,165.673 6.661,165.673 C 6.661,165.673 2.307,95.593 2.307,95.593 C 2.307,95.593 28.872,40.44 28.872,40.44 C 28.872,40.44 84.242,6.375 84.242,6.375 C 84.242,6.375 153.15,2.751 153.15,2.751 C 153.15,2.751 195.162,23.911 195.162,23.911 C 195.162,23.911 218.968,25.476 218.968,25.476 C 218.968,25.476 200.899,42.256 200.899,42.256 C 200.899,42.256 145.9,36.7 145.9,36.7 C 145.9,36.7 97.048,49.861 97.048,49.861 C 97.048,49.861 69.59,81.336 69.59,81.336 C 69.59,81.336 60.694,125.451 60.694,125.451 C 60.694,125.451 78.831,158.713 78.831,158.713 C 78.831,158.713 103.691,161.677 103.691,161.677 C 103.691,161.677 192.062,73.793 192.062,73.793 C 192.062,73.793 238.47,67.368 238.47,67.368 C 238.47,67.368 284.431,93.409 284.431,93.409 C 284.431,93.409 305.113,77.538 305.113,77.538 C 305.113,77.538 335.818,67.081 335.818,67.081 C 335.818,67.081 373.433,79.831 373.433,79.831 C 373.433,79.831 436.3,155.716 436.3,155.716 C 436.3,155.716 459.1,159.952 459.1,159.952 C 459.1,159.952 478,134.48 478,134.48 C 478,134.48 476.231,88 476.231,88 C 476.231,88 450.819,51.731 450.819,51.731 C 450.819,51.731 415.2,39.7 415.2,39.7 C 415.2,39.7 386.384,44.701 386.384,44.701 C 386.384,44.701 350.4,41.851 350.4,41.851 C 350.4,41.851 345.3,30.5 345.3,30.5 C 345.3,30.5 375.1,18.8 375.1,18.8 C 375.1,18.8 399,6.7 399,6.7 C 399,6.7 435.6,4.215625 435.6,4.215625 C 435.6,4.215625 489.5,25.2 489.5,25.2 C 489.5,25.2 527.4,77.7 527.4,77.7 C 527.4,77.7 532.3,152.2 532.3,152.2 C 532.3,152.2 499.6,212.8 499.6,212.8 C 499.6,212.8 453.6,235.9 453.6,235.9 C 453.6,235.9 454.8,253.6 454.8,253.6 C 454.8,253.6 467.6,255.2...

CSS

#test{
    visibility: hidden;
}

JavaScript

var two = new Two({
    fullscreen: true,
    autostart: true
}).appendTo(document.body);


var rects = [];
var colors = ['#ff0000', '#00ff00', '#0000ff', '#F0F8FF', '#8A2BE2'];

for (var i = 0; i < 50; i++) {
    (function () {
        var randomX = Math.random() * 500 - 250;
        var randomY = Math.random() * 500 - 250;
        var rect = two.makeRectangle(two.width / 2 + randomX, two.height / 2 + randomY, 50, 50);
        two.update();
        rect.fill = 'black';
        rect.opacity = Math.random();
        rects.push(rect);
        rect._renderer.elem.addEventListener('click', function (e) {
            rect.fill = 'red';
        });
    }());
}

var image = document.getElementById('test');
var shape = two.interpret(image).center();
shape.translation.x = two.width / 2;
shape.translation.y = two.height / 2;
two.update();
shape.scale = 0.5;
shape._renderer.elem.addEventListener('click',function(){


    
    for (var i in shape.children) {
        shape.children[i].fill = colors[Math.floor(Math.random() * colors.length)];
        for(var j = 0; j < shape.children[i].vertices.length; j++){
           shape.children[i].vertices[j].x += Math.random() * 20 - 10;
        }
    }
});
two.bind('update', function () {
//    shape.rotation += 0.01;
    for (var i = 0; i < rects.length; i++) {
        rects[i].rotation += Math.random() * 0.01;
    }
});