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

rendered animation

Only CSS: Hole

1<div class="hole"><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="wall"></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="line"><div class="line_1"></div><div class="line_2"></div></div><div class="gradient"></div></div>