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

rendered animation

svg loading animation

1<svg
2	 width="1000" height="1000" viewBox="0 0 1000 1000"
3	 xmlns="http://www.w3.org/2000/svg" version="1.1"
4	 xmlns:xlink="http://www.w3.org/1999/xlink">
5	<g transform="translate(500,500)">
6		<rect class="rotate-45 rotate-back" x=-5 y=-5 width=10 height=10 stroke="black" stroke-width=20 fill="none"/>
7		<rect class="rotate-45 rotate" x=-50 y=-50 width=100 height=100 stroke="black" stroke-width=20 stroke-linejoin="bevel" fill="none"/>
8		<g transform="translate(-50,0) rotate(-45)"><polyline class="left" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="black" stroke-width=20 fill="none"/></g>
9		<g transform="translate(50,0) rotate(135)"><polyline class="right" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="black" stroke-width=20 fill="none"/></g>
10		<text y=-140 text-anchor="middle" font-weight="bold" font-size="3em" font-family="sans-serif">loading...</text>
11	</g>
12</svg>