Tweaking two.js

<!DOCTYPE html>
<meta charset='UTF-8'>
<title>Benchmark</title>
<link rel="stylesheet" href="/darosh/raw/a71ff1c9d6e163e2faea/style.css">

#arrow {
        transform: rotate(30deg);
    }

#arrow polyline {
        animation-name: svg-arrow;
        animation-duration: 3s;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        transform: translate(44px, 32px) rotate(90deg);
        fill: #fff;
    }

#arrow path {
        animation-name: svg-path;
        animation-duration: 3s;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        stroke-dasharray: 4, 4;
        stroke-dashoffset: -2;
        fill: none;
        stroke: #fff;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

@keyframes svg-arrow {
        0% {
            fill: #fff;
            transform: translate(44px, 0px) rotate(90deg);
        }

33% {
            transform: translate(44px, 32px) rotate(90deg);
            fill: #333;
        }

66% {
            fill: #333;
        }

100% {
            fill: #fff;
        }
    }

@keyframes svg-path {
        0% {
            stroke: #fff;
            stroke-dashoffset: -2;
            transform: translateY(-32px);
        }

33% {
            transform: translateY(0px);
            stroke-dashoffset: -34;
            stroke: #333;
        }

66% {
            transform: translateY(0px);
            stroke: #333;
            stroke-dashoffset: -34;
        }

100% {
            stroke: #fff;
            transform: translateY(32px);
            stroke-dashoffset: -66;
        }
    }

/* Why? Why? Because MS Edge. Cry, cry. :-( */
    _:-ms-lang(x), #arrow {
        display: none;
    }
</style>

<body>

window.requestAnimationFrame = function () {
        window.requestAnimationFrame = window._requestAnimationFrame;
    };
</script>

<div class="cloak block pull-left aside">
        <div class="controls block-label top">
            <div id="filter-object">object: <span class="list"></span></div>
            <div id="filter-count">count: <span class="list"></span></div>
        </div>
        <svg id="pack" width="413" height="400" class="container"></svg>
    </div>
</div>

<div class="cloak block pull-right">
    <table id="result">
        <thead>
        <tr>
            <th rowspan="2">Framework</th>
            <th rowspan="2">Renderer</th>
            <th rowspan="2">Object</th>
            <th id="version" rowspan="2">Version</th>
            <th class="group">Count / FPS</th>
        </tr>
        <tr class="objects"></tr>
        </thead>
        <tbody></tbody>
    </table>

<div class="controls block-label  bottom pull-left">
        <span id="reset" class="btn click">reset</span>
        <a id="share" class="btn click" href="./" target="_blank">share</a>
    </div>

<div id="link" class="controls block-label bottom pull-right"><a href="#" target="_parent">open in a new window</a>
    </div>

<div id="note" class="block-label bottom pull-right">click FPS value to run single test</div>

try {
        d3.select(self.frameElement).style('height', document.body.getBoundingClientRect().height + 'px');
    } catch (ign) {
    }
</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/two.js/0.5.0/two.min.js