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

rendered animation

Animated - Jumping I

1<div class="container">
2
3	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 71" style="overflow:visible;">
4		<g id="letter-i" fill="none" fill-rule="evenodd">
5			<path id="top-bar" fill="#DE007B" d="M5.1515 8.924H4c.0063-.0887-.0073-1.184.644-2.4055.327-.607.8436-1.2515 1.6308-1.736.784-.4872 1.8196-.7854 3.0525-.7825h21.3454c.096.0058 1.282-.0067 2.6036.5954.6567.302 1.354.7797 1.878 1.5072.5273.7247.8498 1.682.8457 2.8215v2.152c-.0063.089.0073 1.184-.643 2.406-.328.608-.8436 1.253-1.6307 1.737-.785.486-1.8196.785-3.0536.782H9.3273c-.096-.005-1.281.007-2.6026-.594-.6566-.303-1.354-.78-1.879-1.508-.5262-.724-.8488-1.681-.8457-2.821V8.924h2.303v2.152c.003.7892.2025 1.2804.4593 1.6413.38.5326.9928.8337 1.5753.9958.286.08.5512.121.736.14l.2098.017.046.002-.002.061v-.06h.002l-.002.061v-.06h21.3453c.855-.003 1.3853-.187 1.7758-.4243.5762-.3512.903-.9176 1.0773-1.455.0856-.2645.1305-.5105.1514-.6813l.0188-.194.001-.0412.0668.001h-.0668v-.001l.0668.001h-.0668V8.924c-.003-.7892-.2025-1.2804-.4583-1.6403-.381-.5336-.9928-.8347-1.5753-.9958-.286-.081-.5522-.121-.737-.141l-.2098-.017-.045-.002.001-.061v.06h-.001l.001-.061v.06H9.3274c-.854.003-1.3854.187-1.7747.4243-.5773.3512-.903.9176-1.0774 1.456-.0866.2644-.1305.5095-.1524.6813l-.018.193-.002.042-.066-.002h.066v.002l-.066-.002h.066-1.152"/>
6			<path id="bottom-bar" fill="#009FEE" d="M5.1515 59.9698H4c.006-.0926-.007-1.1937.6218-2.426.3174-.6128.818-1.2642 1.58-1.7544.761-.4912 1.7632-.7923 2.9547-.7894h21.687c.0962.0068 1.2386-.0067 2.5172.6003.6358.305 1.3116.7874 1.8203 1.5228.5106.733.822 1.7.819 2.847v2.06c-.006.093.007 1.194-.6228 2.428-.3164.612-.817 1.264-1.58 1.754-.76.492-1.7632.793-2.9537.79H9.1565c-.0962-.0052-1.2386.008-2.5172-.599-.6358-.306-1.3116-.787-1.8203-1.5222-.5106-.7335-.822-1.6995-.819-2.848v-2.06h2.303v2.06c.003.783.192 1.2634.4324 1.6166.1823.2636.4095.463.668.6235.3844.24.844.379 1.2014.4455.1792.034.3304.05.4305.058l.108.0067h.0192l-.006.343v-.343h.006l-.006.343v-.343h21.687c.811-.003 1.3107-.1853 1.676-.417.2745-.1755.4807-.3945.648-.6435.2493-.3706.3934-.8135.4615-1.158.035-.172.052-.3185.061-.414l.006-.1052.001-.018.3555.0055h-.3554v-.0057l.356.0055h-.355v-2.06c-.004-.782-.192-1.2636-.432-1.6158-.183-.2643-.409-.463-.668-.6233-.384-.2407-.844-.3796-1.202-.446-.178-.034-.329-.05-.429-.058l-.108-.007-.02-.001.007-.3426v.3426h-.007l.007-.342v.3422H9.157c-.812.004-1.311.185-1.677.417-.2737.1764-.48.3945-.647.6435-.2495.3707-.3936.8146-.4627 1.159-.034.172-.052.3176-.06.414l-.007.1043v.019l-.354-.007h.355v.007l-.355-.007h.3544-1.152"/>
7			<g id="middle-bar" fill="#3FA033">
8				<path id="Fill-2072" d="M18.322 59.019h4V12h-4z"/>
9				<path id="Fill-2073" d="M20.322 12.291v1.103c2.224 0 4.032-1.797 4.033-4.022-.001-2.225-1.809-4.021-4.033-4.021-2.225 0-4.032 1.796-4.033 4.021.001 2.225 1.808 4.022 4.033 4.022v-2.206c-1.012-.002-1.825-.817-1.827-1.816.002-.999.815-1.814 1.827-1.815 1.012.001 1.825.816 1.827 1.815-.002.999-.815 1.814-1.827 1.816v1.103"/>
10				<path id="Fill-2074" d="M20.322 64.66v1.103c2.224-.001 4.032-1.797 4.033-4.022-.001-2.225-1.809-4.021-4.033-4.022-2.225.001-4.032 1.797-4.033 4.022.001 2.225 1.808 4.021 4.033 4.022v-2.206c-1.012-.002-1.825-.817-1.827-1.816.002-.999.815-1.814 1.827-1.816 1.012.002 1.825.817 1.827 1.816-.002.999-.815 1.814-1.827 1.816v1.103"/>
11			</g>
12		</g>
13	</svg>
14
15</div>