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

rendered animation

Only CSS: Polygon Fish

1<div class="camera -x"><div class="camera -y"><div class="camera -z"><div class="under-sea"><div class="blowing-bubbles"><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div></div><div class="swiming-fishes"><div class="swim"><div class="depth"><div class="rotate"><div class="fish-component"><div class="shadow"></div><div class="fish"><div class="fish-body"><div class="half -left"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div><div class="half -right"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div></div><div class="fish-tail"><div class="scale -top"></div><div class="scale -bottom"></div></div></div></div></div></div></div><div class="swim"><div class="depth"><div class="rotate"><div class="fish-component"><div class="shadow"></div><div class="fish"><div class="fish-body"><div class="half -left"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div><div class="half -right"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div></div><div class="fish-tail"><div class="scale -top"></div><div class="scale -bottom"></div></div></div></div></div></div></div><div class="swim"><div class="depth"><div class="rotate"><div class="fish-component"><div class="shadow"></div><div class="fish"><div class="fish-body"><div class="half -left"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div><div class="half -right"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div></div><div class="fish-tail"><div class="scale -top"></div><div class="scale -bottom"></div></div></div></div></div></div></div><div class="swim"><div class="depth"><div class="rotate"><div class="fish-component"><div class="shadow"></div><div class="fish"><div class="fish-body"><div class="half -left"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div><div class="half -right"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div></div><div class="fish-tail"><div class="scale -top"></div><div class="scale -bottom"></div></div></div></div></div></div></div><div class="swim"><div class="depth"><div class="rotate"><div class="fish-component"><div class="shadow"></div><div class="fish"><div class="fish-body"><div class="half -left"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div><div class="half -right"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div></div><div class="fish-tail"><div class="scale -top"></div><div class="scale -bottom"></div></div></div></div></div></div></div><div class="swim"><div class="depth"><div class="rotate"><div class="fish-component"><div class="shadow"></div><div class="fish"><div class="fish-body"><div class="half -left"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div><div class="half -right"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div></div><div class="fish-tail"><div class="scale -top"></div><div class="scale -bottom"></div></div></div></div></div></div></div><div class="swim"><div class="depth"><div class="rotate"><div class="fish-component"><div class="shadow"></div><div class="fish"><div class="fish-body"><div class="half -left"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div><div class="half -right"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div></div><div class="fish-tail"><div class="scale -top"></div><div class="scale -bottom"></div></div></div></div></div></div></div><div class="swim"><div class="depth"><div class="rotate"><div class="fish-component"><div class="shadow"></div><div class="fish"><div class="fish-body"><div class="half -left"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div><div class="half -right"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div></div><div class="fish-tail"><div class="scale -top"></div><div class="scale -bottom"></div></div></div></div></div></div></div><div class="swim"><div class="depth"><div class="rotate"><div class="fish-component"><div class="shadow"></div><div class="fish"><div class="fish-body"><div class="half -left"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div><div class="half -right"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div></div><div class="fish-tail"><div class="scale -top"></div><div class="scale -bottom"></div></div></div></div></div></div></div><div class="swim"><div class="depth"><div class="rotate"><div class="fish-component"><div class="shadow"></div><div class="fish"><div class="fish-body"><div class="half -left"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div><div class="half -right"><div class="scale -top -front"></div><div class="scale -top -back"></div><div class="scale -bottom -front"></div><div class="scale -bottom -back"></div></div></div><div class="fish-tail"><div class="scale -top"></div><div class="scale -bottom"></div></div></div></div></div></div></div></div></div></div></div></div>