<div class="svg-fun-stuff">
<h1>SVG Animations by <a href="https://showcase.erikwoods.com" target="_blank">Erik Woods</a></h1>
<p>The art was provided to me. I optimized them all in Illustrator to organize parts in order to make animation easier, then I wrote the CSS Keyframe animations and CSS Transition animations by hand when I worked for Quicken Loans.</p>
<p>Hover for animation.</p>
<!-- bow -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.2 97.2"><g class="i-bow"><circle cx="48.6" cy="48.6" r="43.2" fill="#F9A028" stroke="#F37C28" stroke-width="7" stroke-miterlimit="10" class="i-bow-bg"/><circle cx="48.6" cy="48.6" r="43.2" fill="none" stroke="#ED6A57" stroke-miterlimit="10" stroke-dasharray="1.995 1.995" class="i-bow-dash"/><g class="i-bow-main"><path fill="#495779" d="M47.1 12.7s.1.3.2.9c.1.2.2.5.4.8.1.2.2.3.3.5.1.2.3.3.5.5.7.7 1.8 1.5 3.1 2.4 1.3.9 2.9 1.8 4.6 3 .9.6 1.7 1.3 2.6 2.1.2.2.4.4.7.6.2.2.4.5.6.7l.3.4.3.4.5.7c.3.5.7.9 1 1.4.3.6.6 1.2 1 1.7.7 1.2 1.1 2.4 1.6 3.6.9 2.5 1.6 5.2 2 7.9.4 2.8.5 5.5.6 8.3 0 2.6-.2 5.5-.6 8.2-.2 1.4-.4 2.7-.8 4.1-.2.7-.3 1.3-.6 2-.2.6-.5 1.3-.7 1.9-1 2.5-2.3 4.8-3.8 6.7-.5.5-.9 1-1.4 1.4-.5.4-.9.8-1.4 1.2-.9.7-1.8 1.3-2.7 1.9-1.7 1.1-3.3 2-4.6 2.9-1.3.9-2.3 1.7-2.9 2.5-.6.8-.9 1.6-1.1 2.1-.1.6-.2.9-.2.9v.1c-.1.3-.4.5-.6.4-.3-.1-.4-.3-.4-.5v-1.1c0-.7.2-1.7.8-2.9.6-1.2 1.6-2.4 2.9-3.5 1.3-1.2 2.7-2.3 4.3-3.5.8-.6 1.5-1.3 2.2-2 .4-.3.7-.7 1-1.1.3-.4.6-.7.9-1.1 1.2-1.7 2.1-3.8 2.8-6 .7-2.2 1.1-4.6 1.5-7 .3-2.5.4-4.9.4-7.7 0-2.5-.1-5.1-.4-7.6-.1-1.2-.4-2.4-.6-3.6-.1-.6-.3-1.2-.4-1.7-.2-.6-.3-1.2-.5-1.7-.4-1.1-.7-2.2-1.2-3.1-.2-.5-.4-1-.6-1.4l-.9-1.5c-.1-.2-.3-.5-.4-.7l-.1-.2h-.2c.1.2 0 0 0 .1l-.2-.3-.4-.6-.5-.6c-.6-.7-1.3-1.4-2-2-1.4-1.3-2.9-2.4-4.1-3.5-1.3-1.1-2.4-2.2-3.1-3.3-.8-1.1-1-2.2-1.2-3v-1c0-.4.3-.8.8-.8.3.1.6.3.7.7z"/><path fill="none" stroke="#495779" stroke-miterlimit="10" d="M46.4 13.7L20.5 48.4l25.8 35.1"/></g><g class="i-bow-arrow"><path fill="none" stroke="#52ABD3" stroke-miterlimit="10" d="M26.3 48.4h45.3" stroke-linecap="round"/><path fill="#52ABD3" d="M26.7 47.9l-2.5-4.2h-1.1l2.4 4.2h-1.1L22 43.7h-1.2l2.5 4.2h-1.2l-2.4-4.2h-1.2l2.5 4.2h-1.2v1H21l-2.5 4.2h1.2l2.4-4.2h1.2l-2.5 4.2H22l2.4-4.2h1.1l-2.4 4.2h1.1l2.5-4.2m52-.5l-10 4 2.4-4-2.4-4.1"/></g></g></svg>
<!-- flash -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.2 97.2"><g class="i-flash"><ellipse cx="48.6" cy="48.2" fill="#676767" class="i-flash-bg" rx="43.2" ry="42.8"/><path fill="#A6A8AC" d="M79.7 29.4c0-6.5-5.3-11.7-11.8-11.7-6.5 0-11.8 5.2-11.8 11.7 0 .8.1 1.7.3 2.5-2.2-1-4.8-1.5-7.7-1.5-2.9 0-5.5.5-7.7 1.5.2-.8.3-1.6.3-2.5 0-6.5-5.3-11.7-11.8-11.7s-11.8 5.2-11.8 11.7S23 41.1 29.5 41.1c1.5 0 3-.3 4.3-.8-.5 1.4-.9 3-1.1 4.7-1.1 7.8.2 14.5 7.3 17.4 0 0 .9.3.8 1.6v.4s-.1.2-.3.5c-2.8.4-4.2 1.1-5.6 2-1.7 1-7.1 9.4-11.5 14.9 1.7.8 3.3 1.6 4.9 2.5.8-.8 1.7-1.7 2.5-2.6-.5 1.2-1 2.5-1.3 3.7 2.2.5 4.4 1.7 6 4.1-.4-.5-.7-.9-.9-1.2-.5-.3-.7-.9 0 0 .1.1.3.2.4.2.2 0 1.5.5 1.9.6 1.8.6 3.5 1.4 5.3 1.9.2 0 .3.1.5.1 4.1-.8 8.3-.9 12.5-1.5 4.6-.6 8.5-2.4 12.7-2.8-.2-1.6-.7-3.1-1.3-4.7.7.7 1.4 1.4 2 2.1 1.8-.6 3.7-1.2 5.5-1.8-4.4-5.6-10.1-14.5-11.9-15.5-1.3-.8-2.7-1.5-5.3-1.9-.2-.4-.4-.6-.4-.7v-.2c0-1.3.8-1.6.8-1.6 7.1-2.8 8.4-9.6 7.3-17.4-.2-1.8-.6-3.3-1.1-4.7 1.3.5 2.8.8 4.3.8 6.6-.1 11.9-5.3 11.9-11.8z"/><path fill="#D2D3D4" d="M36.9 89.1c1.8.6 3.5 1.4 5.3 1.9.2 0 .3.1.5.1 4.1-.8 8.3-.9 12.5-1.5 2.2-.3 4.2-.9 6.2-1.4C60.3 81.3 55 76 48.5 76c-6.6 0-12 5.5-12.9 12.5.4.2 1.1.5 1.3.6z"/><ellipse cx="29.2" cy="29.4" fill="#FAC8CA" rx="7" ry="6.9"/><ellipse cx="67.8" cy="29.4" fill="#FAC8CA" rx="7" ry="6.9"/><g fill="#FFF" class="i-flash-eyes"><ellipse cx="55.7" cy="44.3" rx="4.3" ry="4.2"/><ellipse cx="41.3" cy="44.3" rx="4.3" ry="4.2"/></g><path fill="#FFF" d="M46 57.8h-.8v3.4h3.2v-4c-.6.4-1.4.6-2.4.6zm5 0c-1 0-1.8-.2-2.3-.6v4h3.2v-3.4H51z"/><path d="M59.7 63.3l-8.5 2c-.2-.7-.8-1.3-1.6-1.3h-2.3c-.8 0-1.4.5-1.5 1.2l-8.5-2 .1 5.1 8.5-2c.3.5.8.9 1.4.9h2.3c.6 0 1.1-.4 1.4-.9l8.5 2 .2-5z"/><g fill="#010101" class="i-flash-pupils"><ellipse cx="41.7" cy="44.8" rx="2.3" ry="2.2"/><ellipse cx="55.3" cy="44.8" rx="2.3" ry="2.2"/></g><path fill="#A6A8AC" d="M44.1 55.8h9.4v2h-9.4z"/><path fill="#FFF" stroke="#D2D3D4" stroke-width=".226" stroke-miterlimit="10" d="M66.6 53.9c.3.2.4.8-.4 1.1L55 54.7c-.1-.2-.1-.2 0-.5l11.6-.3zm-1 3.1c.3.1.4.9-.7.9l-10.2-2.1c-.1-.2.1-.3.2-.4L65.6 57z" class="i-flash-whiskersR" stroke-linejoin="round"/><path fill="#FFF" stroke="#D2D3D4" stroke-width=".226" stroke-miterlimit="10" d="M30.5 53.9c-.3.2-.4.8.4 1.1l11.3-.2c.1-.2.1-.2 0-.5l-11.7-.4zm1 3.1c-.3.1-.4.9.7.9l10.2-2.1c.1-.2-.1-.3-.2-.4L31.5 57z" class="i-flash-whiskersL" stroke-linejoin="round"/><path fill="#FAC8CA" d="M45.8 51.8c1.6-.3 4.2-.2 5.4.1 1 .2.8 1.5 0 2.6s-2.2 1.9-2.8 2.1c-1-.6-2.1-1-3-2.2-.5-.9-.7-2.4.4-2.6z" class="i-flash-nose"/><g class="i-flash-glasses"><path d="M23.9 47.8c-.3 0-.6-.2-.7-.6-.1-.4.1-.9.5-1l6-2.2c.4-.1.8.1 1 .5.1.4-.1.9-.5 1l-6 2.2c-.1.1-.2.1-.3.1zm48.9-.2h-.2l-5.8-1.8c-.4-.1-.7-.6-.5-1 .1-.4.6-.7 1-.5L73 46c.4.1.7.6.5 1-.1.4-.4.6-.7.6zm-25.5-5h2.3v3.2h-2.3z"/><ellipse cx="38.8" cy="43.5" fill="none" stroke="#000" stroke-width="1.737" stroke-miterlimit="10" rx="8.7" ry="8.6"/><ellipse cx="58.2" cy="43.5" fill="none" stroke="#000" stroke-width="1.737" stroke-miterlimit="10" rx="8.7" ry="8.6"/></g><path fill="#A6A8AC" d="M51.1 82.6c.3-.4 1.3-.1 2.4.1s-.9 1.6-.9 1.6-1.8-1.3-1.5-1.7zm-6.3 0c-.3-.4-1.3-.1-2.4.1s.9 1.6.9 1.6 1.8-1.3 1.5-1.7z"/><path fill="#F6DC64" d="M48.8 6.5h-1.6C38.1 7 26 13 26 13l14.2 58.5 7.7 1.5s0-.1.1-.4c0 .2.1.4.1.4l7.7-1.5L70 13.1s-12.1-6-21.2-6.6z" class="i-flash-light" opacity=".35"/><path fill="#52ABD3" d="M55.7 71.6H40.3v3.3l3.3 4v9.2c0 2 1.7 3.7 3.7 3.7h1.4c2.1 0 3.7-1.7 3.7-3.7v-9.2l3.3-4v-3.3z"/><path fill="#A6A8AC" d="M70.8 80l-.4-.4c-4.6 1.3-12.5 3.4-13.9 3.5-.9.1-2.1-.3-3.2-.5l-.8 1.5c.3.2.5.5.5.8.1 1-3.9-.4-5 2-1.1-2.5-5.1-1-5-2 0-.3.2-.6.5-.8l-.8-1.5c-1.1.3-2.3.6-3.2.5-1.4-.1-9.3-2.2-13.9-3.5l-.4.4c-2 1.8-3 3.8-3.9 5.7 6.2.8 15.3 1.6 18.5 3 0 0 3.3 1.1 4.8 1.4.9.1 2.8-.2 3.4-1.2.7 1.1 2.5 1.4 3.4 1.2 1.6-.3 4.8-1.4 4.8-1.4 3.1-1.4 12.2-2.2 18.5-3-.9-1.9-2-3.8-3.9-5.7z"/><ellipse cx="48" cy="71.6" fill="#FAC61E" class="i-flash-lightBase" rx="7.7" ry=".5"/><ellipse cx="48.6" cy="48.2" fill="none" stroke="#212221" stroke-width="7" stroke-miterlimit="10" class="i-flash-border" rx="43.2" ry="42.8"/><ellipse cx="48.6" cy="48.2" fill="none" stroke="#676767" stroke-miterlimit="10" stroke-dasharray="1.985 1.985" rx="43.2" ry="42.8" class="i-flash-dash"/></g></svg>
<!-- paint -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.2 97.2"><g class="i-paint"><circle cx="48.6" cy="48.6" r="43.2" fill="#DB3B29" stroke="#ED6A57" stroke-width="7" stroke-miterlimit="10" class="i-paint-bg"/><circle cx="48.6" cy="48.6" r="43.2" fill="none" stroke="#DB3B29" stroke-miterlimit="10" stroke-dasharray="1.995 1.995" class="i-paint-dash"/><g class="i-paint-main"><path fill="#F37C28" d="M40.4 57.8c.4 1.1 7.9-1.5 13.4-3.7-.9-1.2-2.1-2.1-2.9-3.3-4.7 2.3-11 5.7-10.5 7z" class="i-paint-brushRBtm"/><path fill="#F37C28" d="M42.4 54.3c-1.3 1.6-2.6 3.1-2.3 3.4.4.5 5.4-2.9 10.9-7-.8-1.2-1.3-3.6-1.5-3.5s-4.9 4.5-7.1 7.1z" class="i-paint-brushLBtm"/><path fill="#FAC61E" d="M69.8 55.7c-3.6-4.3-9-1.9-12.1-6.2-3.8-5.3 2.5-11.4-.3-17.3-3.6-7.3-19.9-10.6-31.2-3.8-10.7 6.5-12 19-12.1 20.1-1.2 13.9 9.5 25 19 29.8 11 5.5 28.1 6.4 35.3-3.1 4.2-5.5 5.4-14.8 1.4-19.5zm-15.7-.2c-1.7.6-4-1.2-5.1-4.1-1.1-2.9-.6-5.7 1.1-6.4 1.7-.6 4 1.2 5.1 4.1 1.1 2.9.6 5.8-1.1 6.4z"/><path fill="#F37C28" d="M66.7 45.3c-.6-1-5.3.7-8.8 2.2-1.9.8-3.6 1.5-4 1.7-.9.4-2.1 1-3.4 1.6.8 1.3 2 2.1 2.9 3.3 1.9-.7 3.5-1.4 4.5-1.9.1-.1.3-.1.4-.2 3.5-1.6 9.1-5.6 8.4-6.7z"/><path fill="#66769D" d="M62.9 45.7l1.6-1.1 1.5 3.1-1.9.7"/><path fill="#495779" d="M64.7 43.5c.7-2.2 3.4-3.2 5.2-3.3 4.9-.1 8 6.1 7.5 6.7-.3.4-2.2-1.7-4.4-1.1-1.7.5-1.6 2-3.3 2.5-1.6.5-3.9-.3-4.8-2-.7-1.3-.2-2.7-.2-2.8z"/><path fill="#F37C28" d="M66.7 36.7c-.4-.7-5.7 1.7-12 6.3-1.8 1.3-3.6 2.7-5.4 4.3.2 1.2.7 2.3 1.5 3.5.3-.2 4.4-3.4 6-4.7 5.6-4.5 10.4-8.8 9.9-9.4z"/><path fill="#66769D" d="M62.9 37.9l2-1.5 1.9 2-2.4 1.2"/><path fill="#495779" d="M66.4 38.3c-2.1-1.2-2.5-5.3-1-7.3 1.9-2.4 6-1.1 7.9-4.1.8-1.3.7-2.4.9-2.4.6 0 2.6 6.7-.7 10.9-1.6 2.1-5 4.1-7.1 2.9z"/><path fill="#1BB899" d="M58 66.8c-1.4.8-.4 3.1-2.3 4.9-1.4 1.2-2.6.7-3.3 1.8-.8 1.4 0 4.1 1.8 5.1 2.4 1.3 5.6-1.4 6.9-2.4 1.6-1.3 3.7-3 3.4-5.2-.5-3.2-4.8-5.2-6.5-4.2z" class="i-paint-color5"/><path fill="#52ABD3" d="M42.6 77.2c.6-1-2.2-3.2-1.5-4.3.5-.9 2.3 0 3.5-1.1.9-.9 1.3-2.7.6-3.5-.8-1-2.4.2-6.9.4-2.8.1-3.6-.3-4.4.5-1.3 1.1-1.4 3.3-.7 4.9 1.5 4 8.7 4.5 9.4 3.1z" class="i-paint-color4"/><path fill="#F9A028" d="M27.3 55.4c-3.6-.3-4.8-1.3-5.9-.4-.9.8-1.1 2.3-.9 3.4.5 2 2.3 2 2.9 4.2.4 1.5-.2 2 .4 3 .8 1.4 3 2.3 4.3 1.6 1.6-.8.4-3.2 2.4-5.5 1.2-1.4 2.3-1.3 2.9-2.7.4-1 .3-2.4-.4-3.2-1-.9-2.3-.1-5.7-.4z" class="i-paint-color3"/><path fill="#9465AB" d="M19.2 44c-.4 2.4 2.5 5.6 4.2 5.3.8-.2 1.5-1.5 2.7-4.2 1.1-2.3 1.2-3.2 2.3-3.7 1.2-.6 2.3.2 2.7-.4.5-.7-.3-2.4-1.3-3.4-1.5-1.5-4.3-2.3-5.9-1.3-1.1.8-.6 1.7-1.9 4-1.4 2.3-2.5 2.3-2.8 3.7z" class="i-paint-color2"/><path fill="#F27FAB" d="M41.5 28.9c-1.8-.3-3.1-.2-4.8-.2-3.1.1-4.7.1-5 .8-.5 1 .7 2.6 2 4.2 1.5 1.9 2.2 2.8 3.5 3.2 3.3 1.1 6.7-2.3 7.2-2.7.7-.7 2.5-2.4 2-3.7-.5-1-2.2-1.2-4.9-1.6z" class="i-paint-color1"/></g></g></svg>
<!-- canoe -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 97.2 97.2"><g class="i-canoe"><circle cx="48.6" cy="48.6" r="43.2" fill="#A2D6F4" class="i-canoe-bg"/><path fill="#52ABD3" d="M6.3 62c6.2 17.4 22.8 29.8 42.3 29.8 19.5 0 36.1-12.4 42.3-29.8H6.3z"/><g class="i-canoe-main"><ellipse cx="45.6" cy="45.6" fill="#ED6A57" rx="5.8" ry="2.3"/><path fill="#F37C28" d="M48.3 59.1c22.7 1.1 28.6-7.8 28.6-7.8l2.4 7.3-27 7.3-35.7-4.7 2.8-10.9c0-.1 6.1 7.7 28.9 8.8z"/><path fill="#A6A8AC" d="M59 30.6c0-2.9-2.3-5.2-5.2-5.2-2.9 0-5.2 2.3-5.2 5.2 0 .4 0 .7.1 1.1-1-.4-2.1-.7-3.4-.7-1.3 0-2.4.2-3.4.7.1-.4.1-.7.1-1.1 0-2.9-2.3-5.2-5.2-5.2s-5.2 2.3-5.2 5.2 2.3 5.2 5.2 5.2c.7 0 1.3-.1 1.9-.4-.2.6-.4 1.3-.5 2.1-.5 3.4.1 6.4 3.2 7.6 0 0 .4.1.4.7v.2s-.1.1-.2.3c-1.2.2-1.8.5-2.4.9-1 .6-5 7.2-6.8 8.6 0 0-1.1 1-1.5 1.6-.3.4-.7 1.7.3 1.9 1.4.4 1.7-1.7 2.1-1.5.4.3.1 1.2.4 1.3.4.2.5-1.5 1-2.2.2-.4 1.5-1.7 2.8-3-.4 1-.7 1.9-.7 2.9-.1 1.8.4 4.3 1.1 6.8.7.3 1.6.5 2.4.6 4.1.3 8.6.4 12.5-.9.6-2.4 1.1-4.8 1-6.5 0-1.5-.6-3.1-1.5-4.6 2.5-4-2.5-5.8-3.3-5.8 0-.3-.1-.4-.1-.4v-.1c0-.6.4-.7.4-.7 3.1-1.2 3.7-4.2 3.2-7.6-.1-.8-.3-1.5-.5-2.1.6.2 1.2.4 1.9.4 2.8-.1 5.1-2.4 5.1-5.3z"/><ellipse cx="45.4" cy="57.6" fill="#D2D3D4" rx="5.7" ry="6.4"/><circle cx="37" cy="30.6" r="3" fill="#FAC8CA"/><circle cx="53.9" cy="30.6" r="3" fill="#FAC8CA"/><path fill="#FFF" d="M44.3 43.1h-.4v1.5h1.4v-1.7c-.1.1-.5.2-1 .2zm2.2 0c-.4 0-.8-.1-1-.3v1.7h1.4V43c-.1.1-.2.1-.4.1z"/><g fill="#FFF" class="i-canoe-eyes"><circle cx="48.6" cy="37.2" r="1.9"/><circle cx="42.3" cy="37.2" r="1.9"/></g><g fill="#010101" class="i-canoe-pupils"><circle cx="42.5" cy="37.4" r="1"/><circle cx="48.4" cy="37.4" r="1"/></g><path fill="#A6A8AC" d="M43.5 42.3h4.1v.9h-4.1z"/><path fill="#FFF" stroke="#D2D3D4" stroke-width=".098" stroke-miterlimit="10" d="M53.4 41.4c.1.1.2.3-.2.5l-4.9-.1v-.2l5.1-.2zm-.5 1.4c.1.1.2.4-.3.4l-4.4-.9c0-.1 0-.1.1-.2l4.6.7z" class="i-canoe-whiskersR" stroke-linejoin="round"/><path fill="#FFF" stroke="#D2D3D4" stroke-width=".098" stroke-miterlimit="10" d="M37.6 41.4c-.1.1-.2.3.2.5l4.9-.1v-.2l-5.1-.2zm.4 1.4c-.1.1-.2.4.3.4l4.4-.9c0-.1 0-.1-.1-.2l-4.6.7z" class="i-canoe-whiskersL" stroke-linejoin="round"/><path fill="#FAC8CA" d="M44.3 40.5c.7-.1 1.8-.1 2.4 0 .4.1.4.7 0 1.1-.4.5-.9.8-1.2.9-.4-.2-.9-.5-1.3-1-.3-.3-.4-.9.1-1z" class="i-canoe-nose"/><path fill="#A6A8AC" d="M57.6 60.8c-1.6-3.2-6.6-.7-6.6-.7s-3.4 2.4-5.5 3.7c-2.1-1.4-5.5-3.7-5.5-3.7s-5-2.6-6.6.7c-1.6 3.2.4 4.9 2.5 5.6.7.3 2.1.4 3.6.5v.2c0 .2.1.4.3.6v.3c0 .3.1.5.3.6v.1c0 .4.3.6.7.7h.5c1.1-.2 3.1-2 3.8-2.3.1 0 .2 0 .5-.1.2 0 .4 0 .5.1.7.2 2.7 2.1 3.8 2.3h.5c.4-.1.7-.3.7-.7v-.1c.2-.1.3-.4.3-.6v-.3c.2-.1.3-.3.3-.6v-.2c1.5-.1 2.9-.2 3.6-.5 1.8-.7 3.9-2.4 2.3-5.6z"/><path fill="#F9A028" d="M19.6 50.2s-1.5 12.7 28.8 12.7 28.7-11.7 28.7-11.7c10.3 3.6 8.2 9.7 7.6 11.7-.7 2-4.9 7-36.7 7s-35.3-6.1-36-9c-.4-1.8 0-7.8 7.6-10.7z"/><path fill="#ED6A57" d="M53.4 53.8c-3.6-.9-2.5-7-2.5-7s-1.4-.7-1.7-.5L45.5 51l-3.7-4.7c-.3-.2-1.7.5-1.7.5s1.1 6.1-2.5 7c-.6 1.9-.5 5.4-.5 5.4s7.2 2.2 7.9 1.8c.2-.1.3-.3.4-.4.1.2.2.3.4.4.7.3 7.9-1.8 7.9-1.8.5-1.2.3-3.5-.3-5.4z"/><defs><path id="a" d="M53.4 53.8c-3.6-.9-2.5-7-2.5-7s-1.4-.7-1.7-.5L45.5 51l-3.7-4.7c-.3-.2-1.7.5-1.7.5s1.1 6.1-2.5 7c-.6 1.9-.5 5.4-.5 5.4s7.2 2.2 7.9 1.8c.2-.1.3-.3.4-.4.1.2.2.3.4.4.7.3 7.9-1.8 7.9-1.8.5-1.2.3-3.5-.3-5.4z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path fill="#D64355" d="M54.2 54.8H36.9s2.2.4 4.7.7c0 .3.2.6.5.6l.7.1c.3 0 .6-.2.6-.5.8.1 1.6.1 2.3.1 3.2 0 8.5-1 8.5-1z" clip-path="url(#b)"/><path fill="#FAC61E" d="M45 48.3c-.2.1-.4.7-.6 1.3L28 61.6c-1.3 0-3.4.3-3.7.5l-7.5 5.5c-.5.4-.6 1-.2 1.5l1.6 2.2c.4.5 1 .6 1.5.2l7.5-5.5c.3-.2 1.2-2.1 1.6-3.4l16.5-12.1c.6 0 1.2-.1 1.3-.1.2-.1-1.3-2.4-1.6-2.1z"/><path fill="#A6A8AC" d="M52.9 49.2c.1 3.3-2.1 3.2-3.4 3.9-1.1.5-8.4 2.6-10.2 3.8 0 0-1.3.8-2 1-.5.2-1.8.2-1.8-.8.1-1.4 2.2-1.1 2-1.5-.1-.5-1.1-.4-1.1-.8 0-.5 1.6 0 2.4-.3.8-.2 7-3.4 7-3.4l5-4.3c.1 0 2 1.8 2.1 2.4zm-20.2 6.5s-1.1 1-1.5 1.6c-.3.4-.7 1.7.3 1.9 1.4.4 1.8-1.7 2-1.6"/><path fill="#F27FAB" d="M45.2 32.3l-2.4-4-1 3.2c-.1-.1-.3-.1-.5 0l-.7.3c-.2.1-.3.2-.3.4l-3-1 1.1 3.8 2.2-2.2c.2.1.4.1.6.1l.7-.3c.2-.1.3-.2.3-.4l3 .1z"/></g><circle cx="48.6" cy="48.6" r="43.2" fill="none" stroke="#3C8EB9" stroke-width="7" stroke-miterlimit="10" class="i-flash-border_1_"/><circle cx="48.6" cy="48.6" r="43.2" fill="none" stroke="#A2D6F4" stroke-miterlimit="10" stroke-dasharray="1.995 1.995" class="i-canoe-dash"/></g></svg>
<!-- fire -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.2 97.2"><g class="i-fire"><circle cx="48.6" cy="48.6" r="43.2" fill="#65769D" stroke="#495778" stroke-width="7" stroke-miterlimit="10" class="i-fire-bg"/><circle cx="48.6" cy="48.6" r="43.2" fill="none" stroke="#66769D" stroke-miterlimit="10" stroke-dasharray="1.995 1.995" class="i-fire-dash"/><path fill="#725431" d="M71.1 70.5c2.5-1 3.9-3.8 3.1-6.5-.8-2.8-3.8-4.5-6.7-3.6L48.8 66 29 62.5c-2.9-.5-5.7 1.5-6.2 4.4-.5 2.8 1.4 5.5 4.1 6.1-1.4 1.3-2 3.4-1.4 5.3.8 2.8 3.8 4.5 6.7 3.6l17.2-5.1 17.2 2.9c2.9.5 5.7-1.5 6.2-4.4.4-1.8-.4-3.6-1.7-4.8z"/><path fill="#F47C28" d="M43.7 15s4 4.9 2.7 8.5c-1.3 3.6-17 7.1-16.7 12.1s6.6 5.8 5.1 9.4-10.8 4.5-9.5 13 23.8 11 23.8 11S69.2 63.7 71 53.8c1.8-9.8-12.1-12.4-13-18.5s3.3-7.6.9-13.7c-2.4-6-15.2-6.6-15.2-6.6z" class="i-fire-main5"/><path fill="#F9A027" d="M49.1 69c-8.1-1.1-21.5-5.5-20.4-12.3 1.1-6.8 13.1-11 13.2-14.1.1-3.1-9-3.7-8.7-6.2.3-2.5 17.7-7.1 17.2-11.7s-2.5-7.4-2.5-7.4 7.6 1.4 8.5 6.2-4.6 5.9-4.4 11.1c.2 5.2 19.8 6.9 4 14.5-7.1 3.8 12.8-3.3 13.7 1.5.8 5.4-13 17.7-20.6 18.4z" class="i-fire-main4"/><path fill="#F6DC64" d="M51.2 56.8c-14.7 2.6 7-12.8 3.5-13.6-6.3-1.4-9.7-3.7-10.2-6.9-.4-3.2 10.2-6.7 10.2-10.4s-2.8-4.6-2.8-4.6 1.2 2 .7 5.5S38 34.4 38 36.6c0 2.2 7.2 2.2 7.8 5.2.6 3-5.3 5.7-5.3 5.7-.2.1-.3.1-.3.2-.2.3-9.2 5.9-8.3 11.1.9 5.1 16.2 9.4 16.7 9.4h.5c2.5-1 12.5-8.8 13.5-11.7 1.3-3.6 1.4-1.9-11.4.3z" class="i-fire-main3"/><path fill="#FAC61D" d="M38 32s10.8 7.4 10.2 10.9c-.7 3.5-18.3 5.3-18.8 10.5S36.8 66.5 49.1 69c11.1-2.7 17.8-13.3 15.8-16.8s-12.2 4-14 .2 7.9-5 7.6-10.5S38 32 38 32z" class="i-fire-main2"/><path fill="#F6DC64" d="M46 54.4c.7 4.4 15.4-1.8 13.7 2.8-1.6 4.6-10 11.7-10 11.7s-13.5-8.2-13-11.2 5.3 1.5 6.2-.8-8.9-2.2-5.7-5.5 12.1-5.5 14.3-8.2c2.2-2.8-7.3-8.6-7.3-8.6s12.3 4.5 12.5 7.9c.1 3.3-11.5 7.5-10.7 11.9z" class="i-fire-main1"/></g></svg>
<!-- map -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.2 97.2"><g class="i-map"><ellipse cx="48.6" cy="48.6" fill="#F27FAB" class="i-map-bg" opacity=".7" rx="43.2" ry="43.2"/><g class="i-map-armsMap"><path fill="#A6A8AC" d="M31.4 39.3s-1.6 0-1.6.5.8 1.2.8 1.2l.8-1.7zm32.8-.2s1.6 0 1.6.5-.8 1.2-.8 1.2l-.8-1.7z"/><path fill="#F6DC64" d="M34 50.9l-9.3-29.5L47.8 26l20.9-4.6-5.5 29.5-14.6-5.4"/><path fill="none" stroke="#F9A028" stroke-width=".25" stroke-miterlimit="10" d="M65.3 24.5c-2.3 1.4-3.2 3.8-6.1 4.3-1.7.3-3.4.1-5 0-2.6-.1-5.2 0-7.8-.3-2.6-.3-5-1.2-7.6-1.7-3.6-.7-8.9-3.5-10.8-2.3s2.2 4.8 2.9 4.7c2.2-.3 4.9 2.4 6.2 3.9.8 1 .8 1.6-.2 2.2-1 .6-1.7 1.3-2.1 2.3-.4 1.1-.5 2.3-.6 3.5 0 .4-.1.7.1 1.1.2.5.7.8 1.1 1.1 1.7.9 3.8.9 5.6.2 2.5-1.1 4.1-3.5 6.6-4.7 3-1.3 6.3-1.6 9.5-2.1 1-.2 2-.3 3-.2 1 .1 2 .6 2.6 1.4.7 1 .5 2.4.1 3.6-.1.3-.2.5-.3.8-.3.4-.7.6-1.1.7-1.4.5-3 .4-4.3-.3-1.3-.8-2.1-2.2-2.1-3.7 0-1.6 1-3 2.2-4 1.4-1.1 4.3-2.9 6.1-2" stroke-dasharray="1 1"/><path fill="#A6A8AC" d="M65.8 39.7c-1 .5-1.3 2.2-1.8 1.9-.5-.3-.1-1.6-.6-1.7-.6-.2-.7 2-1.3 3s-7.2 7.7-7.2 7.7L48 53.4l-.1.1-.1-.1-6.9-2.8s-6.6-6.7-7.2-7.7c-.6-1-.7-3.2-1.3-3-.5.2 0 1.4-.6 1.7-.4.3-.8-1.4-1.8-1.9-.4 3.8 1 4.9 1 4.9 2.5 2.3 7.5 10.5 8.9 11.3 1.4.8 2.8 1.4 7.7 1.5-4.6-.1-.5-3.2.4-3.9.9.6 5.1 3.8.4 3.9 4.9-.1 6.4-.7 7.7-1.5 1.3-.8 6.4-9.1 8.9-11.3-.1 0 1.2-1.1.8-4.9z"/></g><path fill="#138972" d="M11.1 63.2c5.5 15.4 20.2 26.5 37.5 26.5s32-11.1 37.5-26.5h-75z"/><path fill="#A6A8AC" d="M60.7 87.2c-.5-.6-3.1-1.3-5.8-1.5-.9-1.2 4.8-14.8 4.4-21.1 0-3.1-1.9-6.5-4.2-9.2 0 0-2.4-5.1-2.6-5.2v-.1c0-.8.5-1 .5-1l-5.1.7-5.3-.8s.5.2.5 1v.2c-.1.1-2.9 5.6-2.9 5.6-2.2 2.6-3.9 5.8-3.9 8.8-.4 6.3 5.3 19.9 4.4 21.1-2.7.2-5.3.9-5.8 1.5-.2.2-.7.9-.7 2.2 0 .9.6 1.6 1.4 1.6.2 0 .5-.1.7-.2.2.5.7.9 1.2.9.3 0 .6-.1.9-.4.2.3.6.5.9.5.4 0 .4-.1.7-.1 2.4-.5 4.8-1.2 5.2-1.6.8-.7 2-11.1 2.1-12.5h1c.2 1.4 1.4 11.7 2.1 12.5.4.4 2.8 1.1 5.2 1.6.2 0 .3.1.7.1s.7-.2.9-.5c.2.2.5.4.9.4.5 0 1-.4 1.2-.9.2.1.4.2.7.2.7 0 1.4-.7 1.4-1.6 0-1.2-.5-2-.7-2.2z"/><path fill="#A6A8AC" d="M46.7 67.3c1-.1 2.1-.2 3.1 0s2 .8 2.5 1.7c1 1.9-.4 4.5 1 6.2.7.9 2 1.1 3.1 1.3 1.1.2 3 .7 3.5 1.7.2.5.2.7.2 1.2 0 1.1-1.4 3.4-1 3.5.4.1 1.9-2.7 1.9-3.8 0-.5 0-1-.2-1.5-.5-1-2.1-1.4-3.2-1.6-1.1-.2-2.3-.4-3.1-1.3-1.4-1.6 0-4.3-1-6.2-.5-.9-1.6-1.7-1.9-2.6-.3-1-2.7.8-3.7.9l-1.2.5z" class="i-map-tail"/><g class="i-map-head"><path fill="#FFF" stroke="#D2D3D4" stroke-width=".133" stroke-miterlimit="10" d="M59.5 43.9c.2.1.3.5-.2.6l-6.7-.1v-.3l6.9-.2zm-.6 1.9c.2.1.3.5-.4.5l-6-1.3c0-.1 0-.2.1-.2l6.3 1z" class="i-map-whiskersR" stroke-linejoin="round"/><path fill="#FFF" stroke="#D2D3D4" stroke-width=".133" stroke-miterlimit="10" d="M36.2 43.9c-.2.1-.2.5.2.7l6.7-.1v-.3l-6.9-.3zm.6 1.9c-.2.1-.3.5.4.5l6-1.3c0-.1 0-.2-.1-.2l-6.3 1z" class="i-map-whiskersL" stroke-linejoin="round"/><g class="i-map-glasses"><circle cx="42.1" cy="37.7" r="5.2" fill="none" stroke="#000" stroke-width="1.025" stroke-miterlimit="10"/><circle cx="53.6" cy="37.7" r="5.2" fill="none" stroke="#000" stroke-width="1.025" stroke-miterlimit="10"/><path d="M33.3 40.3c-.2 0-.4-.1-.4-.3-.1-.3 0-.5.3-.6l3.5-1.3c.2-.1.5 0 .6.3.1.3 0 .5-.3.6l-3.5 1.3h-.2zm28.8-.1H62L58.6 39c-.2-.1-.4-.4-.3-.6.1-.3.3-.4.6-.3l3.4 1.1c.3.1.4.4.3.6-.1.2-.3.4-.5.4z"/></g><path fill="#A6A8AC" d="M59.2 22.3c-3.9 0-7 3.1-7 7 0 .5.1 1 .2 1.5-1.3-.6-2.8-.9-4.6-.9-1.7 0-3.3.3-4.6.9.1-.5.2-1 .2-1.5 0-3.9-3.1-7-7-7s-7 3.1-7 7 3.1 7 7 7c.9 0 1.7-.2 2.5-.5-.3.8-.5 1.8-.7 2.8-.8 6.1.7 11.2 9.5 11.2s10.3-5.1 9.5-11.2c-.1-1-.4-2-.7-2.8.8.3 1.6.5 2.5.5 3.9 0 7-3.1 7-7s-2.9-7-6.8-7z"/></g><path fill="#F9A028" d="M58.6 48.3C58 47 56 44.2 47.8 44.2c-8.2 0-10.1 2.7-10.8 4.1-.6 1.4-2.3 18.6-1 20.6.5.7 1.7.9 2.5 1.1 1.4.3 2.8.3 4.1.4 3.5.1 7 .1 10.4 0 1.4 0 2.8-.1 4.1-.3.8-.1 2-.3 2.5-1.1 1.3-2.1-.4-19.3-1-20.7z"/><path fill="#F37C28" d="M53.1 68.2H42.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5h10.6c2.5 0 4.5 2 4.5 4.5s-2 4.5-4.5 4.5z"/><path fill="none" stroke="#F37C28" stroke-width="1.498" stroke-miterlimit="10" d="M55.9 57.2s.4-3-.7-3.9c-.5-.4-3.7-.8-7.4-.7-3.6-.1-6.9.3-7.4.7-1.1.9-.7 3.9-.7 3.9" stroke-linecap="round" stroke-linejoin="round"/><path fill="#52ABD3" d="M54.7 46.7H41c-1.8 0-3.3-1.5-3.3-3.3 0-1.8 1.5-3.3 3.3-3.3h13.7c1.8 0 3.3 1.5 3.3 3.3 0 1.8-1.5 3.3-3.3 3.3z"/><path fill="#F9A028" d="M51.9 40h-1.3c.5 1 .8 2.1.8 3.3s-.3 2.4-.8 3.3h1.3c.5-1 .8-2.1.8-3.3s-.3-2.3-.8-3.3zm-6.3 0h-1.3c.5 1 .8 2.1.8 3.3s-.3 2.4-.8 3.3h1.3c.5-1 .8-2.1.8-3.3S46 41 45.6 40z"/><path fill="none" stroke="#F37C28" stroke-width="1.498" stroke-miterlimit="10" d="M41.8 55.5h12" stroke-linecap="round" stroke-linejoin="round"/><ellipse cx="48.6" cy="48.6" fill="none" stroke="#D95893" stroke-width="7" stroke-miterlimit="10" class="i-map-border" rx="43.2" ry="43.2"/><ellipse cx="48.6" cy="48.6" fill="none" stroke="#F27FAB" stroke-miterlimit="10" stroke-dasharray="1.995 1.995" rx="43.2" ry="43.2" class="i-map-dash"/></g></svg>
<!-- music -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.2 97.2"><g class="i-music"><circle cx="48.6" cy="48.6" r="43.2" fill="#FAC61E" stroke="#F6DC64" stroke-width="7" stroke-miterlimit="10" class="i-music-bg"/><circle cx="48.6" cy="48.6" r="43.2" fill="none" stroke="#FAC61E" stroke-miterlimit="10" stroke-dasharray="1.995 1.995" class="i-music-dash"/><path fill="#3D8EBA" d="M56.1 27.4l-1.4 5.4-1.6 6.4-2.8 11.3c-1.2-1.1-3-2-5.2-2.2-4-.5-7.5 1.4-7.8 4.2-.3 2.7 2.7 5.3 6.7 5.8 3.5.4 6.6-1 7.5-3.2.1-.3 3.7-14.9 3.7-14.9L73 47.7l-3.5 14c-1.2-1.2-3-2-5.2-2.3-4-.5-7.5 1.4-7.8 4.2-.3 2.7 2.7 5.3 6.7 5.8 3.8.4 7.2-1.3 7.7-3.8l4.2-17 1.2-4.6 1.8-7.2-22-9.4z" class="i-music-noteR"/><path fill="#52ABD3" d="M27.5 34.3l10.7-1.1-.7-2.7-13.3 1.4 1.6 6.1 1 3.6 4.4 16.2c-1.8-.5-4.1-.3-6.3.6-4.2 1.7-6.6 5.5-5.4 8.4 1.2 2.9 5.6 3.8 9.7 2.1 3.7-1.5 6-4.6 5.7-7.3 0-.4-5.4-20.2-5.4-20.2l10.7-1.1-.8-3.1-10.7 1.1-.3-.9-.9-3.1z" class="i-music-noteL"/></g></svg>
<!-- binocs -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.2 97.2"><g class="i-binocs"><circle cx="48.6" cy="48.6" r="43.2" fill="#1BB899" class="i-binocs-bg"/><path fill="#A6A8AC" d="M79.7 29.6c0-6.5-5.3-11.8-11.8-11.8-6.5 0-11.8 5.3-11.8 11.8 0 .9.1 1.7.3 2.5-2.2-1-4.8-1.5-7.7-1.5-2.9 0-5.5.5-7.7 1.5.2-.8.3-1.6.3-2.5 0-6.5-5.3-11.8-11.8-11.8s-11.8 5.3-11.8 11.8S23 41.4 29.5 41.4c1.5 0 3-.3 4.3-.8-.5 1.4-.9 3-1.1 4.8-1.1 7.9.2 14.7 7.3 17.5 0 0 .9.3.8 1.6v.4c-.2.1-4.9 9.5-4.9 9.5-3.1 3.8-5.8 8.3-6.5 12.6 5.8 2.9 12.4 4.6 19.4 4.6 6.9 0 13.5-1.6 19.3-4.5-.7-4.7-3.6-9.5-7-13.5 0 0-4-8.7-4.4-8.9v-.2c0-1.3.8-1.6.8-1.6 7.1-2.9 8.4-9.7 7.3-17.5-.2-1.8-.6-3.4-1.1-4.8 1.3.5 2.8.8 4.3.8 6.4.1 11.7-5.2 11.7-11.8z"/><path fill="#D2D3D4" d="M48.5 76.8c-6.7 0-12.2 5.7-13 13 4.1 1.3 8.5 2 13.1 2 4.5 0 8.8-.7 12.9-2-.7-7.3-6.3-13-13-13z"/><circle cx="29.2" cy="29.6" r="7" fill="#FAC8CA"/><circle cx="67.8" cy="29.6" r="7" fill="#FAC8CA"/><path fill="#FFF" d="M46 58.3h-.8v3.5h3.2v-4c-.6.3-1.4.5-2.4.5zm5 0c-1 0-1.8-.2-2.3-.6v4h3.2v-3.5c-.3.1-.6.1-.9.1z"/><path d="M59.7 63.9l-8.5 2c-.1-.7-.8-1.2-1.5-1.2h-2.3c-.8 0-1.4.5-1.5 1.2l-8.5-2 .1 5.1 8.5-2c.3.5.8.9 1.4.9h2.3c.6 0 1.1-.4 1.4-.9l8.5 2 .1-5.1z"/><g fill="#FFF" class="i-binocs-eyes"><circle cx="55.7" cy="44.7" r="4.3"/><circle cx="41.3" cy="44.7" r="4.3"/></g><g fill="#010101" class="i-binocs-pupils"><circle cx="41.7" cy="45.2" r="2.3"/><circle cx="55.3" cy="45.2" r="2.3"/></g><path fill="#A6A8AC" d="M44.1 56.3h9.4v2h-9.4z"/><path fill="#FFF" stroke="#D2D3D4" stroke-width=".226" stroke-miterlimit="10" d="M66.6 54.4c.3.2.4.8-.4 1.1L55 55.2c-.1-.2-.1-.2 0-.5l11.6-.3zm-1 3.1c.3.1.4.9-.7.9l-10.2-2.2c-.1-.2.1-.3.2-.4l10.7 1.7z" class="i-binocs-whiskersR" stroke-linejoin="round"/><path fill="#FFF" stroke="#D2D3D4" stroke-width=".226" stroke-miterlimit="10" d="M30.5 54.4c-.3.2-.4.8.4 1.1l11.3-.2c.1-.2.1-.2 0-.5l-11.7-.4zm1 3.1c-.3.1-.4.9.7.9l10.2-2.2c.1-.2-.1-.3-.2-.4l-10.7 1.7z" class="i-binocs-whiskersL" stroke-linejoin="round"/><path fill="#FAC8CA" d="M45.8 52.3c1.6-.3 4.2-.2 5.4.1 1 .2.8 1.5 0 2.6s-2.2 1.9-2.8 2.1c-1-.6-2.1-1.1-3-2.2-.5-.9-.7-2.4.4-2.6z" class="i-binocs-nose"/><g class="i-binocs-glasses"><path d="M23.9 48.2c-.3 0-.6-.2-.7-.6-.1-.4.1-.9.5-1.1l6-2.3c.4-.1.8.1 1 .5.1.4-.1.9-.5 1.1l-6 2.3c-.1.1-.2.1-.3.1zm48.9-.2h-.2l-5.8-1.9c-.4-.1-.7-.6-.5-1 .1-.4.6-.7 1-.5l5.8 1.9c.4.1.7.6.5 1-.2.3-.5.5-.8.5z"/><circle cx="38.8" cy="43.9" r="8.7" fill="none" stroke="#000" stroke-width="1.737" stroke-miterlimit="10"/><path d="M47.3 43h2.3v3.3h-2.3z"/><circle cx="58.2" cy="43.9" r="8.7" fill="none" stroke="#000" stroke-width="1.737" stroke-miterlimit="10"/></g><g class="i-binocs-main"><path fill="#A6A8AC" d="M67.7 54.2c1.3 1.4 3.3 4.5 3.6 8 .3 3.5-4.7-4.5-4.7-4.5l.6-3.5h.5zm-38.1 0s-3.3 4.5-3.6 8c-.3 3.5 4.7-4.5 4.7-4.5l-.7-3.5h-.4z"/><circle cx="62.5" cy="68.2" r="9.1" fill="#495779"/><circle cx="34.8" cy="68.4" r="9.1" fill="#495779"/><ellipse cx="48.7" cy="59.3" fill="#212221" rx="3.7" ry="2.7"/><path fill="#FAC61E" d="M72.8 67.5c-.1-1.6-.5-3.1-1.5-4.5-2.7-3.8-5.4-7.7-8.1-11.6-.4-.6-1.1-1.2-1.7-1.6-.5-.3-1-.5-1.5-.7-.5-.4-1.2-.7-1.8-1-.3-.1-.4-.2-.4-.5 0-.9-.4-1.6-1.2-2-1.3-.7-3.2-.2-4.2 1-.5.6-.8 1.2-.6 1.9.2.9.4 1.8 0 2.8-.3.5-.6 1-.6 1.7 0 .1-.1.2-.2.4-.3-.5-.6-.9-1-1.3-.8-1-2.3-1-3.2-.1-.3.3-.5.7-.8 1-.1.1-.2.2-.3.4-.1-.1-.1-.2-.1-.2-.1-.7-.4-1.3-.7-1.8h.1c-.4-1-.3-2 0-2.9.1-.2 0-.5-.1-.7-.5-1.8-2.9-2.9-4.6-2.1-.8.4-1.3 1-1.3 1.9 0 .4-.1.6-.5.7-.5.2-1.1.5-1.5.8-1.4.4-2.6 1.2-3.5 2.5-2.6 3.8-5.2 7.5-7.8 11.2-.6.9-1.1 1.9-1.3 3-.1.4-.2.9-.3 1.3v2.3c0 .1.1.1.1.2.2 1.6.7 3.1 1.6 4.4 2.9 4.6 8.6 6.2 13.3 4 3.9-1.9 5.9-5.1 6.1-9.5 0-.8 0-1.6.1-2.4.2-1 .6-1.8 1.6-2.1.9-.3 1.8-.2 2.8-.1.8.1 1.3.6 1.7 1.3.3.6.5 1.3.4 2-.1 1.5 0 3 .5 4.4 1.4 4 4.2 6.5 8.4 7.2 3.2.5 6-.3 8.5-2.5 2.7-2.3 3.8-5.3 3.6-8.8zM34.9 76c-4.3 0-7.7-3.5-7.7-7.8 0-4.2 3.5-7.7 7.7-7.7 4.3 0 7.7 3.5 7.7 7.8 0 4.2-3.5 7.7-7.7 7.7zm15.5-16.2c-.4.4-1.2.7-2.2.7-.5 0-1.2-.2-1.7-.7-.5-.4-.4-.9 0-1.4 1-1 2.8-1 3.9 0 .5.4.5.9 0 1.4zm11.9 15.7c-4.1-.1-7.4-3.5-7.3-7.5.1-4.2 3.6-7.6 7.9-7.3 3.8.3 7 3.5 6.9 7.5 0 4.1-3.4 7.4-7.5 7.3z"/><path fill="#A6A8AC" d="M64 51.6s-5.2-1.3-3.9 3 8.9 4.2 8.9 4.2.1-2.5-1-4.2c-1.1-1.7-4-3-4-3zm-30.7 0s5.2-1.3 3.9 3c-1.4 4.3-8.9 4.2-8.9 4.2s-.1-2.5 1-4.2c1-1.7 4-3 4-3z"/></g><circle cx="48.6" cy="48.6" r="43.2" fill="none" stroke="#138972" stroke-width="7" stroke-miterlimit="10" class="i-binocs-border"/><circle cx="48.6" cy="48.6" r="43.2" fill="none" stroke="#1BB899" stroke-miterlimit="10" stroke-dasharray="1.995 1.995" class="i-binocs-dash"/></g></svg>
<!-- fish -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.2 97.2"><g class="i-fish"><ellipse cx="48.6" cy="48.6" fill="#AF8EC1" class="i-fish-bg" rx="43.2" ry="43.2"/><path fill="#A2D6F4" d="M91.2 57.5c-1.8 0-3.5-.8-4.7-2-1.2 1.2-2.9 2-4.7 2s-3.5-.8-4.7-2c-1.2 1.2-2.9 2-4.7 2-1.8 0-3.5-.8-4.7-2-1.2 1.2-2.9 2-4.7 2s-3.5-.8-4.7-2c-1.2 1.2-2.9 2-4.7 2s-3.5-.8-4.7-2c-1.2 1.2-2.9 2-4.7 2-1.8 0-3.5-.8-4.7-2-1.2 1.2-2.9 2-4.7 2-1.8 0-3.5-.8-4.7-2-1.2 1.2-2.9 2-4.7 2s-3.5-.8-4.7-2c-1.2 1.2-2.9 2-4.7 2s-3.5-.8-4.7-2c-1.2 1.2-2.9 2-4.7 2h-.5c5.3 19.8 22.6 34.3 43.1 34.3s37.7-14.5 43.1-34.3h-1.1z" class="i-fish-water"/><g class="i-fish-main"><path fill="#A7A8AA" d="M39.5 27.2c.5.2.7.5.9.8.2.3.4.6.5 1l.1.2v.1c-.1.7-.2 1.4-.2 2.1 0 .3.1.7.1 1 0 .2.1.3.2.5 0 .1.2.3.2.5.3.6.8 1.1 1.4 1 .2 0 .3-.1.5-.1.2-.1.3-.2.5-.3.3-.2.6-.5.8-.8-.2.4-.4.7-.6 1-.2.3-.6.6-1 .7-.3.1-.6.1-.8.1-.2 0-.5-.1-.7-.2-.4-.2-.7-.6-.9-.9-.1-.2-.2-.3-.3-.5l-.3-.6c-.1-.4-.2-.8-.2-1.3 0-.4.1-.8.2-1.2.1-.4.3-.8.5-1.1v.3c-.3-.3-.4-.6-.6-1-.2-.5-.4-.8-.3-1.3z"/><path fill="#FFF" d="M30.6 11.2l9.3 16.2-.4.3-9.7-16"/><g class="i-fish-actualFish"><path fill="#FAC61E" d="M61.7 63.4c3.3-4.2 3.6-12 .3-19.6-2.7-6.2-7.2-10.8-11.6-12.4v.1c-.4 1-1.1 1.6-1.7 1.4-.6-.2-.8-1.1-.4-2.1-1.6-.3-3.2-.1-4.7.5-.5.2-.9.5-1.3.8l.7 5.7-3-3.3c-1.2 1.8-1.8 4.1-2 6.8.7-.2 1.5-.2 2.2.2 1.3.7 1.9 2 1.3 3-.5 1-2 1.3-3.2.6-.1-.1-.2-.2-.3-.2.2 2.8 1 5.7 2.2 8.6 3.3 7.5 9 12.5 14.3 13.1-3.4 3.7-6.2 10.4-2.5 14.3.9-1.2 1.8-2.2 2.7-3.1-.6-.3-1.2-1.1-1.3-2-.2-1.3.5-2.4 1.4-2.6.9-.1 1.8.8 2 2.1v.4c1.6-1.4 3.2-2.4 4.5-3.1 2.8-.9 7-1.8 12.3-1.2-.3-5.2-6.9-7.7-11.9-8z"/><path fill="#F9A028" d="M41.5 44.4c.5-1-.1-2.4-1.4-3.1-.8-.4-1.6-.4-2.3-.2-.1 1.2-.1 2.4 0 3.7.1.1.2.2.3.2 1.3.7 2.8.5 3.4-.6zm7-11.4c.6.2 1.5-.4 1.9-1.5v-.1c-.8-.3-1.6-.5-2.4-.7-.3 1.1-.1 2 .5 2.3z"/><circle cx="45.6" cy="55.5" r="3" fill="#F9A028"/><ellipse cx="61.8" cy="52.9" fill="#F9A028" transform="rotate(-66.285 61.838 52.868)" rx="1.1" ry="1.5"/><ellipse cx="53.6" cy="46.2" fill="#F9A028" transform="rotate(-23.537 53.586 46.163)" rx="2.1" ry="2.4"/><path fill="#F9A028" d="M55 73.1c-1 .1-1.7 1.3-1.6 2.7.1 1 .7 1.8 1.3 2.1.8-.8 1.6-1.5 2.3-2.1v-.5c-.1-1.4-1-2.3-2-2.2z"/><ellipse cx="63.3" cy="66.6" fill="#F9A028" transform="rotate(-177.312 63.308 66.56)" rx="3" ry="1.5"/><path fill="#F37C28" d="M47.7 52s.2.3.5.9c.2.3.3.6.6 1 .2.4.5.8.8 1.2.3.4.6.8 1 1.2.4.4.8.7 1.2 1 .4.3.9.3 1.3.4.2-.1.5-.1.7-.1l.4-.1.2-.1-.1.1.1-.1.5-.3c.1-.1.3-.2.4-.2.1-.2.3-.2.5-.5.2-.2.3-.4.4-.6.1-.2.2-.5.3-.7.2-.5.2-1.1.3-1.6v-1.6c-.1-.5-.1-1-.2-1.4-.1-.4-.1-.8-.2-1.1-.1-.6-.2-1-.2-1s.3.3.6.8c.2.3.4.6.6 1 .2.4.4.9.6 1.4.1.3.2.6.3.8.1.3.1.6.2 1 .1.7.1 1.4 0 2.2-.1.4-.2.8-.4 1.2l-.3.6-.4.5c-.2.4-.7.7-1 1-.2.2-.3.2-.5.3l-.5.3-.1.1-.1.1h-.1l-.3.1-.6.2c-.4.1-.9.1-1.4.1-.9-.1-1.8-.4-2.5-.9s-1.1-1.1-1.5-1.7c-.2-.3-.3-.6-.5-.9-.1-.3-.2-.6-.3-.8-.2-.5-.3-1-.4-1.5-.1-.4-.1-.8-.2-1.2.3-.7.3-1.1.3-1.1z" class="i-fish-fin"/><circle cx="49.8" cy="37.2" r="2.3" fill="#FFF" class="i-fish-eye"/><circle cx="49" cy="37.3" r="1.4" fill="#212221" class="i-fish-pupil"/></g></g><ellipse cx="48.6" cy="48.6" fill="none" stroke="#9465AB" stroke-width="7" stroke-miterlimit="10" class="i-fish-border" rx="43.2" ry="43.2"/><ellipse cx="48.6" cy="48.6" fill="none" stroke="#AF8EC1" stroke-miterlimit="10" stroke-dasharray="1.995 1.995" rx="43.2" ry="43.2" class="i-fish-dash"/></g></svg>
<!-- tent -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.2 97.2"><g class="i-tent"><ellipse cx="48.3" cy="48.8" fill="#F6DC64" class="i-tent-bg" rx="42.4" ry="42.8"/><path fill="#1AB899" d="M6.7 61.8C12.8 79 29.2 91.3 48.6 91.3c19.3 0 35.7-12.3 41.8-29.5H6.7z" class="i-tent-ground"/><path fill="#F27FAB" d="M16.9 69.4L55.4 61 40 27.9"/><path fill="#F6DC64" d="M54.1 54.3v-.1s0-.1-.1-.1c0 0 0-.1-.1-.1 0 0 0-.1-.1-.1-1.6-3-5.6-6.1-5.6-6.1L30.8 62.2l.7 2.9h.1c-.1 0-.1.1-.1.1l1.8 2.4 22.1-4.9c0-.2 0-5.3-1.3-8.4z" class="i-tent-light" opacity=".35"/><path fill="#52ABD3" d="M33.3 67.4L32.2 65l-.2-.5-1.1-2.4-1.1.5-.8 1.8c-.1 0-.2.1-.3.1L26 65.9c-.8.4-1.2 1.4-.8 2.2.4.8 1.4 1.2 2.2.8l2.5-1.2c.1-.1.2-.1.3-.2l1.9.5 1.2-.6z"/><ellipse cx="32" cy="64.8" fill="#FAC61E" class="i-tent-lightBase" transform="rotate(64.278 32.026 64.79)" rx="2.9" ry=".2"/><path fill="none" stroke="#725431" stroke-width="1.171" stroke-miterlimit="10" d="M40 29.2l-.6 40.4" stroke-linecap="round"/><path fill="#F9C3C9" d="M39.8 29.2v40.4l24.5.2L40 27.1 16.9 69.4l9.3.1"/><path fill="#F27FAB" d="M40 27.1h18.6l23.5 37-17.8 5.7"/><path fill="#F6DC64" d="M54.1 50.5c-1.4-5.1 1.3-9.4 6.2-9.6s9.9 3.3 11.3 7.9c1.4 4.6-1.4 8.9-6.2 9.6-4.8.7-9.9-2.9-11.3-7.9z" class="i-tent-lightEnd" opacity=".3"/><path fill="#725431" d="M65.4 68.2c0-.3-.6-.6-1.2-.6-.7 0-1.2.3-1.2.6 0 .2.3.4.7.5l.5 1.3.6-1.3c.3-.1.6-.3.6-.5zm17.7-5.3c0-.2-.4-.4-1-.4s-1 .2-1 .4.2.3.5.4l.4 1 .5-1c.4-.1.6-.2.6-.4zm-64.7 4.9c0-.3-.6-.6-1.2-.6-.7 0-1.2.3-1.2.6 0 .2.3.4.7.5l.5 1.3.6-1.3c.3-.1.6-.3.6-.5z"/><path d="M68.9 45.1c-1-1.5-3.1-2.4-4.6-1.9-1.5.5-1.9 2.2-.9 3.8.1.2.3.4.5.6-.7-.1-1.3 0-2 .3s-1.2.6-1.5 1l-.3-.6c-1-1.6-3.1-2.5-4.6-2-1.5.6-1.9 2.4-.9 4.1 1 1.7 3.1 2.5 4.6 1.9.1 0 .2-.1.3-.1.1.2.2.4.3.7l.1.1h-.1l-1 1.1c-.1.1 0 .2.1.3.1.1.2.1.3.1l1-1.1c.3.3.6.5 1 .7.3.5.6.9.9 1.2l-1.1.3c0 .1 0 .2.3.2l.8-.4c.1.1.3.2.4.3l-.7.5c0 .1 0 .3.3.2l.6-.5c1.1.8 2.6 1 4.4.2 1.9-.8 2.5-1.8 2.4-3l.8-.1c.3-.1.1-.3 0-.3l-.9.2c0-.1-.1-.3-.1-.4l.9-.3c.1-.1 0-.3-.1-.3l-.9.4c-.2-.4-.4-.8-.7-1.3 0-.3 0-.6-.1-.9L70 50h.1c.1 0 .1-.1.1-.2s-.2-.2-.3-.2l-1.6.1h-.1c0-.1-.1-.1-.1-.2-.1-.2-.3-.4-.5-.6.1 0 .2-.1.3-.1 1.6-.5 2-2.2 1-3.7z" class="i-tent-simon" opacity=".3"/><ellipse cx="48.6" cy="48.6" fill="none" stroke="#F9C823" stroke-width="7" stroke-miterlimit="10" class="i-tent-border" rx="43.1" ry="43.2"/><ellipse cx="48.6" cy="48.6" fill="none" stroke="#F6DC64" stroke-width="1.004" stroke-miterlimit="10" stroke-dasharray="1.995 1.995" rx="43.2" ry="43.2" class="i-tent-dash"/></g></svg>
</div>/* The styles on body are not set by me - I need them because of our internal app where this is hosted. */
body {
font-family: arial, helvetica, sans-serif;
font-size: 18px;
}
.svg-fun-stuff {
margin: 0 auto;
max-width: 100%;
padding: 1rem 2rem;
text-align: center;
}
svg {
width: 28em;
}
svg:hover {
cursor: pointer;
}
/* shared animations */
@keyframes i-shared-blinkEyes {
0%, 2%, 4%, 32% {
visibility: visible;
}
1%, 3%, 31% {
visibility: hidden;
}
}
@keyframes i-shared-lightFlashing {
0%, 12% {
visibility: visible;
}
11% {
visibility: hidden;
}
}
@keyframes i-shared-nose {
17%, 96% {
transform: translate(0);
}
11%, 13%, 15%, 94% {
transform: translate(-.02em);
}
12%, 14%, 16%, 95% {
transform: translate(.02em);
}
}
@keyframes i-shared-pupils {
20% {
transform: translate(-.1em);
}
50% {
transform: translate(0);
}
80% {
transform: translate(.1em);
}
}
@keyframes i-shared-whiskersL {
5%, 52% {
transform: rotate(0deg);
}
4%, 51% {
transform: rotate(5deg);
}
}
@keyframes i-shared-whiskersR {
8%, 82% {
transform: rotate(0deg);
}
7%, 81% {
transform: rotate(-7deg);
}
}
/* i-bow */
.i-bow:hover {
.i-bow-arrow {
animation: i-bow-arrow 2s linear;
transform: translate(0);
}
.i-bow-main {
animation: i-bow-main 2s linear forwards;
transform-origin: 50% 50%;
}
}
@keyframes i-bow-arrow {
0%, 100% {
opacity: 1;
transform: translate(0);
}
40%, 45% {
transform: translate(-.2em);
}
50% {
opacity: 1;
transform: translate(7em);
}
70% {
opacity: 0;
transform: translate(7em);
}
71%, 90% {
opacity: 0;
transform: translate(0);
}
}
@keyframes i-bow-main {
40%, 45% {
transform: scale(1.1, .9);
}
50% {
transform: scale(1);
}
}
/* i-flash */
.i-flash-nose,
.i-flash-pupils {
transform: translate(0);
}
.i-flash-eyes,
.i-flash-glasses,
.i-flash-pupils,
.i-flash-whiskersL,
.i-flash-whiskersR {
transform: rotate(0deg);
transform-origin: 50% 50%;
}
.i-flash-whiskersL {
-webkit-transform-origin: right center; /* because webkit is special */
}
.i-flash-whiskersR {
-webkit-transform-origin: left center; /* because webkit is special */
}
.i-flash:hover {
.i-flash-eyes {
animation:
i-shared-blinkEyes 14s 2s step-end infinite,
i-flash-scaredEyes 7s 7s step-end;
}
.i-flash-glasses {
animation: i-flash-glasses 3s 7s step-end;
}
.i-flash-light,
.i-flash-lightBase {
animation:
i-flash-light 3s 7s step-end forwards,
i-shared-lightFlashing 20s 10s step-end infinite;
visibility: hidden;
}
.i-flash-nose {
animation: i-shared-nose 12s step-end infinite;
}
.i-flash-pupils {
animation:
i-shared-blinkEyes 14s 2s step-end infinite,
i-shared-pupils 5s step-end,
i-flash-scaredEyes 7s 7s step-end;
}
.i-flash-whiskersL {
animation: i-shared-whiskersL 10s step-end infinite;
}
.i-flash-whiskersR {
animation: i-shared-whiskersR 8s step-end infinite;
}
}
@keyframes i-flash-glasses {
1%, 5%, 9%, 13% {
transform: rotate(7deg);
}
3%, 7%, 11% {
transform: rotate(-7deg);
}
15% {
transform: rotate(0deg);
}
}
@keyframes i-flash-light {
1%, 4%, 7%, 10%, 13%, 100% {
visibility: visible;
}
3%, 6%, 9%, 12% {
visibility: hidden;
}
}
@keyframes i-flash-scaredEyes {
0% {
transform: scale(1.2);
}
8% {
transform: scale(1);
}
}
/* i-paint */
[class^="i-paint-color"] {
animation: i-paint-color 5s -.5s step-end infinite paused;
}
@for $i from 2 through 5 {
.i-paint-color#{$i} {
animation-delay: -#{$i - .5}s;
}
}
.i-paint-main {
animation: i-paint-main 2s step-end infinite paused;
transform-origin: 50% 50%;
}
.i-paint:hover {
[class^="i-paint-color"],
.i-paint-main {
animation-play-state: running;
}
}
@keyframes i-paint-color {
0% {
fill: #F27FAB;
}
20% {
fill: #9465AB;
}
40% {
fill: #F9A028;
}
60% {
fill: #52ABD3;
}
80% {
fill: #1BB899;
}
}
@keyframes i-paint-main {
50% {
transform: rotate(-10deg);
}
}
/* i-canoe */
.i-canoe-main {
animation: i-canoe-main-updown 2s linear infinite paused;
transform:
rotate(0deg)
translate(0);
}
.i-canoe:hover {
.i-canoe-eyes,
.i-canoe-pupils {
animation: i-shared-blinkEyes 10s step-end infinite;
}
.i-canoe-main {
animation-play-state: running;
}
}
@keyframes i-canoe-main-updown {
20% {
transform:
rotate(-1deg)
translate(0);
}
50%, 60% {
transform:
rotate(1.5deg)
translate(0, -.2em);
}
}
/* i-fire */
[class^="i-fire-main"] {
animation: i-fire-main 1.25s 0s infinite paused;
transform-origin: 50% 50%;
}
@for $i from 2 through 5 {
.i-fire-main#{$i} {
animation-delay: -#{$i - 1}s;
}
}
.i-fire:hover [class^="i-fire-main"] {
animation-play-state: running;
}
@keyframes i-fire-main {
50% {
transform: scale(0.7, 1);
}
}
/* i-map */
.i-map-armsMap {
animation: i-map-armsMapHead 10s reverse linear infinite paused;
}
.i-map-head {
animation: i-map-armsMapHead 6s linear infinite paused;
}
.i-map-tail {
animation: i-map-tail 3s alternate linear infinite paused;
}
.i-map-armsMap,
.i-map-head,
.i-map-tail {
transform: rotate(0deg);
transform-origin: 50% 50%;
}
.i-map-tail {
-webkit-transform-origin: left top; /* because webkit is special */
}
.i-map:hover {
.i-map-armsMap,
.i-map-head,
.i-map-tail {
animation-play-state: running;
}
}
@keyframes i-map-armsMapHead {
5%, 30% {
transform: rotate(-5deg);
}
35%, 60% {
transform: rotate(5deg);
}
65%, 100% {
transform: rotate(0deg);
}
}
@keyframes i-map-tail {
25% {
transform: rotate(-2deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(2deg);
}
}
/* i-music */
.i-music-noteL,
.i-music-noteR {
animation:
i-music-colors 2s alternate linear infinite paused,
i-music-rotation 1s alternate linear infinite paused;
transform-origin: 50% 50%;
}
.i-music-noteR {
animation-delay: -1s;
}
.i-music:hover {
.i-music-noteL,
.i-music-noteR {
animation-play-state: running;
}
}
@keyframes i-music-colors {
0% {
fill: #52ABD3;
}
100% {
fill: #3D8EBA;
}
}
@keyframes i-music-rotation {
0% {
transform:
rotate(10deg)
scale(1, .8);
}
100% {
transform:
rotate(0deg)
scale(1);
}
}
/* i-binocs */
.i-binocs-main,
.i-binocs-nose,
.i-flash-pupils {
transform: translate(0);
}
.i-binocs-main {
transition: transform 1s linear;
}
.i-binocs-whiskersL,
.i-binocs-whiskersR {
transform: rotate(0deg);
transform-origin: 50% 50%;
}
.i-binocs-whiskersL {
-webkit-transform-origin: right center; /* because webkit is special */
}
.i-binocs-whiskersR {
-webkit-transform-origin: left center; /* because webkit is special */
}
.i-binocs:hover {
.i-binocs-eyes {
animation: i-shared-blinkEyes 14s 1s reverse step-end infinite;
}
.i-binocs-nose {
animation: i-shared-nose 15s reverse step-end infinite;
}
.i-binocs-pupils {
animation:
i-shared-blinkEyes 14s 1s reverse step-end infinite,
i-shared-pupils 16s 1s reverse step-end infinite;
}
.i-binocs-whiskersL {
animation: i-shared-whiskersL 10s reverse step-end infinite;
}
.i-binocs-whiskersR {
animation: i-shared-whiskersR 4s reverse step-end infinite;
}
.i-binocs-main {
transform: translate(0, 1em);
}
}
/* i-fish */
.i-fish-actualFish {
animation: i-fish-main .3s step-end infinite paused;
}
.i-fish-fin {
transform-origin: 50% 50%;
-webkit-transform-origin: left top; /* because webkit is special */
}
.i-fish-main {
animation: i-fish-slide .75s alternate-reverse linear infinite paused;
}
.i-fish-water {
animation: i-fish-slide 2s alternate linear infinite paused;
}
.i-fish:hover {
.i-fish-eye,
.i-fish-pupil {
animation: i-shared-blinkEyes 8s step-end infinite;
}
.i-fish-fin {
animation: i-fish-fin 5s 1s step-end infinite;
}
.i-fish-actualFish,
.i-fish-main,
.i-fish-water {
animation-play-state: running;
}
}
@keyframes i-fish-fin {
10%, 12%, 20%, 22%, 60% {
transform:
rotateY(30deg)
rotateX(-10deg);
}
0%, 11%, 13%, 21%, 23%, 61% {
transform: rotate(0deg);
}
}
@keyframes i-fish-main {
50% {
transform: rotate(1deg);
}
}
@keyframes i-fish-slide {
0% {
transform: translate(-.2em, 0);
}
100% {
transform: translate(.2em, 0);
}
}
/* i-tent */
.i-tent-lightBase,
.i-tent-lightEnd,
.i-tent-light,
.i-tent-simon {
visibility: hidden;
}
.i-tent-bg,
.i-tent-ground {
transition: fill 1s linear;
}
.i-tent:hover {
.i-tent-bg {
fill: #2E348E;
}
.i-tent-ground {
fill: #1B75BB;
}
.i-tent-lightBase,
.i-tent-lightEnd,
.i-tent-light,
.i-tent-simon {
animation: i-shared-lightFlashing 10s .5s reverse step-end infinite;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.