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

rendered animation

Only CSS: Calcifer

1<div class="fire"><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div><div class="ball_wrapper"><div class="ball"></div></div></div><div class="filter"></div><div class="face"><div class="eye -left"><div class="pupil"></div></div><div class="eye -right"><div class="pupil"></div></div><div class="mouth"></div></div>