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

rendered animation

Only CSS: Donut Twist

1<div id="donut"><div class="wrapper"><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div><div class="block"><div class="panels"><div class="panel front"></div><div class="panel back"></div></div></div></div></div>