animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back

rendered animation

Only CSS: Disco Ball

1<div class="container"><div class="monitor"><div class="camera -z"><div class="camera -y"><div class="camera -x"><div class="mirrorball"><div class="particles"><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div></div><div class="line"><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div></div><div class="line"><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div></div><div class="line"><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div></div><div class="line"><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div></div><div class="line"><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div></div><div class="line"><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div></div><div class="line"><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div></div><div class="line"><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div></div><div class="line"><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div></div><div class="line"><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div></div><div class="line"><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div></div><div class="line"><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div></div><div class="line"><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div></div><div class="line"><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div></div><div class="line"><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div><div class="plate"><div class="surface"></div></div></div></div></div></div></div></div></div>