JSFiddle - React, Tailwind, and code Playground

by eprouver

HTML

<div ng-app="app">
    <drawing></drawing>
    <drawing></drawing>
    <drawing></drawing>
    <drawing></drawing>
    <drawing></drawing>
    <br/>
    <drawing></drawing>
    <drawing></drawing>
    <drawing></drawing>
    <drawing></drawing>
    <drawing></drawing>
    <br/>
    <drawing></drawing>
    <drawing></drawing>
    <drawing></drawing>
    <drawing></drawing>
    <drawing></drawing>
    <br/>
    <button onclick="angular.element(this).scope().draw()">{{test}}</button>
</div>
<div class="hide">
    <svg id="test" ng-click="colorize()" width="40" height="80" xmlns="http://www.w3.org/2000/svg">
        <g>
            <path d="m22.28572,5.71429c-0.28572,0 -0.85714,0 -1.71429,0c-1.42857,0 -2.28571,0 -2.57143,0c-0.85714,0 -1.75106,-0.24839 -2.57143,0c-0.98596,0.29852 -1.4515,0.3745 -2.28571,0.57143c-0.62179,0.14678 -1.37841,0.31368 -1.71429,0.85714c-0.15021,0.24304 -0.359,0.22771 -0.57143,0.57143c-0.475,0.76857 -0.97597,1.64602 -1.42857,2.57143c-0.39696,0.81164 -0.4168,1.6267 -0.57143,2c-0.32801,0.7919 -0.14178,1.68794 -0.28572,2.85714c-0.10473,0.85072 0,1.71429 0,2.28571c0,0.85714 0,1.14286 0,2c0,0.85714 -0.28571,1.71428 -0.28571,2.57143c0,0.57143 0,1.42857 0,2.28572c0,0.85714 0.85714,2.57143 1.71429,4.28571c0.57143,1.14286 0.37057,1.60395 1.14286,2.28572c0.47895,0.42281 1.31257,0.718 2,1.14286c0.76857,0.475 1.47408,0.17447 2.28571,0.57143c0.92541,0.4526 1.73318,0.47495 3.42857,0.85714c2.02911,0.45742 4.56548,0.71423 9.71428,0.85714c1.42802,0.03963 1.78133,-0.0435 2,-0.57143c0.15463,-0.37331 0.72833,-0.84433 1.71428,-1.14286c0.27346,-0.0828 0.57143,0 1.14286,-0.57143c0.28572,-0.28572 1.00551,-1.01662 1.71429,-2c0.37356,-0.51828 0.28571,-0.85714 0.28571,-1.71428c0,-0.57143 -0.0425,-1.7525 0.28572,-3.14286c0.14678,-0.62179 0.28571,-1.14286 0.28571,-2c0,-0.85714 0.13964,-2.00856 0,-3.14286c-0.14394,-1.1692 -0.20898,-2.02197 -0.57143,-3.14286c-0.47338,-1.46398 -1.05127,-2.44889 -1.71428,-3.71429c-0.41933,-0.80031 -0.58534,-2.08261...

CSS

body {
    background:black;
}
.hide {
    display:none;
}
.cell {
    display: inline-block;
}
path {
    -webkit-transition: stroke 1s ease;
}

JavaScript

var app = angular.module('app', [])

app.run(function ($rootScope) {
    $rootScope.test = 'Draw';
    $rootScope.draw = function () {
        $rootScope.$broadcast('startDraw');
    }
});

app.directive('drawing', function ($compile) {
    return {
        restrict: 'E',
        scope: true,
        template: '<div class="cell"></div>',
        controller: function ($scope, $element) {
            var ids = ['test', 'test1', 'test2', 'test3'];

            $compile(document.getElementById(ids[~~ (Math.random() * ids.length)]))($scope, function (el) {
                $element[0].appendChild(el[0]);
                var nl = $element[0].querySelectorAll('path');
                $scope.paths = []; // Will hold the array of Node's
                for (var i = 0, ll = nl.length; i != ll; $scope.paths.push(nl[i++]));
                $element[0].style.display = 'none';
                console.log(el[0].querySelectorAll('svg path'));
            });

            $scope.draw = function () {
                color = false;
                $element[0].style.display = '';
                $scope.paths.forEach(function (path, i) {
                    path.setAttribute('stroke', '#FFFFFF');
                    var length = path.getTotalLength();

                    path.style.transition = path.style.WebkitTransition =
                        'none';
                    path.style.strokeDasharray = length + ' ' + length;
                    path.style.strokeDashoffset = length;
                    // Trigger a layout so styles are calculated & the browser
                    // picks up the starting position before animating
                    path.getBoundingClientRect();
                    path.style.transition = path.style.WebkitTransition =
                        'stroke-dashoffset 2s ease-in-out ' + 2 * i + 's';
                    // Go!
                    path.style.strokeDashoffset = '0';
                });
            };

            $scope.$on('startDraw',...